monsterk1 微信小程序上手篇《三》page文件，微信小程序平台开发

还只剩最后一个page需要研究了胜利的曙光就在眼前。

在这个文件中代码并不多文章内容代码并不多而且也比较容易。

[javascript] view plain copy

 

//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))  

      })  

    })  

  }  

})  

  在一开始demo引入了一个工具其实就是utils文件夹中的文件：

[javascript] view plain copy

 

var util = require('../../utils/util.js')  

  我们可以看到微信是用require来引入的其实在官方文档中还有import和include引入不过各司其职需要读者自己去看官方文档研究。

对了在上一篇中没有提到在App({...})或者Page({...})方法外定义的变量是一个全局变量在这个文件中都可以使用。

照例在这个page文件的data中定义了一个logs数组变量这个变量是个老朋友因为在app.js中也有一个这样类似的变量：

[javascript] view plain copy

 

var logs = wx.getStorageSync('logs') || []  

  在onLoad中应证了我的想法他用到了本地缓存中的logs：

[javascript] view plain copy

 

logs: (wx.getStorageSync('logs') || []).map(function (log) {  

     return util.formatTime(new Date(log))  

   })  

这个时候唯一不太明白的是map方法和util这个变量的方法。首先看map方法这个必须结合页面来看它达到的效果是：

首先我们肯定的是logs是一个数组wx.getStorageSync('logs')获取的正是一个数组所以说map是一个数组方法。其次页面上展示了一行一行的时间所以说map会遍历数组从0开始（所有语言数组几乎都是从0开始）其次map的参数是一个方法其中这个方法还带了一个参数log我大胆猜测这个log即是数组中的内容因此map会遍历数组每一项而且都会进行一次function(log){}方法（笔者曾试过百度map方法查到的内容比较规范但是特别杂繁琐针对本demo而言我觉得更适合用拆分方法来解释map的用法）。

既然清楚了map的方法实现我们再来看看util变量实现了什么方法：

[javascript] view plain copy

 

util.formatTime(new Date(log))  

  我们直接跳转到utils文件夹点击看源码：

[javascript] view plain copy

 

function formatTime(date) {  

  var year = date.getFullYear()  

  var month = date.getMonth() + 1  

  var day = date.getDate()  

  

  var hour = date.getHours()  

  var minute = date.getMinutes()  

  var second = date.getSeconds()