微信小程序开发学习笔记（2）

本次的微信小程序开发学习笔记中的代码主要来自官方开发文档，如有疑虑可前往 微信开发文档 进行查看

列表渲染

wx:for

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
默认数组的当前项的下标变量名默认为index，数组当前项的变量名默认为 item

<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>
Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})

使用 wx:for-item 可以指定数组当前元素的变量名；
使用 wx:for-index 可以指定数组当前下标的变量名；

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>

wx:key

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

wx:key 的值以两种形式提供

• 字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
• 保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字。

条件渲染

wx:if

在框架中，使用 wx:if="" 来判断是否需要渲染该代码块

<view wx:if="{{condition}}"> True </view>

事件绑定

事件类别

• bindtap：绑定点击事件；
• bindinput：绑定输入事件；
• bindchange：绑定改变事件；

注意事项

<input bindinput="handleInput" />
<view>{{num}}</view>

// pages/cart/cart.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
      num:0
  },
  handleInput(e){
      //获取页面初始化属性
      this.setData({
        num: e.detail.value
        }  )
  }
})

注意：

• 通过this.setData()来进行赋值
• 绑定的事件传递的参数必须为自定义属性