2.6 页面结构文件
页面结构文件（WXML）是框架设计的一套类似HTML的标签语言，结合基础组件、事件系统，可以构建出页面的结构，即．wxml文件。在小程序中，类似HTML的标签被称为组件，是页面结构文件的基本组成单元。这些组件有开始（如<view>）和结束（如</view>）标志，每个组件可以设置不同的属性（如id、class等），组件还可以嵌套。
WXML还具有数据绑定、条件数据绑定、列表数据绑定、模板、引用页面文件、页面事件等能力。
2.6.1 数据绑定
小程序在进行页面数据绑定时，框架会将WXML文件与逻辑文件中的data进行动态绑定，在页面中显示data中的数据。小程序的数据绑定使用Mustache语法（{{ }}）将变量或运算规则包起来。
1．简单绑定
简单绑定是指使用双大括号（{{}}）将变量包起来，在页面中直接作为字符串输出使用。简单绑定可以作用于内容、组件属性、控制属性等的输出。
【注意】
简单绑定作用于组件属性、控制属性时，双大括号外应添加双引号。
示例代码如下：
2．运算
在 {{}} 内可以做一些简单的运算（主要有算术运算、逻辑运算、三元运算、字符串运算等），这些运算均应符合JavaScript运算规则。
示例代码如下：
保存并编译，执行效果如图2-19所示。
图2-19 WXML运算
2.6.2 条件数据绑定
条件数据绑定就是根据绑定表达式的逻辑值来判断是否数据绑定当前组件。
1. wx:if条件数据绑定
wx:if条件数据绑定是指使用wx:if这个属性来判断是否数据绑定当前组件。例如：
在以上代码中，当condition变量的值为true时，view组件将数据绑定输出相关内容；当condition变量的值为false时，view组件将不数据绑定。
当需要添加多个分支块时，可以使用wx:elif、wx:else属性。当控制表达式为true时，数据绑定一个分支；当控制表达式为false时，数据绑定另一个分支。例如：
在以上代码中，当x的值大于0时，输出1；当x的值等于0时，输出0；否则，输出-1。
2. block wx:if条件数据绑定
当需要通过一个表达式去控制多个组件时，可以通过<block>将多个组件包起来，然后在<block>中添加wx:if属性即可。例如：
2.6.3 列表数据绑定
列表数据绑定用于将列表中的各项数据进行重复数据绑定。
1. wx:for
在组件上，可以使用wx:for控制属性绑定一个数组，将数据中的各项数据循环进行数据绑定到该组件，格式如下：
在上面的代码中，items为一个数组，数组当前项的下标变量名默认为index，数组当前项的变量名默认为item，示例代码如下：
保存并编译，运行效果如图2-20所示。
图2-20 wx:for控制属性列表数据绑定
微信开发工具中提供了使用wx:for-index来重新指定数据当前项下标的变量名，使用wx:for-item来重新指定当前项的变量名。上面的wxml代码可以修改为以下形式，效果不变：
2. block wx:for
与block wx:if类似，在wxml中也可以使用<block>包装多个组件进行列表数据绑定。例如，上面的代码可以被修改为以下形式，效果不变：
2.6.4 模板
在小程序中，如果要经常使用几个组件的组合（如“登录”选项），通常把这几个组件结合定义为一个模板，以后在需要的文件中直接使用这个模板。
1．定义模板
模板代码由wxml组成，因此其定义也是在wxml文件中，定义模板的格式为：
相关组件代码为：
其中，<template>为模板标签，name属性用于定义模板的名称。
2．调用模板
将模板定义后，就可以对其进行调用了。调用模板的格式为：
其中，<template>为模板标签；is属性用于指定要调用的模板名称；data属性定义要传入的数据，如果模板中不需要传入数据，data属性可以省略。
我们可以把上面的示例用模板来实现，代码如下：
2.6.5 引用页面文件
在WXML文件中，不仅可以引用模板文件，还可以引用普通的页面文件。WXML提供了两种方式来引用其他页面文件。
1. import方式
如果在要引用的文件中定义了模板代码，则需要用import方式引用。
例如，在a. wxml文件中定义一个item模板。代码如下：
如果要在b. wxml文件中使用item模板，首先需要使用import方式引用a. wxml文件，然后通过template使用item模板。代码如下：
2. include方式
include方式可以将源文件中除模板之外的其他代码全部引入，相当于将源文件中的代码复制到include所在位置。
例如，在aa. wxml文件中定义如下代码：
在bb. wxml文件中定义如下代码：
bb. wxml文件通过include把aa. wxml文件代码加载，其结果为如下结构：
2.6.6 页面事件
简单来说，小程序中的事件是用户的一种行为或通信方式。在页面文件中，通过定义事件来完成页面与用户之间的交互，同时通过事件来实现视图层与逻辑层的通信。我们可以将事件绑定到组件上，当达到触发条件时，事件就会执行逻辑层中对应的事件处理函数。
要实现这种机制，需要定义事件函数和调用事件。
■ 定义事件函数 在．js文件中定义事件函数来实现相关功能，当事件响应后就会执行事件处理代码。
■ 调用事件 调用事件也称为注册事件。调用事件就是告诉小程序要监听哪个组件的什么事件，通常在页面文件中的组件上注册事件。事件的注册（同组件属性），以“key=value”形式出现，key（属性名）以bind或catch开头，再加上事件类型，如bindtap、catchlongtap。其中，bind开头的事件绑定不会阻止冒泡事件向上冒泡，catch开头的事件绑定可以阻止冒泡事件向上冒泡。value（属性值）是在js中定义的处理该事件的函数名称，如click。
例如，下列示例代码定义了click函数，将事件信息输出到控制台：
在小程序中，事件分为冒泡事件和非冒泡事件两大类型。
■ 冒泡事件 冒泡事件是指某个组件上的事件被触发后，事件会向父级元素传递，父级元素再向其父级元素传递，一直到页面的顶级元素。
■ 非冒泡事件 非冒泡事件是指某个组件上的事件被触发后，该事件不会向父节点传递。
在WXML中，冒泡事件有6个，如表2-9所示。
表2-9 冒泡事件
除了表2-9列出的6个冒泡事件以外，其他组件自定义的事件也属于冒泡事件。例如，<form/ >中的submit事件，<input/ >中的input事件。