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