一，建立模組化工具類
我們可以將一些公共的程式碼抽離成為一個單獨的js檔案，作為一個模組。模組只有通過module.exports才能對外暴露介面。
微信官方給出的demo中列印儲存log日誌用的utils.js用的就是模組化
// common.js
function sayHello(name) {
 console.log('Hello ' + name + '!')
}
module.exports = {
 sayHello: sayHello
}

在需要使用這些模組的檔案中，使用require(path)將公共程式碼引入。
var common = require('common.js')
Page({
 helloMINA: function() {
common.sayHello('MINA')
 }
})


二，微信小程式 資料繫結
資料繫結：WXML中的動態資料均來自對應Page的data。
1，簡單繫結,
資料繫結使用"Mustache"語法（雙大括號）將變數包起來，可以作用於：
內容：用來展示簡單內容
<view> {{ message }} </view>
Page({
 data: {
message: 'Hello MINA!'
 }
})


元件屬性(需要在雙引號之內)
<view id="item-{{id}}"> </view>
Page({
 data: {
id: 0
 }
})

控制屬性(需要在雙引號之內)
<view wx:if="{{condition}}"> </view>
Page({
 data: {
condition: true
 }
})

關鍵字(需要在雙引號之內)
true：boolean 型別的 true，代表真值。
false： boolean 型別的 false，代表假值。
//checkbox選中或者未選中
<checkbox checked="{{false}}"> </checkbox>
特別注意：不要直接寫 checked="false"，其計算結果是一個字串，轉成 boolean 型別後代表真值。


2，複雜繫結：運算
可以在{{}}內進行簡單的運算，支援的有如下幾種方式：
三元運算
<view hidden="{{flag ? true : false}}"> Hidden </view>

算數運算
<view> {{a + b}} + {{c}} + d </view>
Page({
 data: {
a: 1,
b: 2,
c: 3
 }
})
view中顯示的內容為3 + 3 + d

邏輯判斷
<view wx:if="{{length > 5}}"> </view>

字串運算
<view>{{"hello" + name}}</view>
Page({
 data:{
name:"MINA"
 }
})

資料路徑運算
<view>{{object.key}} {{array[0]}}</view>
Page({
 data: {
object: {
 key: 'Hello '
},
array: ['MINA']
 }
})



3，複雜資料繫結：組合
也可以在Mustache內直接進行組合，構成新的物件或者陣列

組合陣列
<view wx:for-items="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>
Page({
 data: {
zero: 0
 }
})
最終組合成陣列[0, 1, 2, 3, 4]

組合物件
<template is="objectCombine" data="{{for: a, bar: b}}"></template>
Page({
 data: {
a: 1,
b: 2
 }
})
最終組合成的物件是{for: 1, bar: 2}

也可以用擴充套件運算子...來將一個物件展開
<template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}"></template>
Page({
 data: {
obj1: {
 a: 1,
 b: 2
},
obj2: {
 c: 3,
 d: 4
}
 }
})
最終組合成的物件是{a: 1, b: 2, c: 3, d: 4, e: 5}

如果物件的key和value相同，也可以間接地表達
<template is="objectCombine" data="{{foo, bar}}"></template>
Page({
 data: {
foo: 'my-foo',
bar: 'my-bar'
 }
})
最終組合成的物件是{foo: 'my-foo', bar:'my-bar'}
注意：上述方式可以隨意組合，但是如有存在變數名相同的情況，後邊的會覆蓋前面，如
<template is="objectCombine" data="{{...obj1, ...obj2, a, c: 6}}"></template>
Page({
 data: {
obj1: {
 a: 1,
 b: 2
},
obj2: {
 b: 3,
 c: 4
},
a: 5
 }
})
最終組合成的物件是{a: 5, b: 3, c: 6}


三，條件渲染
<!--wxml-->
<view wx:if="{{length > 5}}"> 大於5 </view>
<view wx:elif="{{length > 2}}"> 大於2小於5 </view>
<view wx:else> 小於2 </view>
// page.js
Page({
 data: {
length: '11'
 }
})

wx:if
在MINA中，我們用wx:if="{{condition}}"來判斷是否需要渲染該程式碼塊：
<view wx:if="{{condition}}"> True </view>

也可以用wx:elif和wx:else來新增一個else塊：
<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

block wx:if
因為wx:if 是一個控制屬性，需要將它新增到一個標籤上。
但是如果我們想一次性判斷多個元件標籤，我們可以使用一個<block/>標籤將多個元件包裝起來，並在上邊使用wx:if控制屬性。
<block wx:if="{{true}}">
 <view> view1 </view>
 <view> view2 </view>
</block>
注意： <block/>並不是一個元件，它僅僅是一個包裝元素，不會在頁面中做任何渲染，只接受控制屬性。

wx:if vs hidden
因為wx:if之中的模板也可能包含資料繫結，所有當wx:if的條件值切換時，MINA有一個區域性渲染的過程，
因為它會確保條件塊在切換時銷燬或重新渲染。
同時wx:if也是惰性的，如果在初始渲染條件為false，MINA什麼也不做，在條件第一次變成真的時候才開始區域性渲染。
相比之下，hidden就簡單的多，元件始終會被渲染，只是簡單的控制顯示與隱藏。
一般來說，wx:if有更高的切換消耗而hidden有更高的初始渲染消耗。因此，如果需要頻繁切換的情景下，
用hidden更好，如果在執行時條件不大可能改變則wx:if較好。



四，列表渲染
1，簡單實現列表
<!--wxml-->
<view wx:for-items="{{array}}"> {{item}} </view>
// page.js
Page({
 data: {
array: [1, 2, 3, 4, 5]
 }
})
2，在元件上使用wx:for控制屬性繫結一個數組，即可使用陣列中各項的資料重複渲染該元件。
wx:for也可以巢狀，下邊是一個九九乘法表
<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
 <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
<view wx:if="{{i <= j}}">
 {{i}} * {{j}} = {{i * j}}
</view>
 </view>
</view>


3，block wx:for
類似block wx:if，也可以將wx:for用在<block/>標籤上，以渲染一個包含多節點的結構塊。例如：
<block wx:for="{{[1, 2, 3]}}">
 <view> {{index}}: </view>
 <view> {{item}} </view>
</block>

4，wx:key
如果列表中專案的位置會動態改變或者有新的專案新增到列表中，
並且希望列表中的專案保持自己的特徵和狀態（如 <input/> 中的輸入內容，<switch/> 的選中狀態），
需要使用 wx:key 來指定列表中專案的唯一的識別符號。
wx:key 的值以兩種形式提供（來保證唯一）
1，字串，代表在 for 迴圈的 array 中 item 的某個 property，該 property 的值需要是列表中唯一的字串或數字，
且不能動態改變。
2，保留關鍵字 *this 代表在 for 迴圈中的 item 本身，這種表示需要 item 本身是一個唯一的字串或者數字，
如：當資料改變觸發渲染層重新渲染的時候，會校正帶有 key 的元件，框架會確保他們被重新排序，而不是重新建立，
以確保使元件保持自身的狀態，並且提高列表渲染時的效率。

如不提供 wx:key，會報一個 warning， 如果明確知道該列表是靜態，或者不必關注其順序，可以選擇忽略。

示例程式碼（動態新增元素，隨機打亂順序，儲存元素屬性）
<!--index.wxml-->
<switch wx:for="{{objectArray}}" wx:key="unique" > {{item.id}} </switch>
<button bindtap="switch"> 打亂順序 </button>
<button bindtap="addToFront">新增新元素</button>


<switch wx:for="{{numberArray}}" wx:key="*this" > {{item}} </switch>
<button bindtap="addNumberToFront"> 新增新元素</button>


//index.js
Page({
 data: {
objectArray: [
 {id: 3, unique: 'unique_3'},
 {id: 2, unique: 'unique_2'},
 {id: 1, unique: 'unique_1'},
 {id: 0, unique: 'unique_0'},
],
numberArray: [1, 2, 3]
 },
 // 隨機交換兩個元素
 switch: function(e) {
const length = this.data.objectArray.length
for (let i = 0; i < length; ++i) {
 const x = Math.floor(Math.random() * length)
 const y = Math.floor(Math.random() * length)
 const temp = this.data.objectArray[x]
 this.data.objectArray[x] = this.data.objectArray[y]
 this.data.objectArray[y] = temp
}
this.setData({
 objectArray: this.data.objectArray
})
 },
 // 新增新元素
 addToFront: function(e) {
const length = this.data.objectArray.length
//把新生成的元素新增到陣列中
this.data.objectArray = [{id: length, unique: 'unique_' + length}].concat(this.data.objectArray)
this.setData({
 objectArray: this.data.objectArray
})
 },


 addNumberToFront: function(e){
this.data.numberArray = [ this.data.numberArray.length + 1 ].concat(this.data.numberArray)
this.setData({
 numberArray: this.data.numberArray
})
 }

})

持續更新中。。。。。

也可以關注我的個人微訊號，每天定期推送小程式最新開發技術，優秀原始碼，各種乾貨

關注上面微號回覆1可以加千人小程式學習微信群，群裡和大家交流學習，一起進步

有問題加我微信：2501902696