微信小程序開發教程(基礎篇)6-logs頁面解析

上一篇教程中對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: 40rpx;
}
.log-item {
  margin: 10rpx;
}

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

到此爲止，默認生成程序的解析部分就結束了。這個解析過程是爲了對微信小程序有個整體上的理解，因此不少地方並無深刻。在後面的教程中，我會繼續講解微信小程序開發的各個方面。