WXML(WeiXin Markup Language)是MINA设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。
WXML具备数据绑定、列表渲染、条件渲染、模板、事件、引用等能力,下面逐一进行详细介绍。
数据绑定使用“Mustache”语法(双大括号)将变量包起来,可以作用于:
内容
{{ message }} Page({ data: { message: 'Hello MINA!' } })
组件属性(需要在双引号之内)
Page({ data: { id: 0 } })Page({ data: { id: 0 } })
控制属性(需要在双引号之内)
Page({ data: { condition: true } })
可以在{{}}内进行简单的运算,支持的有如下几种方式:
三元运算
算数运算
{{a + b}} + {{c}} + d Page({ data: { a: 1, b: 2, c: 3 } })
逻辑判断
字符串运算
{{"hello" + name}} Page({ data:{ name:"MINA" } })
也可以在Mustache内直接进行组合,构成新的对象或者数组。
数组
{{item}} Page({ data: { zero: 0 } })
对象
Page({ data: { a: 1, b: 2 } })
...展开对象,再构成新的对象
Page({ data: { obj1: { a: 1, b: 2 }, obj2: { c: 3, d: 4 } } })
最终组合成的对象是{a: 1, b: 2, c: 3, d: 4, e: 5}。
如果对象的 key和value相同,可以直接引用key。
template是模板,is="objectCombine"是指拼接对象的模板,下文会有模板的详细介绍。
Page({ data: { foo: 'my-foo', bar: 'my-bar' } })
注意:上述方式可以随意组合,但是如有存在变量名相同的情况,后边的会覆盖前面,不会添加出新的变量。
Page({ data: { obj1: { a: 1, b: 2 }, obj2: { b: 3, c: 4 }, a: 5 } })
最终组合成的对象是{a: 5, b: 3, c: 6}
在MINA中,用wx:if="{{condition}}"来判断是否需要渲染该代码块:
True
也可以用wx:elif和wx:else来添加一个else块:
<view wx:if="{{length > 5}}"> 1 </view> <view wx:elif="{{length > 2}}"> 2 </view> <view wx:else=""> 3 </view>
block wx:if
条件渲染多个组件标签时,使用
注意:
<block wx:if="{{true}}"> <view> view1 </view> <view> view2 </view> </block>
因为wx:if之中的模板也可能包含数据绑定,所有当wx:if的条件值切换时,MINA有一个局部渲染的过程,因为它会确保条件块在切换时销毁或重新渲染。
同时wx:if也是惰性的,如果在初始渲染条件为false,MINA什么也不做,在条件第一次变成真的时候才开始局部渲染。
相比之下,hidden就简单的多,组件始终会被渲染,只是简单的控制显示与隐藏。
一般来说,wx:if有更高的切换消耗而hidden有更高的初始渲染消耗。因此,如果需要频繁切换的情景下,用hidden更好,如果在运行时条件不大可能改变则wx:if较好。
(ps:频繁显隐用hidden,极少改变用wx:if。)
默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item。(下标:index,值:item)
<view wx:for="{{items}}"> {{index}}: {{item.message}} </view>
数据:
Page({ items: [{ message: 'foo', },{ message: 'bar' }] })
更改数组当前项变量名/下标名:wx:for-item/wx:for-index
{{idx}}: {{itemName.message}}
wx:for嵌套:
block wx:for
和block wx:if一样,wx:for也是控制属性,所以可以用在
{{index}}: {{item}}
模板(template)可以在模板中定义代码片段,然后在不同的地方调用。
使用name属性作为模板名字。内定义代码片段
使用is属性,声明需要的使用的模板,然后将模板所需要的data传入:
is属性可以使用Mustache语法,在运行时来决定具体需要渲染哪个模板: 模板拥有自己的作用域,只能使用data传入的数据。 事件是视图层与逻辑层通讯的方式,将用户行为传达到逻辑层。事件绑定在组件上,当事件触发时会执行逻辑层的事件处理函数,事件对象可以携带额外信息,如id, dataset, touches。 组件绑定事件处理函数 在相应的Page定义中写上相应的事件处理函数,参数是event。 log信息 事件分为冒泡事件和非冒泡事件 注:除上表之外的其他组件自定义事件都是非冒泡事件,如
使用模板
Page({
data: {
item: {
index: 0,
msg: 'this is a template',
time: '2016-09-26'
}
}
})
模板的作用域
事件
事件的使用方式
Page({
tapName: function(event) {
console.log(event)
}
})
{
"type": "tap",
"timeStamp": 1252,
"target": {
"id": "tapTest",
"offsetLeft": 0,
"offsetTop": 0,
"dataset": {
"hi": "MINA"
}
},
"currentTarget": {
"id": "tapTest",
"offsetLeft": 0,
"offsetTop": 0,
"dataset": {
"hi": "MINA"
}
},
"touches": [{
"pageX": 30,
"pageY": 12,
"clientX": 30,
"clientY": 12,
"screenX": 112,
"screenY": 151
}],
"detail": {
"x": 30,
"y": 12
}
}
事件分类
冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递。(子节点响应一次事件,父节点还会响应一次,直到根节点响应完成,所以有时候必须阻止事件冒泡)
非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递。
WXML的冒泡事件列表:
类型
触发条件
touchstart
手指触摸
touchmove
手指触摸后移动
touchcancel
手指触摸动作被打断,如来电提醒,弹窗
touchend
手指触摸动作结束
tap
手指触摸后离开
longtap
手指触摸后,超过350ms再离开