还只剩最后一个page需要研究了,胜利的曙光就在眼前。
在这个文件中,代码并不多,而且也比较容易。
在一开始demo引入了一个工具,其实就是utils文件夹中的文件:
我们可以看到微信是用require来引入的,其实在官方文档中还有import和include引入,不过各司其职,需要读者自己去看官方文档研究。
对了,在上一篇中没有提到,在App({...})或者Page({...})方法外定义的变量是一个全局变量,在这个文件中都可以使用。
照例,在这个page文件的data中定义了一个logs数组变量,这个变量是个老朋友,因为在app.js中也有一个这样类似的变量:
在onLoad中应证了我的想法,他用到了本地缓存中的logs:
这个时候唯一不太明白的是map方法和util这个变量的方法。首先看map方法,这个必须结合页面来看,它达到的效果是:
首先我们肯定的是logs是一个数组,wx.getStorageSync('logs')获取的正是一个数组,所以说map是一个数组方法。其次页面上展示了一行一行的时间,所以说map会遍历数组,从0开始(所有语言数组几乎都是从0开始),其次map的参数是一个方法,其中这个方法还带了一个参数log,我大胆猜测这个log即是数组中的内容,因此,map会遍历数组每一项而且都会进行一次function(log){}方法(笔者曾试过百度map方法,查到的内容比较规范但是特别杂繁琐,针对本demo而言我觉得更适合用拆分方法来解释map的用法)。
既然清楚了map的方法实现,我们再来看看util变量实现了什么方法:
我们直接跳转到utils文件夹,点击看源码:
这是个简单的js文件,而在这个文件中我们没有看到App({...})或者Page({...})类似的方法,只是单纯的罗列了三个方法function formatTime(),function formatNumber(),module.exports,显而易见的是前面两个方法应该是一个公开方法,因为在logs.js中已经调用过formatTime:
我们可以尝试调用formatNumber(),是否能够成功:
成功了么?答案是否定的,而且控制台报了这样的错误:util.formatNumber is not a function;at "pages/logs/logs" page lifeCycleMethod onLoad function
这是为什么?答案就在这里:
有幸的是笔者在这之前接触过php的第三方框架thinkPhp,里面正好有类似的代码。这个有什么用呢?简单来说就是让你这里的方法公开给其他类使用,我们可以看到这里我们只公开了formatTime方法(第一个是我们取的方法名,第二个是util.js中需要公开的方法名),如果我们把formatNumber()方法也公开了,就不会出现上面的错误了:
为了区别两个参数的不同,笔者专门把自己自定义的方法名简写了,然后将