EX303-数据及事件绑定_2019.6.28_GX.pdfVIP

微信小程序开发

北方工业大学

案例

数据及事件绑定

案例描述

编写一个小程序，实现数据和事件的绑定。

数据绑定包括：算术运算绑定、对象绑定和数组

绑定，并通过点击按钮事件修改绑定的数据。

实现效果

手机录屏

案例实现

电脑录屏

知识要点

WXML（WeiXinMarkupLanguage）

data对象的使用方法

数据绑定的方法

setData()函数的使用方法

事件绑定的方法

WXML

是框架设计的一套标签语言，结合基础组件、

事件系统，可以构建出页面的结构。

data对象

是页面第一次渲染时使用的初始数据，WXML

中的动态数据均来自对应Page的data。页面加载

时，data以JSON字符串的形式由逻辑层传至渲染层，

数据类型包括：字符串，数字，布尔值，对象，

数组等。

数据绑定

渲染层可以通过WXML对数据进行绑定。数据

绑定使用Mustache语法（双大括号）将变量包起

来，可以作用于：内容、组件属性、控制属性、

关键字、运算、组合、数组、对象等场景。

setData()函数

用于将数据从逻辑层发送到视图层（异步），

同时改变对应的this.data的值（同步）。

事件绑定

事件是视图层到逻辑层的通讯方式，它可以将

用户的行为反馈到逻辑层进行处理。事件可以绑定

在组件上，当触发事件，就会执行逻辑层中对应的

事件处理函数。事件对象可以携带额外信息，如id,

dataset,touches。

案例

总结

知识要点

小程序数据绑定和事件绑定的实现方

法。