微信小程序四种文件类型之二WXML模板文件

微信小程序文件类型有四种：

.json 后缀的 JSON 配置文件

.wxml 后缀的 WXML 模板文件

.wxss 后缀的 WXSS 样式文件

.js 后缀的 JS 脚本逻辑文件

WXML 模板

WXML用的标签是 view, button, text 等等

{{msg}}this.setData({msg: 'Hello World'})

1、数据绑定

WXML 中的动态数据均来自对应 Page 的 data。

数据绑定使用Mustache 语法（双大括号）将变量包起来

<!--wxml--><view>{{message}}</view>// page.jsPage({  data: {    message: 'Hello MINA!'  }})

2、组件属性(需要在双引号之内)

<view id="item-{{id}}"></view>

3、控制属性(需要在双引号之内)

<viewwx:if="{{condition}}"></view>

4、关键字(需要在双引号之内)

true：boolean 类型的 true，代表真值。

false：boolean 类型的 false，代表假值。

<checkboxchecked="{{false}}"></checkbox>

5、列表渲染

<!--wxml--><viewwx:for="{{array}}">{{item}}</view>// page.jsPage({  data: {    array:     }})<viewwx:for="{{array}}">  {{index}}: {{item.message}}</view>Page({  data: {    array:   }})

使用wx:for-item 可以指定数组当前元素的变量名；

使用wx:for-index 可以指定数组当前下标的变量名；

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">  {{idx}}: {{itemName.message}}</view>

wx:for也可以嵌套，下边是一个九九乘法表

<viewwx:for="{{}}"wx:for-item="i">  <viewwx:for="{{}}"wx:for-item="j">    <viewwx:if="{{i <= j}}">      {{i}} * {{j}} = {{i * j}}    </view>  </view></view>

6、block wx:for

类似block wx:if，也可以将 wx:for 用在标签上，以渲染一个包含多节点的结构块。例如：

<blockwx:for="{{}}">  <view>{{index}}:</view>  <view>{{item}}</view></block>

7、wx:key

如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如中的输入内容，的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。

wx:key的值以两种形式提供

1.字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。

2.保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字。

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

8、条件渲染

如果需要频繁切换的情景下，用hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。

<!--wxml--><viewwx:if="{{view == 'WEBVIEW'}}">WEBVIEW</view><viewwx:elif="{{view == 'APP'}}">APP</view><viewwx:else="{{view == 'MINA'}}">MINA</view>// page.jsPage({  data: {    view: 'MINA'  }})

9、block wx:if

因为wx:if 是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个标签将多个组件包装起来，并在上边使用 wx:if 控制属性。

<blockwx:if="{{true}}">  <view>view1</view>  <view>view2</view></block>

10、模板

<!--wxml--><templatename="staffName">  <view>    FirstName: {{firstName}}, LastName: {{lastName}}  </view></template><templateis="staffName"data="{{...staffA}}"></template><templateis="staffName"data="{{...staffB}}"></template><templateis="staffName"data="{{...staffC}}"></template>// page.jsPage({  data: {    staffA: {firstName: 'Hulk', lastName: 'Hu'},    staffB: {firstName: 'Shang', lastName: 'You'},    staffC: {firstName: 'Gideon', lastName: 'Lin'}  }})

is 属性可以使用 Mustache 语法，来动态决定具体需要渲染哪个模板：

<templatename="odd">  <view>odd</view></template><templatename="even">  <view>even</view></template><blockwx:for="{{}}">  <templateis="{{item % 2 == 0 ? 'even' : 'odd'}}" /></block>

扩展运算符 …

也可以用扩展运算符... 来将一个对象展开

<template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}"></template>Page({  data: {    obj1: {      a: 1,      b: 2    },    obj2: {      c: 3,      d: 4    }  }})

最终组合成的对象是{a: 1, b: 2, c: 3, d: 4, e: 5}。

间接表达

如果对象的key 和 value 相同，也可以间接地表达。

<template is="objectCombine" data="{{foo, bar}}"></template>Page({  data: {    foo: 'my-foo',    bar: 'my-bar'  }})

最终组合成的对象是{foo: ‘my-foo’, bar:’my-bar’}。

注意：上述方式可以随意组合，但是如有存在变量名相同的情况，后边的会覆盖前面，如：

<template is="objectCombine" data="{{...obj1, ...obj2, a, c: 6}}"></template>Page({  data: {    obj1: {      a: 1,      b: 2    },    obj2: {      b: 3,      c: 4    },    a: 5  }})

最终组合成的对象是{a: 5, b: 3, c: 6}。

11、运算

可以在{{}} 内进行简单的运算，支持的有如下几种方式：

三元运算

<viewhidden="{{flag ? true : false}}">Hidden</view>

算数运算

<view>{{a + b}} + {{c}} + d</view>Page({  data: {    a: 1,    b: 2,    c: 3  }})

view中的内容为3 + 3 + d。

逻辑判断

<viewwx:if="{{length > 5}}"></view>

字符串运算

<view>{{"hello" + name}}</view>Page({data: {name: 'MINA'}})

数据路径运算

<view>{{object.key}} {{array}}</view>Page({data: {object: {key: 'Hello '},array: }})

12、组合

也可以在Mustache 内直接进行组合，构成新的对象或者数组。

数组

<viewwx:for="{{}}">{{item}}</view>

最终组合成数组。

最终组合成的对象是{for: 1, bar: 2}

注意：花括号和引号之间如果有空格，将最终被解析成为字符串

<viewwx:for="{{}} ">{{item}}</view>等同于<viewwx:for="{{ + ' '}}">{{item}}</view>

13、引用

WXML 提供两种文件引用方式import和include。

import可以在该文件中使用目标文件定义的template，如：

在 item.wxml 中定义了一个叫item的template：

<!-- item.wxml --><templatename="item"><text>{{text}}</text></template>

在 index.wxml 中引用了 item.wxml，就可以使用item模板：

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

import 的作用域

C import B，B import A，在C中可以使用B定义的template，在B中可以使用A定义的template，但是C不能使用A定义的template。

include

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

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

关注我，前端开发少走弯路、高效摸鱼～

如果你觉得文章内容有用，请记得点赞、收藏、转发。