微信小程序上手篇（3）

  還只剩最后1個page需要研究了，成功的曙光就在眼前。

  在這個文件中，代碼其實不多，而且也比較容易。

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

  在1開始demo引入了1個工具，其實就是utils文件夾中的文件：

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

  我們可以看到微信是用require來引入的，其實在官方文檔中還有import和include引入，不過各司其職，需要讀者自己去看官方文檔研究。

  對了，在上1篇中沒有提到，在App({...})或Page({...})方法外定義的變量是1個全局變量，在這個文件中都可使用。

  照例，在這個page文件的data中定義了1個logs數(shù)組變量，這個變量是個老朋友，由于在app.js中也有1個這樣類似的變量：

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

  在onLoad中應證了我的想法，他用到了本地緩存中的logs：

   logs: (wx.getStorageSync('logs') || []).map(function (log) {
        return util.formatTime(new Date(log))
      })

  這個時候唯1不太明白的是map方法和util這個變量的方法。首先看map方法，這個必須結合頁面來看，它到達的效果是：

  首先我們肯定的是logs是1個數(shù)組，wx.getStorageSync('logs')獲得的正是1個數(shù)組，所以說map是1個數(shù)組方法。其次頁面上展現(xiàn)了1行1行的時間，所以說map會遍歷數(shù)組，從0開始（所有語言數(shù)組幾近都是從0開始），其次map的參數(shù)是1個方法，其中這個方法還帶了1個參數(shù)log，我大膽猜想這個log即是數(shù)組中的內容，因此，map會遍歷數(shù)組每項而且都會進行1次function(log){}方法（筆者曾試過百度map方法，查到的內容比較規(guī)范但是特別雜繁瑣，針對本demo而言我覺得更合適用拆分方法來解釋map的用法）。

  既然清楚了map的方法實現(xiàn)，我們再來看看util變量實現(xiàn)了甚么方法：

util.formatTime(new Date(log))

  我們直接跳轉到utils文件夾，點擊看源碼：

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


  return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}

function formatNumber(n) {
  n = n.toString()
  return n[1] ? n : '0' + n
}

module.exports = {
  formatTime: formatTime
}

  這是個簡單的js文件，而在這個文件中我們沒有看到App({...})或Page({...})類似的方法，只是單純的羅列了3個方法function formatTime()，function formatNumber()，module.exports，不言而喻的是前面兩個方法應當是1個公然方法，由于在logs.js中已調用過formatTime：

util.formatTime(new Date(log))

  我們可以嘗試調用formatNumber()，是不是能夠成功：

var n = util.formatNumber(1)

  成功了么？答案是不是定的，而且控制臺報了這樣的毛病：util.formatNumber is not a function;at "pages/logs/logs" page lifeCycleMethod onLoad function

  這是為何？答案就在這里：

module.exports = {
  formatTime: formatTime
}

  有幸的是筆者在這之前接觸過php的第3方框架thinkPhp，里面正好有類似的代碼。這個有甚么用呢？簡單來講就是讓你這里的方法公然給其他類使用，我們可以看到這里我們只公然了formatTime方法（第1個是我們取的方法名，第2個是util.js中需要公然的方法名），如果我們把formatNumber()方法也公然了，就不會出現(xiàn)上面的毛病了：

fn : formatNumber

  為了區(qū)分兩個參數(shù)的不同，筆者專門把自己自定義的方法名簡寫了，然后將

var n = util.formatNumber(1)

改寫為

var n = util.fn(1)

  為了更加直觀，筆者直接將結果顯示在了頁面上：

  紅框中的01正是方法的返回值，所以說如果想要寫工具類讓其他類使用，需要module.exports來定義你的公然方法。

 

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


  return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}

function formatNumber(n) {
  n = n.toString()
  return n[1] ? n : '0' + n
}

  現(xiàn)在簡單說說這幾行代碼的意思：傳入1個date參數(shù)，然后使用date的方法獲得年月日時分秒，返回這個時間點的格式化內容。格式化方法是這個：

[year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')

  將年月日放進數(shù)組，并用map遍歷，獲得格式化的日期，formatNumber就是格式化的方法。formatNumber中獲得到n為時間，將它字符串轉換，然后檢查這個字符串是單是雙，由n[1]就能夠判斷單雙，由于如果是單只有n[0]，如果是雙就是n[0][1]。所以判斷出單雙后，如果是單添加1個0到數(shù)字前方，如果是雙則直接返回。這樣做的結果最簡單的體現(xiàn)就是當為1，則會返回01；如果是10則返回10。

  以后有1個join('/')方法，這個最直觀的從界面上就能夠判斷出在數(shù)組每項后面加上/，并且在最后1個下標的值疏忽不實現(xiàn)，這樣我們就能夠取得我們常常看到的年月日格式2017/01/10。在后面的時分秒也是同理。

  基本上logs.js也看完了，接下來分析logs.json。在這里有1些內容，其實不是全空的：

{
    "navigationBarTitleText": "查看啟動日志"
}

  記得在app.json中也有個參數(shù)叫做navigationBarTitleText：

"navigationBarTitleText": "WeChat",

  我們在這里一樣寫了這個東西有甚么用呢？很簡單直接把我們的標題改變了唄：

  由此我們得到1個結論，子類的配置文件json修改相同參數(shù)，優(yōu)先顯示子類的json配置，然后再顯示父類的。固然，可以應證1下原理，我們在logs.json中把標題改成藍色，這樣的效果應當是首頁的WeChat色彩不變，而查看啟動日志變成了藍色：

"navigationBarTextStyle":"blue"

  bingo，原理正確。

  在logs.wxml中我們又看到了有趣的東西：

<!--logs.wxml-->
<view class="log-list">
  <block wx:for="{{logs}}" wx:for-item="log" wx:key="*this">
    <text class="log-item">{{index + 1}}. {{log}}</text>
  </block>
</view>

  <block>這個東西，block英文是塊，所以說這個就是1塊1塊的意思。我們記得{{}}中的是js中的變量，所以logs是1個數(shù)組。在這里為了顯示數(shù)組數(shù)據(jù)，微信譽的是wx:for這個語句。這倒是像我們寫for int i = 0;i < count;i++的循環(huán)語句。wx:for-item獲得到的應當是數(shù)組每個值，而"log"則被賦予了這個值的別名，我們用log就可以代表數(shù)組中的值。wx:key="*this"很晦澀難懂，在這里我們感覺是1個毫無相干的東西，因此完全不能亂猜，這里我們最好的解決方案：查找官方文檔。

  文檔內容：

wx:key

如果列表中項目的位置會動態(tài)改變或有新的項目添加到列表中，并且希望列表中的項目保持自己的特點和狀態(tài)（如 <input/> 中的輸入內容，<switch/> 的選中狀態(tài)），需要使用 wx:key 來指定列表中項目的唯1的標識符。

wx:key 的值以兩種情勢提供

1. 字符串，代表在 for 循環(huán)的 array 中 item 的某個 property，該 property 的值需要是列表中唯1的字符串或數(shù)字，且不能動態(tài)改變。
2. 保存關鍵字 *this 代表在 for 循環(huán)中的 item 本身，這類表示需要 item 本身是1個唯1的字符串或數(shù)字，如：

當數(shù)據(jù)改變觸發(fā)渲染層重新渲染的時候，會校訂帶有 key 的組件，框架會確保他們被重新排序，而不是重新創(chuàng)建，以確保使組件保持本身的狀態(tài)，并且提高列表渲染時的效力。

如不提供 wx:key，會報1個 warning， 如果明確知道該列表是靜態(tài)，或沒必要關注其順序，可以選擇疏忽。

  文檔中所述最簡單的解釋在這里就是*this指的是數(shù)組中的item本身，而且在靜態(tài)數(shù)組中有了這個值提高了渲染效力。這個參數(shù)暫時在這里不深入研究，筆者也只是略懂了點皮毛，技術有限請體諒。

  這里還有1個奇異的參數(shù)index，這個應當是默許生成給開發(fā)者調用下標用的，我們用就是了。

  在這里我們還是沒有清楚block的用法，最簡單的還是得結合圖看：

  我們通過block的方法，取得了1個列表，所以不用想，block就是1行1行的數(shù)據(jù)，它的用法就是將內容以塊來顯示，然后批量使用。在這里我們block中只有text，所以暫時看不出block的強大，我們再加1個view進去：

logs.wxml中

<!--logs.wxml-->
<view class="log-list">
  <block wx:for="{{logs}}" wx:for-item="log" wx:key="*this">
    <text class="log-item">{{index + 1}}. {{log}}</text>
    <view class="blockView">asd</view>
  </block>
</view>

logs.wxss中

.log-list {
  display: flex;
  flex-direction: column;
  padding: 40rpx;
  background: gray;
}
.log-item {
  margin: 10rpx;
  text-align: center;
}
.blockView {
  background: blue;
}

  再來看顯示結果：

  現(xiàn)在很明顯了，以block中的內容為1塊內容，我們創(chuàng)建出了1個列表。在以后的開發(fā)中，我相信大家會使用更多的block，實踐出真知，大家會越用越熟練的。

  最后的1個wxss文件我就不加論述了，樣式這個東西除練還是練，希望筆者與大家1起進步，早日練到應用自若。自此，全部demo全部研究透徹，作為微信小程序開發(fā)學習，我們要學以致用，從學習及第1反3，祝大家早日開發(fā)出自己的小程序！