微信小顺序开辟教程(基本篇)6logs页面剖析

上一篇教程中对index页面举行了剖析，这一篇来剖析下logs页面

老例子先上图

该页面包括返回按钮(用于返回index页面)，页面title和顺序启动日记列表。
和index页面比拟，logs页面多了一个logs.json文件，来设置页面title的内容

{
"navigationBarTitleText": "检察启动日记"
}

更多设置项能够参考设置 小顺序




{{index + 1}}. {{log}}



在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，对页面款式举行掌握。

到此为止，默许天生顺序的剖析部份就完毕了。这个剖析历程是为了对微信小顺序有个总体上的明白，所以许多处所并没有深切。在后面的教程中，我会继承解说微信小顺序开辟的各个方面。