上一篇教程中對index頁面進行了解析，這一篇來解析下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: 40
 
rpx;
}
.log-item {
  margin: 10rpx;
}

最後仍然是logs.wxss，對頁面樣式進行控制。

到此為止，預設生成程式的解析部分就結束了。這個解析過程是為了對微信小程式有個總體上的理解，所以很多地方並沒有深入。在後面的教程中，我會繼續講解微信小程式開發的各個方面。