WXML 模板简明教程

WXML 全称是 WeiXin Markup Language，是小程序框架设计的一套标签语言，结合小程序的基础组件、事件系统，可以构建出页面的结构。

打开开发工具的编辑器，在根目录下找到 app.json 文件，双击打开，在 "pages/index/index" 上新增一行 "pages/wxml/index" 保存文件。模拟器刷新后，读者可以在编辑器中找到 pages/wxml/index.wxml 文件，本小结的学习通过修改这个文件来完成。

---

1 介绍

WXML 文件后缀名是 .wxml ，打开 pages/wxml/index.wxml 文件，有过 HTML 的开发经验的读者应该会很熟悉这种代码的书写方式，简单的 WXML语句在语法上同 HTML 非常相似。

<!--pages/wxml/index.wxml-->

<text>pages/wxml/index.wxml</text>

​不带有任何逻辑功能的 WXML 基本语法如下：

<!-- 在此处写注释 -->

<标签名 属性名1="属性值1" 属性名2="属性值2" ...> ...</标签名>

​一个完整的 WXML语句由一段开始标签和一段结束标签组成，在标签中可以是内容，也可以是其他的 WXML 语句，这一点上同 HTML 是一致的。有所不同的是，WXML 要求标签必须是严格闭合的，没有闭合将会导致编译错误。

代码清单2-2 编译错误

<text>hello world


<!--
text 没有闭合，导致编译错误：
VM148:2 ./pages/wxml/index.wxml
 end tag missing, near text
> 1 | <text>hello world
    | ^
-->

​标签可以拥有属性，属性提供了有关的 WXML元素更多信息。属性总是定义在开始标签中，除了一些特殊的属性外，其余属性的格式都是key="value" 的方式成对出现。需要注意的是，WXML中的属性是大小写敏感的，也就是说 class 和 Class 在WXML中是不同的属性，代码2-3是一个文本标签的示例。

代码清单2-3 WXML 标签

<!--一个简单的文本标签 -->
<text>hello world</text>

<!-- view 中包含了 text 标签 -->
<view>
  <text>hello world</text>
</view>

代码2-4是一个带属性的图片标签的例子。

代码清单2-4 带有属性的图片标签

<image class="userinfo-avatar" src="./image/a.png" ></image>

2 数据绑定

用户界面呈现会因为当前时刻数据不同而有所不同，或者是因为用户的操作发生动态改变，这就要求程序的运行过程中，要有动态的去改变渲染界面的能力。在 Web 开发中，开发者使用 JavaScript 通过Dom 接口来完成界面的实时更新。在小程序中，使用 WXML 语言所提供的数据绑定功能，来完成此项功能。

先看一个简单的例子。

将 pages/wxml/index.wxml 文件的内容做一些简单的修改，如代码2-5所示。

代码清单2-5 数据绑定示例

<!--pages/wxml/index.wxml-->
<text>当前时间：{
  {time}}</text>

​保存后工具刷新，模拟器并没有显示出当前的时间，这是因为我们并没有给 time 设置任何初始值，请打开 pages/wxml/index.js 文件，在 data 的大括号中加入：

time: (new Date()).toString()。

如代码2-6所示。

代码清单2-6 数据绑定示例

// pages/wxml/index.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    time: (new Date()).toString()
  },
})

​
保存，模拟器刷新后正确的展示了当前时间，并且每次编译时间都会被更新。

WXML 通过 { {变量名}} 来绑定 WXML 文件和对应的 JavaScript 文件中的 data 对象属性。