## 欢迎页  [TOC] ### 1.[基础配置](https://www.kancloud.cn/lixu/wechat_mp/790164) ***** ***** ### 2.welcome页面编写 #### welcome.wxml ``` <view class='head'> <image src='/images/if_sister_3231120.png'></image> <text>hello,小程序</text> <button hover-class="button_hover" bindtap='JumpTo'>开启我的小程序之旅</button> </view> ``` >1.[hover-class="button_hover"]()给按钮添加了一个hover属性，详见welcome.wxss > button_hover属性 2.[bindtap="JumpTo"]()实现点击该按钮跳转,详见welcome.js > JumpTo函数设置 ***** #### welcome.wxss ``` page{ height: 100%; background: #b3d4db; } ``` >page是小程序自带的包裹所有标签的一个标签 将page设置成100%的高度进行背景填充  ``` .head{ display: flex; flex-direction: column; align-items: center; } ``` ##### 使用flex布局 >` flex-direction: column;`将元素横向排版改成纵向排列 `align-items: center;`实现元素的居中  ##### 图片文字按钮设置 ``` .head image{ background: #405f80; margin-top: 200rpx; border-radius: 50%; width: 175rpx; height: 175rpx; } .head text{ margin-top: 50rpx; font-size: 30rpx; font-weight: bolder; } .head button{ color:#405f80; font-size: 21rpx; margin-top:100rpx; width: 260rpx; height: 80rpx; line-height: 80rpx; background: #b3d4db; border: 2rpx solid #405f80; } ``` ##### button_hover属性 ``` .head .button_hover{ background: #405f80; color: white; } ``` ***** #### welcome.js ##### JumpTo函数设置 ``` Page({ JumpTo(){ // 保留原始页面 wx.navigateTo({ url: '/pages/index/index', }) //点击出现支持扫描的二维码 // wx.scanCode({ // }) } }） ``` ##### 关于页面跳转（redirectTo与navigateTo区别） ``` 1.关闭当前页面跳转致新页面,无返回按钮 wx.redirectTo({ url: '/pages/index/index', }) 2.保留当前页面，左上角有返回按钮 wx.navigateTo({ url: '/pages/index/index', }) ``` ***** #### welcome.json ``` {} ``` ***** *****