小程序wxml语法的使用

一、WXML介绍

WXML全称是 WeiXin Markup Language，是小程序框架设计的一套标签语言，结合小程序的基础组件、事件系统，可以构建出页面的结构。
WXML 文件后缀名是 .wxml，简单的 WXML 语句在语法上同 HTML 非常相似。不带有任何逻辑功能的 WXML 基本语法如下：
<标签名 属性名1=“属性值1” 属性名2=“属性值2” …> …</标签名>
一个完整的 WXML语句由一段开始标签和一段结束标签组成，在标签中可以是内容，也可以是其他的 WXML 语句。WXML 要求标签必须是严格闭合的，没有闭合将会导致编译错误。除了一些特殊的属性外，其属性的格式都是key=“value” 的方式成对出现。

二、数据绑定

WXML 通过 {{变量名}} 来绑定 WXML 文件和对应的 JS 文件中的 data 对象属性。其中，组件内容、组件属性、控制属性、关键字都需要在双引号之内。如下：

Page({
  data: {
    message: 'DEE!',
    condition: true,
    id: 0,
  }
})

<!-- 内容 -->
<view> {{ message }} </view>
<!-- 组件属性 -->
<view id="item-{{id}}"> </view>
<!-- 控制属性 -->
<view wx:if="{{condition}}"> </view>
<!-- 关键字：不要直接写checked="false"，其计算结果是一个字符串，转成boolean类型后代表真值 -->
<checkbox checked="{{false}}"> </checkbox>

注：变量名大小写敏感，即 {{name}} 和 {{Name}} 是两个不同的变量。

通过 {{ 变量名 }} 语法使 WXML 拥有动态渲染的能力。除此之外，还可以在 {{ }} 内进行简单的逻辑运算、算数运算、字符串的拼接，也可以在 {{ }} 内直接进行组合，构成新的对象或者数组。如下：

Page({
  data: {
    a: 1,
    b: 2,
    c: 3,
    flag: 1,
    name: 'dee',
    object: {
      key: 'Hello '
    },
    array: ['dee'],
    zero: 0,
  }
})

<!-- 三元运算 -->
<view hidden="{{flag ? true : false}}"> Hidden </view>
<!-- 算数运算：3 + 3 + d -->
<view> {{a + b}} + {{c}} + d </view>
<!-- 逻辑判断 -->
<view wx:if="{{flag > 5}}"> </view>
<!-- 字符串运算 -->
<view>{{"hello" + name}}</view>
<!-- 数据路径运算 -->
<view>{{object.key}} {{array[0]}}</view>
<!-- 数组 -->
<view wx:for="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>
<!-- 对象 -->
<template is="objectCombine" data="{{for: a, bar: b}}"></template>

注：这里不建议在 {{ }} 做复杂的计算逻辑，也不建议在属性的条件表达式做复杂的计算逻辑。

三、列表渲染

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。其中，数组当前项的元素变量名默认为 item，下标变量名默认为 index。可使用 wx:for-item 指定数组当前项元素的变量名， wx:for-index 指定下标的变量名。如下：

Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})

<!-- 默认变量情况 -->
<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>
<!-- 指定变量情况 -->
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>

当列表中项目的位置动态改变或有新的项目添加到列表中时，会希望列表中的项目保持自己的特征和状态（如input中的输入内容，switch的选中状态），这时需要使用 wx:key 来指定列表中项目的唯一标识符。wx:key 的值以两种形式提供：

• 字符串，代表在 for 循环中的 item 的某个 property，该 property 的值需要唯一，且不能动态改变。
• 保留关键字 *this ，代表在 for 循环中的 item 本身，这种表示需要 item 本身唯一。

当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

四、条件渲染

在框架中，使用 wx:if="" 来判断是否需要渲染该代码块，也可以用 wx:elif 和 wx:else 来添加一个 else 块。如下：

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

wx:if 与 hidden
wx:if ：在条件第一次变成真的时候才开始局部渲染，条件不大可能改变的情况下适用。
hidden ：组件始终会被渲染，只是简单的控制显示与隐藏，需要频繁切换的情景下适用。

五、模板

WXML提供模板 template，可以在模板<template/>中定义代码片段，然后在不同的地方调用。使用 name 属性，作为模板的名字；使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入。如：

<!-- 定义模板 -->
<template name="demo">
  <view>
    <text> hello: {{name}} </text>
  </view>
</template>
<!-- 使用模板 -->
<template is="demo" data="{{name}}"/>

注：模板拥有自己的作用域，只能使用 data 传入的数据以及模板定义文件中定义的 <wxs /> 模块。

六、引用

WXML 提供两种文件引用方式import和include。
• import
import可以在该文件中使用目标文件定义的template。如在 item.wxml 中定义了一个叫item的template，在 index.wxml 中引用了 item.wxml，就可以使用item模板。代码如下：

<!-- item.wxml -->
<template name="item">
  <text>{{text}}</text>
</template>
<!-- index.wxml -->
<import src="item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>

另：import 有作用域的概念，即只会 import 目标文件中定义的 template，而不会 import 目标文件 import 的 template。如：C import B，B import A，在C中可以使用B定义的template，在B中可以使用A定义的template，但是C不能使用A定义的template。如下：

<!-- A.wxml -->
<template name="A">
  <text> A template </text>
</template>

<!-- B.wxml -->
<import src="A.wxml"/>
<template name="B">
  <text> B template </text>
</template>

<!-- C.wxml -->
<import src="B.wxml"/>
<template is="A"/>  <!-- Error! Can not use tempalte when not import A. -->
<template is="B"/>

• include
include 可以将目标文件除了 <template/> <wxs/> 外的整个代码引入，相当于是拷贝到 include 位置。如：

<!-- index.wxml -->
<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>
<!-- header.wxml -->
<view> header </view>
<!-- footer.wxml -->
<view> footer </view>

七、共同属性

所有wxml 标签都支持的属性称之为共同属性，如表所示。

八、参考资料

• WXML语法参考