微信小程序-事件和数据

事件

绑定事件

绑定事件的方式有两种

• bind:事件名
• bind事件名

在vue中，单击事件是click，而小程序是tap

事件处理函数要写到.js文件中，需要用小程序提供的Page方法来注册页面，可以在Page方法中创建事件处理函数

---

冒泡事件

使用bind绑定的事件，会触发事件冒泡

如果不想让事件冒泡，就使用catch来绑定事件

---

事件传参

在触发事件时，将一些数据作为参数传递给事件处理函数的过程，就是事件传参

data-*=””，使用这个属性来传递自定义数据

mark:*=””，使用这个属性来传递自定义参数

通过事件对象获取mark传递参数时，会冒泡传递，即会获取到触发节点事件和父节点身上的所有mark

---

事件对象

event对象中，会有很多属性

• currentTarget：事件绑定者
• Target：事件触发者

当事件冒泡时，两者就有了差别

事件对象中绑定的数据key使用中划线-分割，在事件对象中采用小驼峰写法转换

事件对象中绑定的数据key使用小驼峰写法，在事件对象中采用全小写写法转换

---

数据

小程序页面中使用的数据需要在Page()方法的data对象中进行声明定义

在wxml中使用mustache语法（双大括号{{}}）将变量包起来，从而将数据绑定

不同于vue，如果需要动态绑定组件中的属性，同样也使用双大括号{{}}

---

修改数据

小程序中不使用赋值的方式修改数据，而是使用setData()函数来修改数据

修改对象中的数据

如果给对象新增属性，可以将key写成数据路径的方式

// index.js
Page({
  data:{
    userInfo:{
      name:"xiaobai",
      age:"18"
    }
  },
  updateUserInfo(){
    this.setData({
      "userInfo.name" : "小白",
      "userInfo.age": 24
    })
  }
})

这样将数据展开写在setData中的行为不是狠优雅，我们可以使用ES6的展开运算符准备一个新的userInfo对象，然后通过setData完成对象的拷贝

// index.js
Page({
  data:{
    userInfo:{
      name:"xiaobai",
      age:"18"
    }
  },
  updateUserInfo(){
    const userInfo = {
      ...this.data.userInfo,
      name:"小白",
      age:"24"
    }
    this.setData({
      // "userInfo" : userInfo简写成以下
      userInfo
    })
  }
})

我们还可以通过Object.assign方法将多个对象合并到同一个对象，其中后覆盖前

// index.js
Page({
  data:{
    userInfo:{
      name:"xiaobai",
      age:"18"
    }
  },
  updateUserInfo(){
    const userInfo = Object.assign(this.data.userInfo,{name:"小白"},{age:24})
        this.setData({
      // "userInfo" : userInfo简写成以下
      userInfo
    })
  }
})

数组相同，其本质是先组织数据，然后用setData更新页面

---

双向绑定

在input、checkbox等组件中，使用model:来修饰value属性，搭配{{}}，就能完成简易的双向绑定

---