欢迎光临,了解微信小程序开发,就上易用通!

monsterk1:微信小程序上手篇《三》page文件

发布:2018-02-02 15:05浏览: 来源:网络 作者:cola


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

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

[javascript] view plain copy
 
  1. //logs.js  
  2. var util = require('../../utils/util.js')  
  3. Page({  
  4.   data: {  
  5.     logs: []  
  6.   },  
  7.   onLoad: function () {  
  8.     this.setData({  
  9.       logs: (wx.getStorageSync('logs') || []).map(function (log) {  
  10.         return util.formatTime(new Date(log))  
  11.       })  
  12.     })  
  13.   }  
  14. })  

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

 

 

[javascript] view plain copy
 
  1. var util = require('../../utils/util.js')  
  我们可以看到微信是用require来引入的,其实在官方文档中还有import和include引入,不过各司其职,需要读者自己去看官方文档研究。

 

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

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

 

[javascript] view plain copy
 
  1. var logs = wx.getStorageSync('logs') || []  

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

 

 

[javascript] view plain copy
 
  1. logs: (wx.getStorageSync('logs') || []).map(function (log) {  
  2.      return util.formatTime(new Date(log))  
  3.    })  

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

monsterk1:微信小程序上手篇《三》page文件(图1)

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

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

 

[javascript] view plain copy
 
  1. util.formatTime(new Date(log))  
  我们直接跳转到utils文件夹,点击看源码:

 

 

[javascript] view plain copy
 
  1. function formatTime(date) {  
  2.   var year = date.getFullYear()  
  3.   var month = date.getMonth() + 1  
  4.   var day = date.getDate()  
  5.   
  6.   var hour = date.getHours()  
  7.   var minute = date.getMinutes()  
  8.   var second = date.getSeconds()  
  9.   
  10.   
  11.   return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')  
  12. }  
  13.   
  14. function formatNumber(n) {  
  15.   n = n.toString()  
  16.   return n[1] ? n : '0' + n  
  17. }  
  18.   
  19. module.exports = {  
  20.   formatTime: formatTime  
  21. }  

  这是个简单的js文件,而在这个文件中我们没有看到App({...})或者Page({...})类似的方法,只是单纯的罗列了三个方法function formatTime(),function formatNumber(),module.exports,显而易见的是前面两个方法应该是一个公开方法,因为在logs.js中已经调用过formatTime:

 

 

[javascript] view plain copy
 
  1. util.formatTime(new Date(log))  
  我们可以尝试调用formatNumber(),是否能够成功:

 

 

[javascript] view plain copy
 
  1. var n = util.formatNumber(1)  

  成功了么?答案是否定的,而且控制台报了这样的错误:util.formatNumber is not a function;at "pages/logs/logs" page lifeCycleMethod onLoad function

 

  这是为什么?答案就在这里:

 

[javascript] view plain copy
 
  1. module.exports = {  
  2.   formatTime: formatTime  
  3. }  
  有幸的是笔者在这之前接触过php的第三方框架thinkPhp,里面正好有类似的代码。这个有什么用呢?简单来说就是让你这里的方法公开给其他类使用,我们可以看到这里我们只公开了formatTime方法(第一个是我们取的方法名,第二个是util.js中需要公开的方法名),如果我们把formatNumber()方法也公开了,就不会出现上面的错误了:

 

 

[javascript] view plain copy
 
  1. fn : formatNumber  

  为了区别两个参数的不同,笔者专门把自己自定义的方法名简写了,然后将



免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。