小程序三：视图层之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>