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

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

转载于:https://www.cnblogs.com/onetwo/p/6102284.html