微信小程序：漫画小程序项目总结

项目考察点：

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 以独立的文件存在。

wx:for 循环的使用

index.js：

Page({
  data: {
      src '/images/dov-1.png',
      unique'0'

'/images/dov-2.png''1'

'/images/dov-3.png''突然一个想不开,原地爆炸好心塞''2'
'吓死白熊宝宝,变成熊猫大佬''3'
  //......
})

index.wxml：

 <import src="template.wxml"/><viewclass"container"><templateis"imgItem"data"{{images}}"</view>

由于循环结构通过 template 形成独立模板文件，因此 wxml 文件只需引入模板。{{images}} 为 js 文件data中的 images。imgItem 对应模板文件中的 name 属性。

模板template：

<blockwx:forwx:for-item"item"wx:for-index"index"wx:key"unique"></block>

wx:for-item 指定当前项变量名，wx:for-index 指定数组下标变量。如果不指定 wx:for-item 和 wx:for-index，数组当前项的变量名默认为 item，默认数组的当前项的下标变量名默认为 index。（文档戳这：小程序列表渲染）

因此项目中 images[index] 可以用 item 代替。

template.wmxl：

"unique"bind:tap"toggleText"data-value"{{item.aside}}"data-unique"{{item.unique}}">
<text"{{item.aside?'textShow':'textHide'}}""text"{{tools.commaReplace(item.text)}}</text>
</template>

项目要求通过 wxs 处理半角变全角逗号问题，引入 wxs 用法是，其中 tools 是 wxs 的名称，通过 module 定义。在{{tools.commaReplace(item.text)}}中，.commaReplace 由 wxs 定义，() 中传入 js 数据。

半角变全角逗号

wxs：

在小程序中， 由于运行环境的差异，在 iOS 设备上小程序内的 wxs 会比 javascript 代码快 2 ~ 20 倍。

index.wxs：

function commaReplace(some_msg){
    some_msg = some_msgreplace"，");
return;
moduleexports { 
};

使用 while 循环遍历字符串中每个字符的是否与半角逗号,匹配，如匹配使用 replace(",","，") 方法替换，module.exports 输出模板数据供 wxml 调用。

旁白的显示与隐藏