2.2 应用程序的骨架——WXML基础

WXML，全称是WeiXin Markup Language，是专门在小程序中使用的一套标签语言。如果读者有开发网页的经验，那么很容易理解WXML。WXML中定义了一套完整的小程序基础组件标签，并且标签结合事件系统提供用户交互功能。在开发小程序页面时，第一步就是搭建页面结构，即编写WXML代码。

2.2.1 认识WXML

一个完整的WXML标签由开始标签和结束标签组成。在开始标签和结束标签之间可以编写标签的内容，也可以嵌套其他标签，以之前创建的HelloWorld小程序为例，其中index.wxml文件中的代码如下：

下面逐步解析上面的5行代码：＜！--内容--＞是WXML注释的写法，其中的内容并不会对程序产生任何影响，其作用只是帮助开发者阅读代码。index.wxml文件定义了3个组件，最外层使用view组件作为容器，并将其class属性设置为container，container实际上是WXSS样式表中定义的一个全局的容器样式。

在view容器内部，我们又嵌套了一个text组件和一个button组件。text组件用来显示文本，其中，style属性可以设置文本的颜色、字体、字号等属性；button组件用来渲染可以进行用户交互的按钮，其中，bindtap属性用来绑定按钮单击方法。

每种标签都可以拥有其独特的属性，属性的设置一般都是通过key="value"的方式在一组标签的开始标签中定义的。

2.2.2 将数据绑定到WXML界面中

小程序采用了响应式编程的设计思路，页面的展示是由数据进行驱动的，也就是说，如果数据产生变化，页面也会直接根据数据重新渲染。WXML提供了数据绑定的功能。

以HelloWorld程序为例，其中，文本标签显示的文本“HelloWorld”是写在text组件内部的，如果需要动态改变这个文本的值，那么需要将其定义在index.js文件中，并绑定到index.wxml的text组件中，先修改index.js文件中页面函数中data属性的值，示例代码如下：

页面所需要的数据通常定义在data属性中，这个属性的更改可以直接触发页面的重绘。修改index.wxml文件中的代码，示例代码如下：

刷新模拟器，效果如图2-2所示，可以看到text组件已经成功绑定了textData数据。

“{{}}”属性绑定的基本语法，不只是标签的内容，标签的属性也可以动态进行绑定，上面示例代码中的文本颜色属性就是通过textColor数据动态设置的，需要注意的是，属性的数据在绑定时，应将其放入引号内。还有一个细节需要注意，若主要标签绑定的数据值为undefined，则标签是不会被渲染的，示例代码如下：

2.2.3 WXML的逻辑能力

除可以直接绑定数据外，“{{}}”还拥有一些简单的逻辑能力，如使用运算符进行一些运算操作：

运行代码，效果如图2-3所示。

WXML也支持进行条件渲染，即当满足判定条件时，此标签才被渲染，通过为标签添加wx：if属性设置条件，示例代码如下：

上面的示例代码将wx：if属性对应的值设置为false，刷新模拟器可以看到文本标签将不会被渲染，在通常情况下，wx：if属性绑定的数据是一个条件表达式，示例代码如下：

wx：if属性也可以和wx：elif、wx：else结合使用，从而实现更复杂的条件渲染逻辑，示例代码如下：

上面的代码会判定textData数据的长度，大于3个字符则在页面上显示textData数据拼接上“！一起来学习吧”，如果不大于3个字符但大于0个字符，则在页面显示textData的值，否则在页面显示“无数据”。

如果需要同时对多个标签进行条件渲染，则可以使用block标签进行包裹，然后控制block标签的渲染条件即可，示例代码如下：

在学习JavaScript的语法时，我们了解到，分支和循环是程序流程控制的两大逻辑。对于WXML的渲染也是一样，WXML也支持循环渲染标签，这是小程序简单列表的基本开发方式，使用wx：for实现对数组的遍历，并循环渲染标签内部内容，首先在页面数据源中定义一个数据，示例代码如下：

修改index.wxml文件，示例代码如下：

wx：for属性会对数据进行遍历，并且自动生成两个临时变量：index和item。index为当前遍历数据元素的下标值，从0开始；item为当前遍历出的数据元素。运行上面的代码，效果如图2-4所示。

开发者也可以对数组遍历的临时变量名进行自定义：wx：for-index用来自定义下标变量名，wx：for-item用来自定义元素变量名。示例代码如下：

和wx：if的逻辑一样，如果要进行多个标签的循环渲染，可以使用block标签将需要循环的代码块进行包裹，示例代码如下：

运行代码，效果如图2-5所示。

2.2.4 WXML模板

对于组合复杂且复用性强的组件，可以将其定义为模板，在使用时直接使用模板即可，示例代码如下：

在上面的代码中，开始的template标签定义了一个模板，模板的名字为item，后面需要通过模板名指定要使用的模板，模板中可能会用到外面传递的一些数据，在使用模板时，通过设置data属性可以进行数据的传递，上面的示例代码演示了将遍历出的列表数据传递到模板内进行渲染。

上面的示例代码将模板定义在index.wxml文件中，但在实际开发中通常不会这样做，模板一般都是具有复用性的组件，为了便于复用，一般会将模板定义在单独的文件中，在需要使用时进行引用，首先在工程的根目录下创建一个新的文件夹，命名为template，如图2-6所示。

在template文件夹中新建一个WXML文件，命名为item.wxml，在其中编写如下代码：

修改index.wxml，示例代码如下：

import标签的作用是导入其他模板文件，在导入时需要注意路径的正确性，与之类似的还有include标签，include标签会将文件中除template标签和wxs标签外的所有内容直接复制到当前include的位置。例如，在工程根目录下新建一个命名为common的文件夹，用来存放公共组件，在其中新建一个命名为header.wxml的文件，编写的代码如下：

修改index.wxml文件，示例代码如下：

运行代码，效果如图2-7所示。