小程序模板网

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

发布时间:2018-08-01 09:59 所属栏目:小程序开发教程

项目考察点:

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:

 

				
  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>

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

模板template:

 

				
  1. <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:

 

				
  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>

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

 

半角变全角逗号

wxs:

在小程序中, 由于运行环境的差异,在 iOS 设备上小程序内的 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. };

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

 

旁白的显示与隐藏

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. }

在小程序里,想要更新页面的数据,必须使用 this.setData 对数据进行更新。

在知道数组下标或属性字段名称的情况下,可以这样写:

 

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

数组数据下标为动态数据时的取值方法:

项目中我采用的方式是给 aside 赋值,然后在 this.setData 中输出 [aside] 的方式。

 

				
  1. var aside = 'images[' + index + '].aside';//设置images数组动态变量aside

还有另一种更高级的写法,使用 JSON. stringify 把要设置的数据进行序列化,或者使用字符串拼接的方法拼出 json ,然后再重新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 触发事件的组件的一些属性值集合,e.currentTarget 则是当前组件的一些属性值集合。

在不知道什么情况使用 e.currentTarget.dataset 还是 e.target.dataset 时,可以通过控制台打印 console.log(e) ,然后分别查看 .target 和 .currentTarget 来找到想要的属性值。

触发 toggleText 时的 console.log(e) 打印信息.



易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/24679.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询