小程式開發基礎篇之logs頁面解析（6）

上一篇教學中對index頁面進行了解析，這篇來解析下logs頁面

老規矩先上圖

#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，對頁面樣式進行控制。

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

以上是小程式開發基礎篇之logs頁面解析（6）的詳細內容。更多資訊請關注PHP中文網其他相關文章！