数据及事件绑定

一、数据及事件绑定

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'
      ]
    })
  }
})