小程序三：视图层之WXML

WXML

---

WXML(WeiXin Markup Language)是MINA设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。

【1】数据绑定

1.1 简单绑定

数据绑定使用"Mustache"语法（双大括号）将变量包起来，可以作用于：

<view> {{ message }} </view>Page({  data: {    message: 'Hello MINA!'  }})

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

<view id="item-{{id}}"> </view>Page({  data: {    id: 0  }})

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

<view wx:if="{{condition}}"> </view>Page({  data: {    condition: true  }})

1.4 运算

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

1.4.1 三元运算

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

1.4.2 算数运算

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

view中的内容为3 + 3 + d

1.5 逻辑判断

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

1.6 字符串运算

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

1.6 组合

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

1.7 数组

<view wx:for-items="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>Page({  data: {    zero: 0  }})

最终组合成数组[0, 1, 2, 3, 4]

1.8 对象

<template is="objectCombine" data="{{for: a, bar: b}}"></template>Page({  data: {    a: 1,    b: 2  }})

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

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

<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}

【2】条件渲染

在MINA中，我们用wx:if="{{condition}}"来判断是否需要渲染该代码块：

<view wx:if="{{condition}}"> True </view>

也可以用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 vs hidden

因为wx:if之中的模板也可能包含数据绑定，所有当wx:if的条件值切换时，MINA有一个局部渲染的过程，因为它会确保条件块在切换时销毁或重新渲染。

同时wx:if也是惰性的，如果在初始渲染条件为false，MINA什么也不做，在条件第一次变成真的时候才开始局部渲染。

相比之下，hidden就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。

一般来说，wx:if有更高的切换消耗而hidden有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用hidden更好，如果在运行时条件不大可能改变则wx:if较好。

<checkbox hidden value="{{item.name}}" checked="{{item.checked}}"></checkbox>Page({  data: {        hidden: false  })

【3】列表渲染

在组件上使用wx:for控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

默认数组的当前项的下标变量名默认为index，数组当前项的变量名默认为item

<view wx:for="{{items}}">  {{index}}: {{item.message}}</view>Page({  items: [{    message: 'foo',  },{    message: 'bar'  }]})

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

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

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

【4】模板

WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。

<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>

【5】事件

• 事件是视图层到逻辑层的通讯方式。
• 事件可以将用户的行为反馈到逻辑层进行处理。
• 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
• 事件对象可以携带额外信息，如id, dataset, touches。

事件分类

事件分为冒泡事件和非冒泡事件

1. 冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
2. 非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。

WXML的冒泡事件列表：

类型触发条件touchstart手指触摸touchmove手指触摸后移动touchcancel手指触摸动作被打断，如来电提醒，弹窗touchend手指触摸动作结束tap手指触摸后离开longtap手指触摸后，超过350ms再离开

注：除上表之外的其他组件自定义事件都是非冒泡事件，如<form/>的submit事件，<input/>的input事件，<scroll-view/>的scroll事件，(详见各个组件)

事件绑定

事件绑定的写法同组件的属性，以key、value的形式。

• key以bind或catch开头，然后跟上事件的类型，如bindtap, catchtouchstart
• value是一个字符串，需要在对应的Page中定义同名的函数。不然当触发事件的时候会报错。

bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。

如在下边这个例子中，点击inner view会先后触发handleTap1和handleTap2(因为tap事件会冒泡到middle view，而middle view阻止了tap事件冒泡，不再向父节点传递)，点击middle view会触发handleTap2，点击outter view会触发handleTap1。

<view id="outter" bindtap="handleTap1">  outer view  <view id="middle" catchtap="handleTap2">    middle view    <view id="inner" bindtap="handleTap3">      inner view    </view>  </view></view>

</pre></div><div style="white-space:pre-wrap; line-height:1.7; font-size:14px"><span style="font-size:13px; font-family:Verdana">如无特殊说明，当组件触发事件时，逻辑层绑定该事件的处理函数会收到一个事件对象。</span></div><div style="white-space:pre-wrap; line-height:1.7; font-size:14px"><span style="font-size:13px; font-family:Verdana"><strong>事件对象的属性列表：</strong></span></div><div style="width:100%; overflow:auto; font-family:'Microsoft YaHei',微软雅黑,华文黑体,STHeiti,'Microsoft JhengHei',sans-serif"><table cellspacing="0" cellpadding="0" border="1" style="table-layout:fixed; border-collapse:collapse; border:1px solid #ccc; width:531px"><tbody><tr><td style="word-wrap:break-word; width:167px; height:32px; font-weight:bold; font-family:Verdana; font-size:13px; vertical-align:middle">属性</td><td style="word-wrap:break-word; width:91px; height:32px; font-weight:bold; font-family:Verdana; font-size:13px; vertical-align:middle">类型</td><td style="word-wrap:break-word; width:273px; height:32px; font-weight:bold; font-family:Verdana; font-size:13px; vertical-align:middle">说明</td></tr><tr><td style="word-wrap:break-word; width:167px; height:32px">type</td><td style="word-wrap:break-word; width:91px; height:32px; font-family:Verdana; font-size:13px; vertical-align:top">String</td><td style="word-wrap:break-word; width:273px; height:32px; font-family:Verdana; font-size:13px; vertical-align:top">事件类型</td></tr><tr><td style="word-wrap:break-word; width:167px; height:32px">timeStamp</td><td style="word-wrap:break-word; width:91px; height:32px; font-family:Verdana; font-size:13px; vertical-align:top">Integer</td><td style="word-wrap:break-word; width:273px; height:32px; font-family:Verdana; font-size:13px; vertical-align:top">事件生成时的时间戳</td></tr><tr><td style="word-wrap:break-word; width:167px; height:32px">target</td><td style="word-wrap:break-word; width:91px; height:32px; font-family:Verdana; font-size:13px; vertical-align:top">Object</td><td style="word-wrap:break-word; width:273px; height:32px; font-family:Verdana; font-size:13px; vertical-align:top">触发事件的组件的一些属性值集合</td></tr><tr><td style="word-wrap:break-word; width:167px; height:32px">currentTarget</td><td style="word-wrap:break-word; width:91px; height:32px; font-family:Verdana; font-size:13px; vertical-align:top">Object</td><td style="word-wrap:break-word; width:273px; height:32px; font-family:Verdana; font-size:13px; vertical-align:top">当前组件的一些属性值集合</td></tr><tr><td style="word-wrap:break-word; width:167px; height:32px">touches</td><td style="word-wrap:break-word; width:91px; height:32px; font-family:Verdana; font-size:13px; vertical-align:top">Array</td><td style="word-wrap:break-word; width:273px; height:32px; font-family:Verdana; font-size:13px; vertical-align:top">触摸事件，触摸点信息的数组</td></tr><tr><td style="word-wrap:break-word; width:167px; height:32px">detail</td><td style="word-wrap:break-word; width:91px; height:32px; font-family:Verdana; font-size:13px; vertical-align:top">Object</td><td style="word-wrap:break-word; width:273px; height:32px; font-family:Verdana; font-size:13px; vertical-align:top">额外的信息</td></tr></tbody></table></div><div style="white-space:pre-wrap; line-height:1.7; font-size:14px"><span style="font-size:18px; font-family:Verdana"><strong>【6】引用</strong></span></div><div style="white-space:pre-wrap; line-height:1.7; font-size:14px"><span style="font-family:'Microsoft YaHei',STXihei"><strong>import</strong></span></div><div style="white-space:pre-wrap; line-height:1.7; font-size:14px"><span style="font-size:13px; font-family:Consolas; color:#333333; background-color:#eeeeee">import</span><span style="font-size:13px; font-family:Verdana">可以在该文件中使用目标文件定义的</span><span style="font-size:13px; font-family:Consolas; color:#333333; background-color:#eeeeee">template</span><span style="font-size:13px; font-family:Verdana">，如：在item.wxml中定义了一个叫</span><span style="font-size:13px; font-family:Consolas; color:#333333; background-color:#eeeeee">item</span><span style="font-size:13px; font-family:Verdana">的</span><span style="font-size:13px; font-family:Consolas; color:#333333; background-color:#eeeeee">template</span><span style="font-size:13px; font-family:Verdana">：</span></div><div style="white-space:pre-wrap; line-height:1.7; font-size:14px"><pre name="code" class="javascript"><!-- item.wxml --><template name="item">  <text>{{text}}</text></template>

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

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

include

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

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