微信小程序开发（031~042）

事件系统

031.事件绑定和事件对象

小程序中绑定事件与在网页开发中绑定事件几乎一致，只不过在小程序不能通过on的方式绑定事件，也没有click等事件，小程序中绑定事件使用bind方法，click事件也需要使用tap事件来进行代替，绑定事件的方式有两种：

1. bind:事件名，bind后面需要跟上冒号，冒号后面跟上事件名，例如：<view bind:tap=“fnName">
2. bind事件名，bind后面直接跟上事件名，例如：<view bindtap=“fnName">

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

032.事件分类以及阻止事件冒泡

事件分为冒泡事件和非冒泡事件：

• 冒泡事件：当一个组件的事件被触发后，该事件会向父节点传递。
• 非冒泡事件：当一个组件的事件被触发后，该事件不会向父节点传递。

使用bind绑定的事件，会触发事件冒泡，如果想阻止事件冒泡，可以使用catch来绑定事件。

033.事件传参-data-*自定义数据

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

在微信小程序中，我们经常会在组件上添加一些自定义数据，然后在事件处理函数中获取这些自定义数据，从而完成业务逻辑的开发。

在组件上通过 data-的方式定义需要传递的数据，其中是自定义的属性，例如：<view data-id=“100" bindtap=“handler”/>然后通过事件对象进行获取自定义数据。

034.事件传参-mark-自定义数据

小程序进行事件传参的时候，除了使用data-*属性传递参数外，还可以使用mark标记传递参数。

mark是一种自定义属性，可以在组件上添加，用于来识别具体触发事件的target节点。同时mark还可以用于承载一些自定义数据。

在组件上使用mark：自定义属性的方式将数据传递给事件处理函数，例如：<view mark.id=“100" bindtap="handler”/>然后通过事件对象进行获取自定义数据。

wxml语法

035.声明和绑定数据

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

在将数据声明好以后，在WXML使用Mustache语法(双大括号{{}})将变量包起来，从而将数据绑定。

在{{}}内部可以做一些简单的运算，支持如下几种方式：

1. 算数运算
2. 三元运算
3. 逻辑判断
4. 其他…

注意事项：

• 在{{}}语法中，只能写表达式，不能写语句，也不能调用js相关的方法。
• 绑定属性值，如果需要动态绑定一个变量，属性值也需要使用双大括号进行包裹。

036.setData()修改数据

小程序中修改数据不推荐通过赋值的方式进行修改，通过赋值的方式修改数据无法改变页面的数据。

而是要通过调用setData()方法进行修改，setData()方法接收对象作为参数，key是需要修改的数据，value是最新的值。

setData()方法有两个作用：

1. 更新数据
2. 驱动视图更新

获取数据：console.log(this.data.num)

037.setData()修改对象类型数据

1. 新增 单个/多个属性
2. 修改 单个/多个属性
3. 删除 单个/多个属性

038.setData()修改数组类型数据

1. 新增数组元素
2. 修改数组元素
3. 删除数组元素

039.简易双向数据绑定

在WXML中，普通属性的绑定是单向的，例如：<input value="{{value}}”/>

如果希望用户输入数据的同时改变data中的数据，可以借助简易双向绑定机制。在对应属性之前添加model：前缀即可：例如

注意事项：简易双向绑定的属性值如下限制：

1. 只能是一个单一字段的绑定，例如：错误用法:inputmodel:value=“值为{{value}}”/
2. 尚不能写data路径，也就是不支持数组和对象，例如：错误用法：inputmodel:value=“{{a.b}}”/

040.列表渲染-基本使用

列表渲染就是指通过循环遍历一个数组或对象，将其中的每个元素渲染到页面上在组件上。

使用wx：for属性绑定一个数组或对象，既可使用每一项数据重复渲染当前组件。

每一项的变量名默认为item，下标变量名默认为index。

在使用wx:for进行遍历的时候，建议加上wx：key属性，wx：key的值!以两种形式提供：

1. 字符串：代表需要遍历的array中item的某个属性，该属性的!需要是列表中唯一的字符串或数字，且不能动态改变。
2. 保留关键字*this代表在for循环中的item本身，当item本身是一个唯一的字符串或者数字时可以使用。

注意事项：

1. 如果不加wx:key，会报一个warning，如果明确知道该列表是静态，即以后数据不会改变，或者不必关注其顺序，可以选择忽略。
2. 在给wx：key添加属性值的时候，不需要使用双大括号语法，直接使用遍历的array中item的某个属性。

041.列表渲染-进阶用法

1. 需要对默认的变量名和下标进行修改，可以使用wx：for-item和wx：

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

2. 将wx：for用在标签上，以渲染一个包含多个节点的结构块

• 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。
• 标签在wxml中可以用于组织代码结构，支持列表渲染、条件渲染等。

042.条件渲染

条件渲染主要用来控制页面结构的展示和隐藏，在微信小程序中实现条件渲染有两种方式：

1. 使用wx:if、wx:elif、wx：else属性组。
2. 使用hidden属性。

wx：if和hidden二者的区别：

1. wx.if：当条件为true时将结构展示出来，否则结构不会进行展示，通过移除/新增节点的方式来实现。
2. hidden：当条件为true时会将结构隐藏，否则结构会展示出来，通过display样式属性来实现的。