項(xiàng)目考察點(diǎn)：
1、wx:for 循環(huán)的使用。
2、this.setData 內(nèi)獲取動(dòng)態(tài)數(shù)組數(shù)據(jù)的方式。
3、難點(diǎn)：在有旁白內(nèi)容時(shí)，點(diǎn)擊旁白隱藏內(nèi)容，點(diǎn)擊圖片不處理事件（通過(guò)自定義 data-tag 區(qū)分，用e.currentTarget.dataset 選取子節(jié)點(diǎn)）。
4、e.currentTarget.dataset、e.target.dataset 用法，console.log(e) 調(diào)試技巧。
5、難點(diǎn)：數(shù)組數(shù)據(jù)下標(biāo)為動(dòng)態(tài)數(shù)據(jù)時(shí)的取值方法。
項(xiàng)目要求：
1、構(gòu)建 WXML 模板。
2、使用 wx:for 循環(huán)輸出四個(gè)圖片，每個(gè)圖片包含一個(gè) view 組件。每個(gè) view 中又包含一個(gè) image 組件展示圖片和一個(gè) text 組件展示漫畫旁白。
3、循環(huán)結(jié)構(gòu)通過(guò) template 形成獨(dú)立模板文件。
4、為 view 組件綁定事件（其它組件不做事件綁定），默認(rèn)不展示旁白，當(dāng)點(diǎn)擊圖片時(shí)可以查看旁白；而在有旁白內(nèi)容時(shí)，點(diǎn)擊旁白隱藏內(nèi)容，點(diǎn)擊圖片不處理事件。
5、旁白內(nèi)容在 WXML 里展示，需要使用 WXS 處理，把所有半角逗號(hào) , 改為全角逗號(hào) ，，WXS 以獨(dú)立的文件存在。
wx:for 循環(huán)的使用
index.js：
Page({
data: {
images: [{
src: '/images/dov-1.png',
text: '',
aside: false,
unique: '0'
}, {
src: '/images/dov-2.png',
text: '過(guò)年浪一浪,爆竹好,棒棒',
aside: false,
unique: '1'
}, {
src: '/images/dov-3.png',
text: '突然一個(gè)想不開,原地爆炸好心塞',
aside: false,
unique: '2'
}, {
src: '/images/dov-4.png',
text: '嚇?biāo)腊仔軐殞?變成熊貓大佬',
aside: false,
unique: '3'
}]
},
//......
})
index.wxml：
<import src="template.wxml"/> <view class="container"> <template is="imgItem" data="{{images}}" /> </view>
由于循環(huán)結(jié)構(gòu)通過(guò) template 形成獨(dú)立模板文件，因此 wxml 文件只需引入模板。{{images}} 為 js 文件data中的 images。imgItem 對(duì)應(yīng)模板文件中的 name 屬性。
模板template：
<block wx:for="{{images}}" wx:for-item="item" wx:for-index="index" wx:key="unique"></block>
wx:for-item 指定當(dāng)前項(xiàng)變量名，wx:for-index 指定數(shù)組下標(biāo)變量。如果不指定 wx:for-item 和 wx:for-index，數(shù)組當(dāng)前項(xiàng)的變量名默認(rèn)為 item，默認(rèn)數(shù)組的當(dāng)前項(xiàng)的下標(biāo)變量名默認(rèn)為 index。（文檔戳這：小程序列表渲染）
因此項(xiàng)目中 images[index] 可以用 item 代替。
template.wmxl：
<wxs src="index.wxs" module="tools" />
<template name="imgItem">
<view wx:for="{{images}}" wx:key="unique" bind:tap="toggleText" data-value="{{item.aside}}" data-unique="{{item.unique}}">
<image src="{{item.src}}" data-tag="image" />
<text class="{{item.aside?'textShow':'textHide'}}" data-tag="text">{{tools.commaReplace(item.text)}}</text>
</view>
</template>
項(xiàng)目要求通過(guò) wxs 處理半角變?nèi)嵌禾?hào)問(wèn)題，引入 wxs 用法是<wxs src="index.wxs" module="tools" />，其中 tools 是 wxs 的名稱，通過(guò) module 定義。在{{tools.commaReplace(item.text)}}中，.commaReplace 由 wxs 定義，() 中傳入 js 數(shù)據(jù)。
半角變?nèi)嵌禾?hào)
wxs：
在小程序中， 由于運(yùn)行環(huán)境的差異，在 iOS 設(shè)備上小程序內(nèi)的 wxs 會(huì)比 javascript 代碼快 2 ~ 20 倍。
index.wxs：
function commaReplace(some_msg){
while (some_msg.indexOf(",") != -1) {//尋找每一個(gè)英文逗號(hào)，并替換
some_msg = some_msg.replace(",", "，");
}
return some_msg;
}
module.exports = {
commaReplace: commaReplace
};
使用 while 循環(huán)遍歷字符串中每個(gè)字符的是否與半角逗號(hào) , 匹配，如匹配使用 replace(",", "，") 方法替換，module.exports 輸出模板數(shù)據(jù)供 wxml 調(diào)用。
旁白的顯示與隱藏
index.js：
toggleText: function (e){
console.log(e);
var tag = e.target.dataset.tag;
var index = e.currentTarget.dataset.unique;
var value = (!e.currentTarget.dataset.value);
var aside = 'images[' + index + '].aside';//設(shè)置images數(shù)組動(dòng)態(tài)變量aside
console.log(value);
if (tag === 'image'){
if (!this.data.images[index].aside){
value = true;
this.setData({
[aside]: value
})
}
} else if (tag === 'text'){
value = false; this.setData({
[aside]: value
})
}
}
在小程序里，想要更新頁(yè)面的數(shù)據(jù)，必須使用 this.setData 對(duì)數(shù)據(jù)進(jìn)行更新。
在知道數(shù)組下標(biāo)或?qū)傩宰侄蚊Q的情況下，可以這樣寫：
this.setData({ 'images[0].aside': this.data.images[@].aside})
數(shù)組數(shù)據(jù)下標(biāo)為動(dòng)態(tài)數(shù)據(jù)時(shí)的取值方法：
項(xiàng)目中我采用的方式是給 aside 賦值，然后在 this.setData 中輸出 [aside] 的方式。
var aside = 'images[' + index + '].aside';//設(shè)置images數(shù)組動(dòng)態(tài)變量aside
還有另一種更高級(jí)的寫法，使用 JSON. stringify 把要設(shè)置的數(shù)據(jù)進(jìn)行序列化，或者使用字符串拼接的方法拼出 json ，然后再重新JSON.parse 傳給 setData：
let json ='{"images[' + index +'].aside":'+ this .data .images[index] .aside.toString() +'}';this.setData(JSON.parse(json));
console.log(e) 調(diào)試技巧：
e.target 觸發(fā)事件的組件的一些屬性值集合，e.currentTarget 則是當(dāng)前組件的一些屬性值集合。
在不知道什么情況使用 e.currentTarget.dataset 還是 e.target.dataset 時(shí)，可以通過(guò)控制臺(tái)打印 console.log(e) ，然后分別查看 .target 和 .currentTarget 來(lái)找到想要的屬性值。
