WXML

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

数据绑定

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

{{ message }}

Page({

data: {

message: 'Hello MINA!',

id: 0,

condition: true,

}

})

特别注意：不要直接写 checked="false"，其计算结果是一个字符串，转成 boolean 类型后代表真值。

运算

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

Hidden

1

2

3

view1

view2

{{a + b}} + {{c}} + d

{{"hello" + name}}

{{object.key}} {{array[0]}}

Page({

data: {

a: 1,

b: 2,

c: 3，

name: 'MINA'，

object: {

key: 'Hello '

},

array: ['MINA']，

}

})

wx:if 与 hidden的区别

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

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

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

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

组合

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

.....这个暂时没有用过不写。

列表渲染

wx:for

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

默认数组的当前项的下标变量名默认为 index，使用 wx:for-index 可以自定义数组当前下标的变量名, 数组当前项的变量名默认为 item。使用 wx:for-item 可以自定义数组当前元素的变量名：

{{index}}: {{item.product_name}}

{{productsIndex}}: {{productsItem.product_name}}

Page({

data: {

products: [{

product_name: 'book',

}, {

product_name: 'computer'

}]

}

})

wx:for也可以进行嵌套循环。九九乘法表。

{{i}} * {{j}} = {{i * j}}

我认为的双层循环。注意添加 wx:key="key"来防止报错。

{{shopgroupcart.shop_name}} >

{{shopcart.product_name}}

¥ {{shopcart.promote_price}}

这里有很多循环的注意事项 暂时不提及。

模板

还没有用过暂时不写。

事件

事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。事件对象可以携带额外信息，如 id, dataset, touches。

Click me!

Page({

//事件处理函数

tapName: function(e) {

e.currentTarget.dataset.id ==== WeChat

e.currentTarget.dataset.alphaBeta === 1 // - 会转为驼峰写法

e.currentTarget.dataset.alphabeta === 2 // 大写会转为小写

console.log(e)

}

})

常用的事件是tap(手指触摸后马上离开),事件绑定的方法是bind+tap,或者catch+tap,bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。

tap属于冒泡事件类型。

引用

引用是配合模板一起用的 暂时没有用到。