項目考察點：

1、wx:for 循環的使用。 
2、this.setData 內獲取動態數組數據的方式。 
3、難點：在有旁白內容時，點擊旁白隱藏內容，點擊圖片不處理事件（通過自定義 data-tag 區分，用e.currentTarget.dataset 選取子節點）。 
4、e.currentTarget.dataset、e.target.dataset 用法，console.log(e) 調試技巧。 
5、難點(dian)：數組數據下標為動(dong)態數據時的(de)取值方法(fa)。

項目要求：

1、構建 WXML 模板。 
2、使用 wx:for 循環輸出四個圖片，每個圖片包含一個 view 組件。每個 view 中又包含一個 image 組件展示圖片和一個 text 組件展示漫畫旁白。 
3、循環結構通過 template 形成獨立模板文件。 
4、為 view 組件綁定事件（其它組件不做事件綁定），默認不展示旁白，當點擊圖片時可以查看旁白；而在有旁白內容時，點擊旁白隱藏內容，點擊圖片不處理事件。 
5、旁白內容在 WXML 里展(zhan)示，需(xu)要使(shi)用 WXS 處理，把所(suo)有半(ban)角(jiao)逗號 , 改為全角(jiao)逗號 ，，WXS 以獨立的文件存在。

wx:for 循環的使用

index.js：

1. Page({
2. data: {
3. images: [{
4. src: '/images/dov-1.png',
5. text: '',
6. aside: false,
7. unique: '0'
8. }, {
9. src: '/images/dov-2.png',
10. text: '過年浪一浪,爆竹好,棒棒',
11. aside: false,
12. unique: '1'
13. }, {
14. src: '/images/dov-3.png',
15. text: '突然一個想不開,原地爆炸好心塞',
16. aside: false,
17. unique: '2'
18. }, {
19. src: '/images/dov-4.png',
20. text: '嚇死白熊寶寶,變成熊貓大佬',
21. aside: false,
22. unique: '3'
23. }]
24. },
25. //......
26. })

index.wxml：

1. <import src="template.wxml"/> <view class="container"> <template is="imgItem" data="{{images}}" /> </view>

由于循環結構(gou)通過 template 形成獨(du)立(li)模板(ban)(ban)文(wen)件(jian)(jian)(jian)，因此 wxml 文(wen)件(jian)(jian)(jian)只需(xu)引入模板(ban)(ban)。{{images}} 為(wei) js 文(wen)件(jian)(jian)(jian)data中的(de) images。imgItem 對應模板(ban)(ban)文(wen)件(jian)(jian)(jian)中的(de) name 屬(shu)性。

模板(ban)template：

1. <block wx:for="{{images}}" wx:for-item="item" wx:for-index="index" wx:key="unique"></block>

wx:for-item 指定當(dang)前(qian)項變(bian)量(liang)(liang)名，wx:for-index 指定數(shu)(shu)組(zu)下(xia)標變(bian)量(liang)(liang)。如果(guo)不指定 wx:for-item 和 wx:for-index，數(shu)(shu)組(zu)當(dang)前(qian)項的(de)變(bian)量(liang)(liang)名默認為 item，默認數(shu)(shu)組(zu)的(de)當(dang)前(qian)項的(de)下(xia)標變(bian)量(liang)(liang)名默認為 index。（文檔戳這：小程序(xu)列表(biao)渲染）

因此項目中 images[index] 可(ke)以用 item 代(dai)替。

template.wmxl：

1. <wxs src="index.wxs" module="tools" />
2.  
3. <template name="imgItem">
4. <view wx:for="{{images}}" wx:key="unique" bind:tap="toggleText" data-value="{{item.aside}}" data-unique="{{item.unique}}">
5. <image src="{{item.src}}" data-tag="image" />
6. <text class="{{item.aside?'textShow':'textHide'}}" data-tag="text">{{tools.commaReplace(item.text)}}</text>
7. </view>
8. </template>

項目要(yao)求通過 wxs 處理半角變全角逗號(hao)問題(ti)，引入(ru) wxs 用法(fa)是(shi)(shi)，其中(zhong) tools 是(shi)(shi) wxs 的(de)名稱(cheng)，通過 module 定(ding)義。在{{tools.commaReplace(item.text)}}中(zhong)，.commaReplace 由 wxs 定(ding)義，() 中(zhong)傳入(ru) js 數據(ju)。

半角變全角逗號

wxs：

在小(xiao)程序中， 由于運行(xing)環境的差(cha)異，在 iOS 設備上小(xiao)程序內(nei)的 wxs 會比 javascript 代碼快 2 ~ 20 倍。

index.wxs：

1. function commaReplace(some_msg){
2. while (some_msg.indexOf(",") != -1) {//尋找每一個英文逗號，并替換
3. some_msg = some_msg.replace(",", "，");
4. }
5. return some_msg;
6. }
7. module.exports = {
8. commaReplace: commaReplace
9. };

使用(yong)(yong) while 循(xun)環遍歷字符(fu)串中每(mei)個字符(fu)的(de)是否與半角(jiao)逗號(hao) , 匹配，如匹配使用(yong)(yong) replace(",", "，") 方(fang)法替換，module.exports 輸出模(mo)板數(shu)據供 wxml 調用(yong)(yong)。

旁白的顯示與隱藏

index.js：

1. toggleText: function (e){
2. console.log(e);
3. var tag = e.target.dataset.tag;
4. var index = e.currentTarget.dataset.unique;
5. var value = (!e.currentTarget.dataset.value);
6. var aside = 'images[' + index + '].aside';//設置images數組動態變量aside
7. console.log(value);
8. if (tag === 'image'){
9. if (!this.data.images[index].aside){
10. value = true;
11. this.setData({
12. [aside]: value
13. })
14. }
15. } else if (tag === 'text'){
16. value = false; this.setData({
17. [aside]: value
18. })
19. }
20. }

在小(xiao)程序(xu)里，想要更新(xin)頁面的數據，必須使用 this.setData 對數據進行更新(xin)。

在知道數組下(xia)標(biao)或屬性字(zi)段(duan)名(ming)稱的情況下(xia)，可(ke)以這(zhe)樣寫：

1. this.setData({ 'images[0].aside': this.data.images[@].aside})

數(shu)(shu)組數(shu)(shu)據(ju)下標為動(dong)態數(shu)(shu)據(ju)時(shi)的取值方法：

  項目中(zhong)我采用的方式(shi)是給 aside 賦值(zhi)，然后在(zai) this.setData 中(zhong)輸出 [aside] 的方式(shi)。

1. var aside = 'images[' + index + '].aside';//設置images數組動態變量aside

還有另一種更高級(ji)的寫(xie)法(fa)，使(shi)用 JSON. stringify 把要設(she)置的數據進行序列化(hua)，或者使(shi)用字符(fu)串拼(pin)接的方法(fa)拼(pin)出 json ，然后再(zai)重新JSON.parse 傳給 setData：

1. let json ='{"images[' + index +'].aside":'+ this .data .images[index] .aside.toString() +'}';this.setData(JSON.parse(json));

console.log(e) 調試技巧：立正小歪牙

e.target 觸發事件的(de)組(zu)(zu)件的(de)一些屬(shu)性值集(ji)合，e.currentTarget 則是當前(qian)組(zu)(zu)件的(de)一些屬(shu)性值集(ji)合。

在不知(zhi)道什么情況(kuang)使用 e.currentTarget.dataset 還是 e.target.dataset 時，可以通過(guo)控制臺(tai)打印(yin) console.log(e) ，然后分別查(cha)看 .target 和 .currentTarget 來(lai)找到(dao)想要的屬性值。

觸發 toggleText 時的 console.log(e) 打(da)印信息.