1.2 WXML模板--'*.wxml'文件 · 微信

[TOC] ## 1.2 WXML 模板——`*.wxml`文件 `WXML` 全称是 WeiXin Markup Language，是小程序框架设计的一套标签语言，结合小程序的基础组件、事件系统，可以构建出页面的结构。 WXML 文件后缀名是 .wxml ，简单的 WXML语句在语法上同 HTML 非常相似，由标签、属性等构成。不带有任何逻辑功能的 WXML 基本语法如下： ~~~  <标签名属性名1="属性值1" 属性名2="属性值2" ...> ...</标签名> ~~~ 一个完整的 WXML语句由一段开始标签和一段结束标签组成，在标签中可以是内容，也可以是其他的 WXML 语句，这一点上同 HTML 是一致的。有所不同的是，WXML 要求`标签必须是严格闭合`的，没有闭合将会导致编译错误。属性总是定义在开始标签中，除了一些特殊的属性外，其余属性的格式都是key="value" 的方式成对出现。需要注意的是，WXML中的`属性是大小写敏感`的，也就是说 class 和 Class 在WXML中是不同的属性。在网页的一般开发流程中，我们通常会通过 `JS` 操作 `DOM` (对应 HTML 的描述产生的树)，以引起界面的一些变化响应用户的行为。例如，用户点击某个按钮的时候，`JS` 会记录一些状态到 `JS` 变量里边，同时通过 DOM API 操控 `DOM` 的属性或者行为，进而引起界面一些变化。但是，当项目越来越大的时候，JS代码中会充斥着非常多的界面交互逻辑和程序的各种状态变量，显然这不是一个很好的开发模式，因此就有了 MVVM 的开发模式（例如 React, Vue），提倡把渲染和逻辑分离。简单来说就是不要再让 JS 直接操控 DOM，JS 只需要管理状态即可，然后再通过一种模板语法来描述状态和界面结构的关系即可。微信小程序的框架就用到了这个思路，如果需要把一个 `Hello World` 的字符串显示在界面上。 WXML 是这么写 : ~~~ <text>{{msg}}</text> ~~~ JS 只需要管理状态即可: ~~~ this.setData({ msg: "Hello World" }) ~~~ 通过 `{{ }}` 的语法把一个变量绑定到界面上，我们称为数据绑定。仅仅通过数据绑定还不够完整的描述状态和界面的关系，还需要 `if/else`, `for`等控制能力，在小程序里边，这些控制能力都用 `wx:` 开头的属性来表达。 ### 1.2.1 数据绑定用户界面呈现会因为当前时刻数据不同而有所不同，或者是因为用户的操作发生动态改变，程序在运行过程中，要有动态的去改变渲染界面的能力。在 Web 开发中，开发者使用 JavaScript 通过Dom 接口来完成界面的实时更新。在小程序中，使用 WXML 语言所提供的数据绑定功能，来完成此项功能。WXML 通过 {{变量名}} 来绑定 WXML 文件和对应的 JavaScript 文件中的 data 对象属性。代码清单2-5 数据绑定示例 - index.wxml文件 ~~~  <text>当前时间：{{time}}</text> ~~~ - index.js文件 ~~~ // pages/wxml/index.js Page({ /** * 页面的初始数据 */ data: { time: (new Date()).toString() }, }) ~~~ 属性值也可以动态的去改变，有所不同的是，属性值必须被包裹在双引号中，如下：代码清单2-8 属性值的绑定 ~~~  <text data-test="{{test}}"> hello world</text>  <text data-test={{test}}> hello world </text > ~~~ 注意： 1. `变量名是大小写敏感`的，也就是说wxml 文件中 {{name}} 和 {{Name}} 是两个不同的变量。也就意味着进行数据绑定时，同一个变量名要在wxml文件和js文件保持一模一样。 2. wxml文件中无定义，js文件中有设置值的变量，不会被同步到 wxml 文件中。 3. wxml文件中已定义，js文件中被设置为 undefined 的变量，不会被同步到 wxml 文件中。 ### 1.2.2 逻辑语法通过` {{ 变量名 }}` 语法可以使得 WXML 拥有动态渲染的能力，除此外还可以在 {{ }} 内进行简单的逻辑运算。 - 三元运算 - 算数运算 - 字符串的拼接 - 放置常量（数字、字符串或者是数组） ~~~  <text>{{ a === 10? "变量 a 等于10": "变量 a 不等于10"}}</text>   <view> {{a + b}} + {{c}} + d </view>    <view>{{"hello " + name}}</view>   <text>{{[1,2,3]}}</text>  <text>{{"hello world"}}</text>  ~~~ ### 1.2.3 条件逻辑 WXML 中，使用`if-else`来判断是否需要渲染该代码块： - 语法：`wx:if="{{condition}}"`，`wx:elseif="{{condition}}"`，`wx:else` ~~~ <view wx:if="{{length > 5}}"> 1 </view> <view wx:elif="{{length > 2}}"> 2 </view> <view wx:else> 3 </view> ~~~ `wx:if`是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个\<block\\> 标签将多个组件包装起来，并在上边使用 wx:if 控制属性。 ~~~ <block wx:if="{{true}}"> <view> view1 </view> <view> view2 </view> </block> ~~~ ### 1.2.4 列表渲染在组件上使用 `wx:for` 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为` index`，数组当前项的变量名默认为 `item`。代码清单2-13 列表渲染示例 ~~~  <view wx:for="{{array}}"> {{index}}: {{item.message}} </view>  ~~~ 使用 `wx:for-index` 指定数组当前下标的变量名，使用 `wx:for-item` 指定数组当前元素的变量名： ~~~ <view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName"> {{idx}}: {{itemName.message}} </view> ~~~ 类似 `block wx:if` ，也可以将 `wx:for` 用在 `<block>` 标签上，以渲染一个包含多节点的结构块。例如： ~~~ <block wx:for="{{[1, 2, 3]}}"> <view> {{index}}: </view> <view> {{item}} </view> </block> ~~~ 如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 `<input/>` 中的输入内容， `<switch/>` 的选中状态），需要使用 `wx:key` 来指定列表中项目的唯一的标识符。 `wx:key` 的值以两种形式提供： 1. 字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。 2. 保留关键字 `this` 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字，如：当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。代码清单2-14 使用 wx:key 示例（WXML） ~~~ <switch wx:for="{{objectArray}}" wx:key="unique" > {{item.id}} </switch> <button bindtap="switch"> Switch </button> <button bindtap="addToFront"> Add to the front </button> <switch wx:for="{{numberArray}}" wx:key="*this" > {{item}} </switch> <button bindtap="addNumberToFront"> Add to the front </button> ~~~ 代码清单2-15 使用 wx:key 示例（JavaScript） ~~~ Page({ data: { objectArray: [ {id: 5, unique: 'unique_5'}, {id: 4, unique: 'unique_4'}, {id: 3, unique: 'unique_3'}, {id: 2, unique: 'unique_2'}, {id: 1, unique: 'unique_1'}, {id: 0, unique: 'unique_0'}, ], numberArray: [1, 2, 3, 4] }, switch: function(e) { const length = this.data.objectArray.length for (let i = 0; i < length; ++i) { const x = Math.floor(Math.random() * length) const y = Math.floor(Math.random() * length) const temp = this.data.objectArray[x] this.data.objectArray[x] = this.data.objectArray[y] this.data.objectArray[y] = temp } this.setData({ objectArray: this.data.objectArray }) }, addToFront: function(e) { const length = this.data.objectArray.length this.data.objectArray = [{id: length, unique: 'unique_' + length}].concat(this.data.objectArray) this.setData({ objectArray: this.data.objectArray }) }, addNumberToFront: function(e){ this.data.numberArray = [ this.data.numberArray.length + 1 ].concat(this.data.numberArray) this.setData({ numberArray: this.data.numberArray }) } }) ~~~ ### 1.2.5 模板 WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。使用 `name` 属性，作为模板的名字。然后在 `<template/>` 内定义代码片段，如：代码清单2-16 定义模板 ~~~ <template name="msgItem"> <view> <text> {{index}}: {{msg}} </text> <text> Time: {{time}} </text> </view> </template> ~~~ 使用 `is` 属性，声明需要的使用的模板，然后将模板所需要的 `data` 传入，如代码2-17所示。代码清单2-17 模板使用示例 ~~~  <template name="msgItem"> <view> <text> {{index}}: {{msg}} </text> <text> Time: {{time}} </text> </view> </template> <template is="msgItem" data="{{...item}}"/>  ~~~ `is`还可以动态决定具体需要渲染哪个模板，如代码2-18所示。代码清单2-18 动态使用模板 ~~~ <template name="odd"> <view> odd </view> </template> <template name="even"> <view> even </view> </template> <block wx:for="{{[1, 2, 3, 4, 5]}}"> <template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/> </block>  ~~~ ### 1.2.6 引用 WXML 提供两种文件引用方式`import`和`include`。 - `import` 可以在该文件中使用目标文件定义的 template，如：在 item.wxml 中定义了一个叫 item的 template ： ~~~  <template name="item"> <text>{{text}}</text> </template> ~~~ 在 index.wxml 中引用了 item.wxml，就可以使用 item模板： ~~~ <import src="item.wxml"/> <template is="item" data="{{text: 'forbar'}}"/> ~~~ 需要注意的是 import 有作用域的概念，即只会 import 目标文件中定义的 template，而不会 import 目标文件中 import 的 template，简言之就是 import 不具有递归的特性。 - `include` 可以将目标文件中除了 `<template/> <wxs/>` 外的整个代码引入，相当于是拷贝到 include 位置，如代码2-22、代码2-23、代码2-24所示。代码清单2-22 index.wxml ~~~  <include src="header.wxml"/> <view> body </view> <include src="footer.wxml"/> ~~~ 代码清单2-23 header.wxml ~~~  <view> header </view> ~~~ 代码清单2-24 footer.wxml ~~~  <view> footer </view> ~~~ ### 1.2.7 共同属性所有wxml 标签都支持的属性称之为共同属性，如表2-1所示。 :-: 表2-1 共同属性 | 属性名 |类型| 描述 | 注解 | | --- | --- | --- | --- | | id | String | 组件的唯一标识 | 整个页面唯一 | | class | String | 组件的样式类 | 在对应的 WXSS 中定义的样式类 | | style | String | 组件的内联样式 | 可以动态设置的内联样式 | | hidden | Boolean | 组件是否显示 | 所有组件默认显示 | | data-* | Any | 自定义属性 | 组件上触发的事件时，会发送给事件处理函数 | | bind*/catch* | EventHandler | 组件的事件 |