微信小程序的 UI 层如何与控制层交互， 以及怎么样响应用户操作事件， 这次咱们来聊聊。
WXML
微信小程序使用 WXML 文件作为 UI 视图。 WXML 其实就是 WeiXin Markup Language 的缩写。 是一种类似 XML 语法结构的 UI 定义方式。
它可以进行数据绑定， 显示 Page 中相应的属性：
两对括号中的 message 对应 Page 中 data 属性中的 message：
Page({
data: {
message: 'Hello World'
}
})当然， 我们还可以进行循环显示， 这个语法可能会和大家平时使用过的模板语法不太相同：
wx:for 是微信定义的一个特殊属性， 其实相当于一个 for 循环， 重复显示 View 空间， 然后将数组中的每一个元素都遍历一遍， 下面是 array 在 Page 中的定义：
Page({
data: {
array: ["Swift", "Objctive-C", "Javascript"]
}
})上面 WXML 例子中的 代表我们 data 中的 array 数组， 而 表示的就是数组遍历中的每一个元素， 编译运行后的界面显示如下：
除了 wx:for 这种循环遍历语法之外， 微信还提供了另外一种， wx:if, 大家从名称中应该就可以想到， 它是一个条件判断， 只有当条件判断成立， 才会显示这个 View。 除了 wx:if 之外， 还提供了了 wx:elif, wx:else
注意这三个属性的用法， wx:if 和 wx:elif 这两个属性后面需要跟随一个布尔表达式用于判断， 而 wx:else 后面不需要跟随任何表达式。 这三个属性的逻辑和我们平时开发中的 if else 判断逻辑完全一样，也比较好理解。
关于 wx:else 微信官方的示例中是给他指定了表达式属性的。 但我在真实环境上测试了一下， wx:else 无论是否指定后面的属性值，最终的输出结果都是一样的， 所以这可能是官方示例的一个笔误。 按照 if 表达式正常的逻辑来看，应该不需要给它再设属性了。 大家可以留意一下。
模板
说完了循环和条件判断语法， WXML 还支持模板定义, 比如这样：
简单解释一下， 第一个 template 标签是模板定义， name 属性定义了它的名字，在两个标签之间是它的内部结构。 然后紧接着的后两个 template 标签是模板的引用， is 属性代表要引用哪个模板。 我们这里填入的都是 hello， 也就是我们最开始定义的这个模板结构。 然后就是 data 属性，通过它传入模板需要的相关数据。 先来开一下 swift 和 objc 这两个数据的定义：
Page({
data: {
swift: { name: "Swift"},
objc: { name: "Objective-C"}
}
})swift 和 objc 都是两个 JSON 对象， 都包含一个 name 属性。 大家注意看我们前面模板引用 data 属性的方式：
这里我们在一对大括号中的变量名前面还写了三个点 —— …
… 其实是一个操作符， 用于将 swift 变量内部的值 “展开”， 这么说可能不太好理解， 咱们还回到模板的定义中：
我们看到， template 内部使用 来引用我们传入对象的属性。 这就需要我们 “展开” 传入的对象， 才能让模板找到对应 key 的值。 简单来说， 如果我们不适用 … 这个操作符，而是直接像这样传入对象：
如果这样运行程序的话， 模板是不能正确读取到 name 属性的。
模板的引用
当然， 我们可以不用把模板的定义和引用它的代码写到一起， 我们可以把模板的定义单独写在一个 WXML 文件中， 然后在另外一个文件中使用 import 来引入它。 这也是一个结构良好的项目的通常做法。 比如我们刚才的模板存放到 hello.wxml 中， 我们就可以这样引用它：
这样我们可以比较好的进行模块划分。 当然， 除了 import 之外， 微信还给我们提供了另外一种引用方式， include。 简而言之， 他们之间的区别是这样， import 只能引入目标文件中的 template 定义， 不会引入具体的 UI 内容。 而 include 正好相反， 它只会引入目标文件中的内容，不会引入 template 定义, 比如我们有一个文件，叫做 header.wxml：
然后我们在 index.wxml 中这样引用：
这样就会引入 header.wxml 中定义的内容了， 最后的输出结果就是他们两个文件中所有 UI 组件的整合了。 这就是 import 和 include 的区别了。
如果你觉得这篇文章有帮助，还可以关注微信公众号 swift-cafe，会有更多我的原创内容分享给你~
本站文章均为原创内容，如需转载请注明出处，谢谢。Newer
将 Sublime 打造成一个 Swift 编辑器
Older微信小程序开发进阶 - 生命周期
