2.7.2 页面描述文件

WXML（WeiXin Markup Language）是一套标签语言，结合基础组件、事件系统，我们可 以构建出页面的结构。整个小程序框架系统包括逻辑层和视图层，逻辑层即为页面逻辑文件 （即 js 文件），视图层主要由页面描述文件（即 wxml 文件）和页面样式文件（即 wxss 文件） 组成。其中，视图层可以将逻辑层的数据反映成视图，同时将视图层的事件发送给逻辑层。

在 wxml 文件中，开发者可以在组件（微信小程序中将“标签”称为“组件”）上定义特定 的事件。当事件触发时，微信小程序就会执行逻辑层中对应的事件处理函数，来完成页面与用 户的通信。接下来，我们将介绍 WXML 中的 5 个重要概念和 4 个常用的组件。

1．数据绑定

wxml 文件中的动态数据均来自对应 Page 中的 data，使用 Mustache 语法（双大括号）将 变量包起来。代码清单 2-30 所示即为.wxml 文件中的代码。

代码清单 2-30

<viewclass="container"><!-- 简单的数据绑定 --><viewclass="author">{{author}}
</view><!-- 三元运算 --><viewclass="description"hidden="{{desFlag?true:false}}">{{description}}
</view><!— 算术运算 -->
<viewclass="sum">{{num1}}+{{num2}}={{num1+num2}}
</view><!-- 字符串运算 --><viewclass="sayHello">{{"Hello"+obj.content}}
</view></view>

代码清单 2-31 即为 JavaScript 文件中的代码。

代码清单 2-31

Page({
data: {
author: '大家好，我是石璞东',
description: "我是隐藏的内容",
desFlag: false,
num1: 1,
num2: 2,
obj: {
content: "World"    }
  }
})

运行结果如图 2-38 所示。

《智能前端技术与实践》——第 2 章 前端开发基础 ——2.7 微信小程序开发——2.7.2 页面描述文件（2）: https://developer.aliyun.com/article/1228016?groupCode=tech_library