258资源分享网

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：

Page({

data: {

images: [{

src: '/images/dov-1.png',

text: '',

aside: false,

unique: '0'

}, {

src: '/images/dov-2.png',

text: '过年浪一浪,爆竹好,棒棒',

aside: false,

unique: '1'

}, {

src: '/images/dov-3.png',

text: '突然一个想不开,原地爆炸好心塞',

aside: false,

unique: '2'

}, {

src: '/images/dov-4.png',

text: '吓死白熊宝宝,变成熊猫大佬',

aside: false,

unique: '3'

}]

},

//......

})

index.wxml：

<import src=http://www.yiyongtong.com/archives/"template.wxml"/> <view class="container"> <template is="imgItem" data="{{images}}" /> </view>

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

模板template：

<block wx:for="{{images}}" wx: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：

<wxs src=http://www.yiyongtong.com/archives/"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=http://www.yiyongtong.com/archives/"{{item.src}}" data-tag="image" />

<text class="{{item.aside?'textShow':'textHide'}}" data-tag="text">{{tools.commaReplace(item.text)}}</text>

</view>

</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){

while (some_msg.indexOf(",") != -1) {//寻找每一个英文逗号，并替换

some_msg = some_msg.replace(",", "，");

}

return some_msg;

}

module.exports = {

commaReplace: commaReplace

};

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

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';//设置images数组动态变量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

})

}