漫畫小程式專案總結

1、wx:for 迴圈的使用。

2、this.setdata 內獲取動態陣列資料的方式。

3、難點：在有旁白內容時，點選旁白隱藏內容，點選不處理事件（通過自定義 data-tag 區分，用e.currenttarget.dataset 選取子節點）。

4、e.currenttarget.dataset、e.target.dataset 用法，console.log(e) 除錯技巧。

5、難點：陣列資料下標為動態資料時的取值方法。

1、構建 wxml 模板。

2、使用 wx:for 迴圈輸出四個，每個包含乙個 view 元件。每個 view 中又包含乙個 image 元件展示和乙個 text 元件展示漫畫旁白。

3、迴圈結構通過 template 形成獨立模板檔案。

4、為 view 元件繫結事件（其它元件不做事件繫結），預設不展示旁白，當點選時可以檢視旁白；而在有旁白內容時，點選旁白隱藏內容，點選不處理事件。

5、旁白內容在 wxml 裡展示，需要使用 wxs 處理，把所有半形逗號 , 改為全形逗號，，wxs 以獨立的檔案存在。

index.js：

由於迴圈結構通過 template 形成獨立模板檔案，因此 wxml 檔案只需引入模板。} 為 js 檔案data中的 images。imgitem 對應模板檔案中的 name 屬性。

模板template：

wx:for-item 指定當前項變數名，wx:for-index 指定陣列下標變數。如果不指定 wx:for-item 和 wx:for-index，陣列當前項的變數名預設為 item，預設陣列的當前項的下標變數名預設為 index。（文件戳這：小程式列表渲染）

因此專案中 images[index] 可以用 item 代替。

template.wmxl：

專案要求通過 wxs 處理半形變全形逗號問題，引入 wxs 用法是，其中 tools 是 wxs 的名稱，通過 module 定義。在}中，.commareplace 由 wxs 定義，() 中傳入 js 資料。

wxs：

在小程式中，由於執行環境的差異，在 ios 裝置上小程式內的 wxs 會比 j**ascript **快 2 ~ 20 倍。

index.wxs：

使用 while 迴圈遍歷字串中每個字元的是否與半形逗號 , 匹配，如匹配使用 replace(",", "，") 方法替換，module.exports 輸出模板資料供 wxml 呼叫。

index.js：

在小程式裡，想要更新頁面的資料，必須使用 this.setdata 對資料進行更新。

在知道陣列下標或屬性欄位名稱的情況下，可以這樣寫：

陣列資料下標為動態資料時的取值方法：

專案中我採用的方式是給 aside 賦值，然後在 this.setdata 中輸出 [aside] 的方式。

還有另一種更高階的寫法，使用 json. stringify 把要設定的資料進行序列化，或者使用字串拼接的方法拼出 json ，然後再重新json.parse 傳給 setdata：

e.target 觸發事件的元件的一些屬性值集合，e.currenttarget 則是當前元件的一些屬性值集合。

在不知道什麼情況使用 e.currenttarget.dataset 還是 e.target.dataset 時，可以通過控制台列印 console.log(e) ，然後分別檢視 .target 和 .currenttarget 來找到想要的屬性值。

觸發 toggletext 時的 console.log(e) 列印資訊.

讚賞