上一篇中嫂侍，我們介紹了微信小程序的基本目錄結(jié)構(gòu)，各個(gè)文件的作用渗稍。本篇跟大家一起創(chuàng)建第一個(gè)頁(yè)面佩迟，歡迎頁(yè)面。先看下最后的效果圖：
首先打開(kāi)微信WEB開(kāi)發(fā)者工具免胃，創(chuàng)建quick start項(xiàng)目音五，簡(jiǎn)單的修改一下。 目錄結(jié)構(gòu)如下圖：[圖片上傳中羔沙。。厨钻。（2）]
把Index文件夾重命名為welcome扼雏；
底部的hello world改為一個(gè)類(lèi)似于按鈕的樣式；
添加背景顏色夯膀； 修改頂部樣式诗充；
按鈕的實(shí)現(xiàn)：
下面是welcome頁(yè)面的WXML代碼：
<!--index.wxml-->
<view class="container">
<view bindtap="bindViewTap" class="userinfo">
<image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</view>
<view class="usermotto">
<text class="btn">歡迎進(jìn)入小程序開(kāi)發(fā)</text>
</view>
</view>
下面是welcome頁(yè)面的WXSS代碼：
/**index.wxss**/
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
}
.userinfo-avatar {
width: 128rpx;
height: 128rpx;
margin: 20rpx;
border-radius: 50%;
}
.userinfo-nickname {
color: #aaa;
}
.userinfo image{
width: 200rpx;
height: 200rpx;
border-radius: 50%;
}
.usermotto {
margin-top: 200px;
border: 1px solid #405f80;
width: 250rpx;
height: 80rpx;
text-align: center;
border-radius: 5px;
}
.btn{
font-size: 22rpx;
font-family: MicroSoft Yahei;
font-weight: bold;
line-height: 80rpx;
}
page{
height: 100%;
background: #ECF8EB;
}
背景顏色的設(shè)置：
注意：在最外部的view設(shè)置寬高百分百，添加背景顏色是無(wú)效的诱建。因?yàn)槲⑿拍J(rèn)外面還有一層page蝴蜓。
所以需要這樣寫(xiě)：
page{
height: 100%;
background: #ECF8EB;
}
頂部設(shè)置：
app.jason代碼如下：
{
"pages":[
"pages/welcome/welcome"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#ECF8EB",
"navigationBarTitleText": "歡迎",
"navigationBarTextStyle":"black"
}
}
本文涉及的源碼如下頁(yè)面可以下載：
http://bbs.html51.com/t-549-1-1/
更多微信小程序教程請(qǐng)至51小程序官網(wǎng)查看：http://html51.com/
歡迎您與51小程序共同成長(zhǎng)，成為微信小程序定制開(kāi)發(fā)專(zhuān)家。
