一、数据及事件绑定
1.知识点
（1）算术运算、对象和数组绑定的实现方法
（2）事件绑定的实现方法
2.实现方式
（1）WXML（WeiXin Markup Language）。WXML是框架设计的一套标签语言，结合基础组件、时间系统，可以构建出页面的结构。
（2）data对象。data对象是页面第一次渲染时使用的初始数据，WXML中的动态数据均来自对应的Page的data。页面加载时，data以JSON字符串的形式由逻辑层传至渲染层。data中的数据包括：字符串、数字、布尔值、对象、数组。
（3）数据绑定。渲染层可以通过WXML对数据进行绑定。数据绑定使用Mustache语法（双大括号）将变量抱起来，可以作用于：内容、组件属性（需要在双引号之内）、控制属性（需要在双引号之内）、关键字（需要在双引号之内）、运算、组合、对象、数组、对象等场景。
（4）setData（）函数。此函数用于将数据从逻辑层发送到视图层（异步），同时改变对应的this.data的值（同步）。
（5）事件绑定。事件是视图层到逻辑层的通信方式，它可以将用户的行为反馈到逻辑层进行处理。事件可以绑定到组件上，当触发事件，就会执行逻辑层中对应的事件处理函数。事件对象可以携带额外信息，如id，dataset，touches。
3.案例分析
3.1案例描述
编写一个小程序，实现数据和事件的绑定。数据绑定包括：算术运算绑定、对象绑定和数组绑定，并通过点击按钮时间修改绑定的数据。
3.2实现效果
根据案例描述可以做出下图所示的效果。初始界面如图01所示，在视图层文件index.wxml中绑定了普通数据a，b，c，绑定了对象数据Student和数组数据array，这些数据的值都可以通过逻辑层文件index.js来传递。当点击“修改绑定数据”按钮时，原来的数据会发生相应的变化，如图02所示。
图 01
图 02
3.3案例实现
3.3.1编写index.wxml文件代码
小程序界面主要有文本信息和1个按钮组成，文本信息可以通过view组件来呈现，按钮利用button组件拿来实现。
（1）index.wxml文件中的数据通过{{}}符号于index.js文件中的数据进行绑定，该绑定是单向的，数据只能由index.js文件传给index.wxml文件，不能反向传递。
（2）普通数据绑定直接使用变量名来实现，如本案例中的变量a，b和c；对象数据绑定通过“对象名.对象属性”来实现，如本案例中的Student.stuID、Student.name和Student.birthday；数组数据绑定直接使用变量名来实现，如本案例中的array[0]、array[1]和array[2]。
（3）界面最后添加一个button组件，并利用该组件进行事件绑定。事件绑定通过在index.js文件中定义事件绑定函数实现。
（4）界面使用view样式调整字体大小和间距。
<!--index.wxml-->
<view class="box">
<view class="title">数据绑定示例</view>
<view>算术运算绑定：{{a}}+{{b}}+{{c}}={{a+b+c}}</view>
<view>对象绑定-学号：{{Student.id}}</view>
<view>对象绑定-姓名：{{Student.name}}</view>
<view>对象绑定-生日：{{Student.birthday}}</view>
<view>数组绑定-array[0]：{{array[0]}}</view>
<view>数组绑定-array[1]：{{array[1]}}</view>
<view>数组绑定-array[2]：{{array[2]}}</view>
<button bindtap="modify" type="primary">修改绑定数据</button>
</view>3.3.2编写index.wxss文件代码
文件中定义了view样式来设置字体大小和边距，该样式对wxml文件中的所有view组件都起作用。
/**index.wxss**/
view{
font-size: 18px;
margin: 10px;
}3.3.3编写index.js文件代码
在data对象中初始化绑定的数据，包括普通数据、对象和数组，在绑定的事件函数中通过调用this.setData（）函数修改绑定的数据。
// index.js
Page({
data: { //数据初始化
a:10, //初始化绑定的普通数据
b:20,
c:30,
Student:{ //初始化绑定的对象数据
id:'201922450934',
name:'ss',
birthday:'2001.10.04'
},
array:[ //初始化绑定的数组数据
'2010','2021','2022'
]
},
modify:function(){ //事件函数
this.setData({ //修改绑定数据的值
a:12, //修改绑定的普通数据的值
b:32,
c:56,
Student:{ //修改绑定的对象数据的值
id:'2019224',
name:'Sean Xiao',
birthday:'1991.10.05'
},
array:[ //修改绑定的数组数据的值
'1998','1999','2000'
]
})
}
})
