微信小程序原生开发：常用事件与属性列表

常用事件与属性列表

处理点击事件

接下来我们希望做一件事情：

创建一个按钮

当用户点击按钮时

让 product 的 num + 1

创建按钮的方式非常简单：

<button type="primary">num + 1</button>

问题在于：我们如何给这个按钮添加点击事件呢？

有过开发经验的同学，可能会猜到：我们可以给 button 一个 click 事件来监听按钮的点击。

可是大家需要知道，现在我们是在【小程序】中，那么如果想要给 button 添加点击事件则不可以使用 click 而是 bind:tap / bindtap。

其中 bind: / bind 表示【绑定事件】，tap 为绑定的具体事件。小程序具体事件列表，可以点击 这里 查看。

  <button type="primary" bind:tap="onAddNum">num + 1</button>

接下来需要在 js 中定义对应的 事件

 /**
  * 定义事件处理的方法
  */
 onAddNum () {
  console.log('onAddNum')
 }

到目前：我们已经 监听了按钮的点击事件，并且写入了对应的处理函数 ，接下来就需要 **修改 num 的值 **

修改 data 的数据

想要修改 data 中的数据，那么我们需要借助一个函数 setData。

setData 接收一个 对象作为参数，这个对象就是最新的 data 数据。

其中 key 为要修改的数据， value 为最新的值

访问 data 的数据

因为我们想要让 num + 1 ，所以我们还需要拿到 num 的当前值，想要访问 num 的值，可以通过 this.data.product.num 的形式访问

所以最终的修改 num 的代码为：

 /**
  * 定义事件处理的方法
  */
 onAddNum () {
  this.setData({
    'product.num': this.data.product.num + 1
  })

此时，当我们点击 button ，可以发现：【当 num 发生改变时，总价格也发生了对应的变化】

1. 如何为按钮添加点击事件？
   1. bindtap || bind:tap
2. 如何修改 data 中数据的值？
   1. 通过 this.setData({}) 定义新的值
   2. 通过 this.data 访问具体的值