微信小程序开发入门（四）

任亚飞

一、数据绑定

数据绑定：WXML（WeiXin MarkupLanguage）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。

通过这个简单的例子来看看 WXML 具有什么能力：

App.json 里面新建页面shuju。打开Pages 里的shuju 页面的标签语言--wxml，写入view 组件，用两个大括号包裹字符串属性message（名称）。

<！-- 新建页面shuju 里面的wxml-->

{{message}}

打开标签语言--js， 删除data 里面的函数，保留data，写入字符串属性message（ 名称） 冒号， 单引号属性值Hello MINA。编译保存查看模拟器效果。

// 新建页面shuju 里的.js

Page（{

data： {message： 'Hello MINA！' }

}）

接着我们再看数字属性和布尔属性。

（参考代码1，请至壹零社公众号下载）

里面有数字类型：num：10000， 年龄：age18， 身高heigh：168， 体重：weight98，布尔类型：isgirl：true，字符串类型：name：" 美女"。

组件checkbox——复选框（多选项目）有以下属性项：

1.value string 默认否 checkbox标识， 选中时触发checkbox-group的 change 事件， 并携带 checkbox 的value

2.disabled boolean 默认false否 是否禁用

3.checked boolean 默认false否 当前是否选中，可用来设置默认选中

4.color string #09BB07 默认 否checkbox 的颜色，同css的color

参考代码如下（用wxml 组件包裹了checkbox，文本标题为：选中）：

<！-- 新建页面/shuju/shuju. checkbox（ 复选框）wxml-->

选中

// 新建页面shuju 里的.js

checkbox：true

保存编译后查看模拟器效果。数据绑定参考图1（红色框为新建页面shuju）。

二、运算

运算，可以在花括号（也就是两个大括号）中加入一些简单的运算，如表达式和语句型，表达式指的是一些简单运算和数字运算，如数字的加减，字符串拼接，三元表达式等运算。语句指的是：带有条件的逻辑运算，如 if- else 语句；switch 语句； dowhile 语句； for 等语句。

<！-- 新建页面/yunsuan/.wxml. 数字运算-->

{{1+1}}

<！-- 新建页面/yunsuan/.wxml. 字符串拼接-->

{{"1"+"1"}}

<！-- 新建页面/yunsuan/.wxml. 三元表达式-->

{{10%2===0？' 偶数'：' 奇数'}}

App.json 里面新建页面yunsuan。打开Pages 里的shuju 页面的标签语言--wxml， 写入view 组件， 用两个大括号包裹运算表达式“1+1”，保存编译后模拟器上查看输出结果；字符串拼接，大家注意，加上双引号的就是字符串，比如两大括号里加的"1"+"1" 表达式就是两个字符串拼接，大家参考上面字符串拼接代码编写完成后保存编译，在模拟器上查看输出结果，字符串拼接"1"+"1" 其实就是把两个1 组合起来--11；三元表达式，这里用了10 除以2的余数等于0 输出偶数，不等于0 输出奇数，大家可以参考上面三元表达式的代码写后保存编译，查看模拟器结果，然后把10 除以2 改成11 除以2 保存编译后查看模拟器又会输出什么结果。

三、数组和循环列表

在组件上使用 wx：for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

数组的当前项的下标变量名默认为index，数组当前项的变量名默认为item。

（参考代码2，请至壹零社公众号下载）

注：Wx：for=“{{ 数组或者对象的名称}}”；wx：for-item=“ 循环项的名称”（软件默认项名称为item）；wx：for-index=“ 循环项的索引”。在新建页面yunsuan.js 里data 写入数组list-- 中括号，大括号id：1 第一项， 名字name：“电脑报”，每项写完后不要忘了英文状态下的逗号，依次写到第三项。在新建页面/yunsuan/.wxml 里面，用一个view 组件包裹另一个组件。在另一个view 组件里写入wx：for="{{list}}" （ 循环数组名字）；wx：for-item="item"（ 循环项的名称）；wx：for-index="index"（ 循环项的索引），写入组件属性“索引”：花括号index（索引的项），“值”：花括号item.name（索引每项name 的东西）（图2）。

wx：key="id"：如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 input 中的输入内容，switch 的选中状态），需要使用wx：key 来指定列表中项目的唯一的标识符。

wx：key 的值以两种形式提供

字符串， 代表在 for 循环的array 中 item的某个 property， 该property的值需要是列表中唯一的字符串或数字，且不能动态改变。

保留关键字 *this 代表在 for 循環中的 item 本身，这种表示需要 item本身是一个唯一的字符串或者数字。

当数据改变触发渲染层重新渲染的时候，会校正带有 key的组件，框架会确保它们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

如不提供 wx：key， 会报一个warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。

（参考代码3，请至壹零社公众号下载）

以上代码涉及数组、函数、嵌套循环，读者们可以试着去操作写代码，发现数组和函数与wxml 里的属性绑定，使用数组与函数中各项的数据重复渲染该组件。要知道数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为item。到这里小程序开发四就结束了，希望读者们多多练习多多写，这样有助于对代码的理解和对结构的熟悉，尤其语法是多联系记忆加深更强。