Basics of Mini Program Development - Logs Page Analysis (6)

In the previous tutorial, the index page was parsed. This article will parse the logs page.

The old rule is to show the picture first

logs page

This page contains the return button (used to return to the index page), page title and program startup log list.
Compared with the index page, the logs page has an additional logs.json file to configure the content of the page title

{
    "navigationBarTitleText": "查看启动日志"
}

For more configuration items, please refer to the configuration applet

<!--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>

In logs In .wxml, three tags are defined, namely view, block and text. The view tag is the container, the block is used to bind the logs array, and the text tag is used to display each log. wx:for and wx:for-item are the list binding syntax provided by the mini program box. For more details, please refer to List Rendering

//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 defines the logs array and caches it locally in the onLoad method. Obtain the program startup time data, and then call the map method of the array to format the time into a string

.log-list {
  display: flex;
  flex-direction: column;
  padding: 40rpx;
}
.log-item {
  margin: 10rpx;
}

Finally, it is still logs.wxss to control the page style.

At this point, the parsing part of the default generation program is over. This analysis process is to have an overall understanding of the WeChat applet, so many places are not in depth. In the following tutorials, I will continue to explain various aspects of WeChat applet development.

The above is the detailed content of Basics of Mini Program Development - Logs Page Analysis (6). For more information, please follow other related articles on the PHP Chinese website!