瘋狂早茶微信小程序基礎(chǔ)篇《三》：index 頁面解析，logs頁面解析 ... ...
這邊教程主要對(duì)默認(rèn)生成的index 頁面進(jìn)行講解。在之前的教程中有寫道，每一個(gè)頁面都包含.js(處理邏輯)，.wxml(描述頁面內(nèi)容)，.wxss(配置頁面樣式)三個(gè)文件，index 頁面也是如此。
講解之前先上圖
index頁面的內(nèi)容不多，只有一個(gè)用戶頭像，用戶姓名，和一個(gè)"Hello World"，首先來看看index.wxml的內(nèi)容
<!--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="user-motto">{{motto}}</text>
</view>
</view>
該頁面的層級(jí)結(jié)構(gòu)比較簡(jiǎn)單，三個(gè)view標(biāo)簽，一個(gè)image以及兩個(gè)text標(biāo)簽，其中view為容器標(biāo)簽，image用來顯示用戶頭像，第一個(gè)text用來顯示用戶昵稱，第二個(gè)text則是"Hello World"
可以看到頁面描述文件中綁定了幾個(gè)變量，分別是第二個(gè)view標(biāo)簽的 bindtap="bindViewTap"，image標(biāo)簽的src="{{userInfo.avatarUrl}} 以及兩個(gè)text標(biāo)簽的內(nèi)容文本。那么這些變量定義在哪里呢，答案就在index.js中
//index.js
//獲取應(yīng)用實(shí)例
var app = getApp()
Page({
data: {
motto: 'Hello World',
userInfo: {}
},
//事件處理函數(shù)
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
},
onLoad: function () {
console.log('onLoad')
var that = this
//調(diào)用應(yīng)用實(shí)例的方法獲取全局?jǐn)?shù)據(jù)
app.getUserInfo(function(userInfo){
//更新數(shù)據(jù)
that.setData({
userInfo:userInfo
})
})
}
})
index.js代碼定義了Page對(duì)象，該對(duì)象中定義了index.wxml綁定的變量，其中onLoad方法會(huì)在頁面加載時(shí)被調(diào)用，該方法會(huì)調(diào)用app對(duì)象的getUserInfo方法來獲取用戶信息并賦值給userInfo屬性，這樣界面就可以顯示用戶頭像和昵稱了。而"Hello World"的顯示則是由motto屬性直接指定。
Page對(duì)象還定義了bindViewTap方法，該方法通過調(diào)用wx.navigateTo導(dǎo)航到logs頁面。關(guān)于頁面導(dǎo)航的更多內(nèi)容將在后面的教程中講解。在該例子中，當(dāng)用戶點(diǎn)擊用戶頭像和昵稱的視圖區(qū)域時(shí)，程序便會(huì)顯示logs頁面。
最后簡(jiǎn)單看下index.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;
}
.usermotto {
margin-top: 200px;
}
該文件定義了index.wxml中使用到的樣式選擇器，這部分比簡(jiǎn)單，在這里就不多做解釋了。
第二部分：logs頁面解析
老規(guī)矩先上圖
該頁面包含返回按鈕(用于返回index頁面)，頁面title和程序啟動(dòng)日志列表。
和index頁面相比，logs頁面多了一個(gè)logs.json文件，來配置頁面title的內(nèi)容
{
"navigationBarTitleText": "查看啟動(dòng)日志"
}
更多配置項(xiàng)可以參考配置 小程序
<!--logs.wxml-->
<view class="container log-list">
<block wx:for="{{logs}}" wx:for-item="log">
<text class="log-item">{{index + 1}}. {{log}}</text>
</block>
</view>
在logs.wxml中，定義了三個(gè)標(biāo)簽，分別為view，block和text，其中view標(biāo)簽為容器，block用于綁定logs數(shù)組，而text標(biāo)簽用于顯示每一條log。wx:for和wx:for-item是小程序框提供的列表綁定語法，更多詳情請(qǐng)參考列表渲染
//logs.js
var util = require('../../utils/util.js')
Page({
data: {
logs: []
},
onLoad: function () {
this.setData({
logs: (wx.getStorageSync('logs') || []).map(function (log) {
return util.formatTime(new Date(log))
})
})
}
})
logs.js定義了logs數(shù)組，并在onLoad方法中從本地緩存中獲取程序啟動(dòng)時(shí)間數(shù)據(jù)，之后調(diào)用數(shù)組的map方法來將時(shí)間格式化為字符串
.log-list {
display: flex;
flex-direction: column;
padding: 40rpx;
}
.log-item {
margin: 10rpx;
}
最后仍然是logs.wxss，對(duì)頁面樣式進(jìn)行控制。
到此為止，默認(rèn)生成程序的解析部分就結(jié)束了。這個(gè)解析過程是為了對(duì)微信小程序有個(gè)總體上的理解，所以很多地方并沒有深入。在后面的教程中，我會(huì)繼續(xù)講解微信小程序開發(fā)的各個(gè)方面。
