接上節簡單介紹完wxml，這節實際運用小程序的wxml來實現一套簡單登錄和個人信息展示。
登錄頁面
創建好項目后，在pages下新建一個login目錄，右鍵login文件夾，選擇新建page，創建login的page，如下圖：
創建后的page如下圖：
創建好login page后，項目會自動在app.js中添加login的page路勁，新增的page會順序加在后邊，小程序打開默認加載第一個路徑，我們將login的路徑移到最前邊，這樣每次編譯后，初始化頁面就為登錄的頁面了，如下：
打開login.wxml，看到ide自動生成的代碼如下：
<!--pages/login/login.wxml-->
<text>pages/login/login.wxml</text>我們不需要這行代碼，直接刪掉，自己實現登錄界面的代碼如下：
login.wxml
<view class="login-container">
<view class="title">微信小程序App</view>
<view class="login-box">
<label>用戶名</label>
<input placeholder="請輸入用戶名"/>
<label>密碼</label>
<input placeholder="請輸入密碼"/>
<button class="login-btn">立即登錄</button>
<view class="three-line">一一一一一第三方登錄一一一一一</view>
<button class="login-btn" style="background-color:green;">微信登錄</button>
</view>
</view>login.wxss
/* pages/login/login.wxss */
page{
height: 100%; /* 使用page的height可以使頁面占全屏 */
background-color: #fafafa;
}
.login-container{
padding: 0 10%;
height: 100%;
}
.title{
font-size: large;
text-align: center;
padding-top: 10%;
font-weight: bold;
}
.login-box{
margin-top: 10%;
padding: 10% 5%;
background-color: white;
border-radius: 10px;
box-shadow: 0 4px 4px #888888;
}
.login-box>input{
margin: 5% 0 8% 0;
border-bottom: 1rpx solid lightgray;
}
.login-btn{
width: 100%!important;
background-color: #2f6afd;
color: white;
font-weight: normal;
}
.three-line{
margin: 8% 0;
text-align: center;
font-size: 12px;
color: gray;
}
效果如下：（微信登錄可以用圖標更好看些，我這里比較懶就先用按鈕代替）
個人信息頁面
以同樣的方式，在pages文件夾下創建個人信息page，如下：
編輯personinfo.wxml如下：
<!--pages/personinfo/personinfo.wxml-->
<view class="container">
<view class="info-box">
<view style="text-align: center;margin-bottom:10%;">
<image class="avatar-img" src="{{avatarUrl}}" />
</view>
<text>昵稱： {{nickName}}</text>
<text>性別： {{gender}}</text>
<text>國家： {{country}}</text>
<text>省份： {{province}}</text>
</view>
<view style="margin-top:20%">
<button open-type="getUserInfo" bindtap="showUserInfoTap">獲取個人信息</button>
</view>
</view>personinfo.wxss如下：
.info-box{
width: 80%;
}
.avatar-img {
width: 100px;
height: 100px;
border: 1px solid gray;
}
.info-box>text{
display: block;
margin-left: 20%;
margin-top: 4%;
}頁面效果如圖：
實現點擊‘獲取個人信息’按鈕顯示個人信息，bindtap="showUserInfoTap" 類似於H5中的onclick點擊事件，在js文件中添加函數，調用微信小程序的開放接口 wx.getUserInfo(Object object) 獲取微信個人信息。使用setDate()的方式動態顯示數據，詳見官方文檔用法：WXML模板
personinfo.js如下：
// pages/personinfo/personinfo.js
Page({
/**
* 頁面的初始數據
*/
data: {
nickName : "",
avatarUrl : "",
gender : "",
province : "",
city : "",
country : ""
},
showUserInfoTap:function(){
var that = this;
wx.getUserInfo({
success: function(res) {
console.log(res);
var userInfo = res.userInfo
console.log(userInfo);
var nickName = userInfo.nickName
var avatarUrl = userInfo.avatarUrl
var gender = userInfo.gender //性別 0：未知、1：男、2：女
var province = userInfo.province
var city = userInfo.city
var country = userInfo.country
if(gender==1){
gender = '男'
}else if(gender==2){
gender='女'
}else{
gender = '未知'
}
that.setData({
nickName : nickName,
avatarUrl : avatarUrl,
gender : gender,
country : country,
province : province
})
}
})
},
/**
* 生命周期函數--監聽頁面加載
*/
onLoad: function (options) {
},
/**
* 生命周期函數--監聽頁面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函數--監聽頁面顯示
*/
onShow: function () {
},
/**
* 生命周期函數--監聽頁面隱藏
*/
onHide: function () {
},
/**
* 生命周期函數--監聽頁面卸載
*/
onUnload: function () {
},
/**
* 頁面相關事件處理函數--監聽用戶下拉動作
*/
onPullDownRefresh: function () {
},
/**
* 頁面上拉觸底事件的處理函數
*/
onReachBottom: function () {
},
/**
* 用戶點擊右上角分享
*/
onShareAppMessage: function () {
}
})點擊獲取微信個人信息效果：
有興趣的朋友可以加我的qq群交流學習，群里有更多源碼，學習資料
QQ群：741909960