微信小程序开发教程(基础篇)8-数据绑定下

gaara 发布于2019-08-20 13:33 / 2509人阅读

摘要：教程接上篇，当需要展示一组数据时，可以使用其中是当前数据索引的默认变量名，是当前数据项的默认变量名。保留关键字代表在循环中的本身，这种表示需要本身是一个唯一的字符串或者数字，上面引用自微信官方教程。

教程接上篇，当需要展示一组数据时，可以使用wx:for

//.wxml

  {{index}}: {{item.message}}


//.js
age({
  data: {
    array: [{
      message: "foo",
    }, {
      message: "bar"
    }]
  }
})

其中index是当前数据索引的默认变量名，item是当前数据项的默认变量名。
也可以使用 wx:for-item 和 wx:for-index 来指定别名


  {{idx}}: {{itemName.message}}

也可以嵌套使用，如下面是一个九九乘法表


  
    
      {{i}} * {{j}} = {{i * j}}

类似block wx:if，也可以将wx:for用在标签上，以渲染一个包含多节点的结构块


   {{index}}: 
   {{item}}

wx:key

要理解为什么需要wx:key，先来看一个例子:

//.wxml
 {{item.name}} 


//.js
Page({
  data: {
    objectArray: [
      {id: 1, name: "我没有被选中"},
      {id: 2, name: "我没有被选中"},
    ],
  },
 
  addToFront: function(e) {
    const length = this.data.objectArray.length
    this.data.objectArray = [{id: length, name: "我没有被选中"}].concat(this.data.objectArray)
    this.setData({
      objectArray: this.data.objectArray
    })
  },
})

上面的代码创建了两个checkbox组件和一个按钮，当点击按钮会在最上方新增一个checkbox组件。
编译代码，会显示如下界面:

点击按钮，界面如下：

ok，到这里一切正常，为了更好的说明问题，加入checkbox选中事件的处理，当checkbox被选中时，将文字修改为"我被选中了"，相关代码如下：

//wxml

   {{item.name}} 
  




//js
Page({
  data: {
    objectArray: [
      {id: 1, name: "我没有被选中"},
      {id: 2, name: "我没有被选中"},
    ],
  },
 
  addToFront: function(e) {
    const length = this.data.objectArray.length
    this.data.objectArray = [{id: length + 1, name: "我没有被选中"}].concat(this.data.objectArray)
    this.setData({
      objectArray: this.data.objectArray
    })
  },
  checkboxChange: function(e){
    console.log("checkboxChange")
    const length = this.data.objectArray.length
    let checkBoxArray = this.data.objectArray
    for (let i = 0; i < length; i++) {
       let ischecked = false
       for (let j = 0; j < e.detail.value.length; j++){
          if (checkBoxArray[i].id == e.detail.value[j]){
              checkBoxArray[i].name = "我被选中了"
              ischecked = true
          }
       }
       if (!ischecked){
         checkBoxArray[i].name = "我没有被选中"
       }
    }
    this.setData({
      objectArray: this.data.objectArray
    })
  }
})

当选中第一个checkbox时，界面如下

这时如果点击添加组件按钮会怎样呢，期望的效果应该如下

然而实际效果确是下图这样的

可以看到渲染引擎并没有将选中的效果和数据绑定起来，导致出现了预期之外的结果。如果想要达到预期效果，就要使用wx:key


   {{item.name}}

将.wxml文件修改为上述代码所示，就可以实现预期效果，重点就在 wx:key = "id" 这一句

如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如
中的输入内容，的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。

wx:key 的值以两种形式提供
1 字符串，代表在 for 循环的 array 中 item 的某个 property，该 property的值需要是列表中唯一的字符串或数字，且不能动态改变。
2 保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要item 本身是一个唯一的字符串或者数字，

上面引用自微信官方教程。除了用于保持视图组件的状态外，使用wx:key还有助于提高渲染效率

当数据改变触发渲染层重新渲染的时候，会校正带有 key的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

GPU云服务器云服务器购物微信小程序开发视频教程微信小程序开发微信小程序开发语言微信小程序开发免费

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81104.html

微信小程序开发教程(基础篇)7-数据绑定上

摘要：在之前的教程中写到，微信小程序框架将程序分为逻辑层文件和视图层文件。关于数据绑定的更多讲述，敬请期待微信小程序开发教程基础篇数据绑定下在之前的教程中写到，微信小程序框架将程序分为逻辑层(.js文件)和视图层(.wxml文件)。这是一种常见的UI和逻辑分离的程序设计方式，开发出来的程序更加灵活，易扩展。这种程序设计方式通常要解决两个问题: UI层响应逻辑层逻辑和数据的变化UI层将用户...

I_Am 2019-08-21 15:01 评论0 收藏0
微信小程序开发教程(基础篇)6-logs页面解析

摘要：到此为止，默认生成程序的解析部分就结束了。这个解析过程是为了对微信小程序有个总体上的理解，所以很多地方并没有深入。在后面的教程中，我会继续讲解微信小程序开发的各个方面。上一篇教程中对index页面进行了解析，这一篇来解析下logs页面老规矩先上图 showImg(https://segmentfault.com/img/remote/1460000007613022?w=378&h...

shiguibiao 2019-08-20 12:34 评论0 收藏0
微信小程序开发教程(基础篇)5-index 页面解析

摘要：上一篇教程谈了些和微信小程序开发本身无关的技术问题，现在回到主题。这边教程主要对默认生成的页面进行讲解。而的显示则是由属性直接指定。在该例子中，当用户点击用户头像和昵称的视图区域时，程序便会显示页面。上一篇教程谈了些和微信小程序开发本身无关的技术问题，现在回到主题。这边教程主要对默认生成的index 页面进行讲解。在之前的教程中有写道，每一个页面都包含.js(处理逻辑)，.wxml...

GT 2019-08-20 12:29 评论0 收藏0
微信小程序开发小总结

摘要：框架这部分是小程序开发的核心，小程序采用视图和逻辑层代码相分离的结构，如果你用过这部分也不难理解，但是也有一些区别。工具这部分没有什么好说的，微信开发开始还是用微信自己的开发工具比较方便。小程序开发文档使用说明小程序的文档分为简易教程、框架、组件、API 、工具https://developers.weixin.qq.... 简易教程---介绍小程序开发的一些基本情况开发方式...

niuxiaowei111 2019-08-23 10:28 评论0 收藏0
微信小程序开发教程(基础篇)3-app.js 解析

摘要：微信小程序框架提供了一系列来帮助我们进行本地数据存储，上面的代码中使用到了和两个更多相关可以参考这里方法很容易理解，会执行获取用户信息的功能。上一篇教程中写道，开发工具会生成一个默认的程序框架，其中程序的主流程代码包含在app.js中。默认实现中，该部分功能比较简单，不过对于学研究小程序开发还是比较有价值的。由于代码行数不多，下面一次性贴出来后进行讲解 //app.js App({...

lemon 2019-08-20 12:23 评论0 收藏0