转载-微信小程序-WXML

WXML

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

一 数据绑定

数据绑定.png

wxml中的动态数据均来自对应的page中的data

1 简单绑定

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

（1）内容

简单绑定.png

（2）组件属性（需要在双括号中）

组件属性.png

（3）控制属性（需要在双括号中）

控制属性.png

（4）关键字（需要在双引号之内）

2 运算

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

（1）三元运算

三元运算.png

（2）算数运算

算术运算.png

（3）逻辑判断

逻辑运算.png

（4）字符串运算

字符串运算.png

（5）数据路径运算

数据路径运算.png

3 组合

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

（1）数组

数组.png

（2）对象

对象.png

运算符（...）.png

组合的间接表达.png

变量名相同被覆盖.png

二 列表渲染

列表渲染.png

1 wx：for

在组件上使用wx：for控制属性绑定一个数组，
可以使用数组中的各项数据重复渲染该组件
默认数组的当前项的下标变量名是index，
数组当前项的变量名默认为item

列表渲染（1）.png

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

列表渲染2.png

wx：for也可以嵌套，

列表渲染3.png

2 block wx：for

类似block wx：if，
可以将wx：for用在标签上，
渲染一个包含多个节点的结构块

列表渲染4.png

3 wx： key

如果列表中项目的位置会动态改变或者有新的项目添加到列表中，
并且希望列表中的项目保持自己的特征和状态
（如  中的输入内容，的选中状态）
需要使用wx：key指定列表中项目的唯一标识符

wx：key的值有两种形式提供：

（1）字符串，代表在
for循环的array中item的某个property，
该property的值需要时列表中唯一的字符串或者数字，
不能动态改变

（2）保留关键字，*this代表在for循环中item本身，
表示需要item本身是一个唯一的字符串或者数字，
如：当数据改变触发渲染层重新渲染的时候，
会校正带有key的组件，框架会确保他们被重新排序，
而不是重新创建，确保使组件保持自身的状态
并且提高列表渲染时候的效率

注意：如果不提供wx：ley，会报warning
如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略

列表渲染5.png

列表渲染6.png

三 条件渲染

条件渲染.png

1 wx：if

在框架中，用wx：if=“{{condition}}”来判断是否需要渲染该代码块

条件渲染1.png

可以使用wx：elif 和 wx:else 添加一个else块

条件渲染2.png

2 block wx：if

wx：if是一个控制属性，需要将其添加到一个标签上，
如果想一次性判断多个组件标签，可以使用标签将多个组件包装起来，使用wx：if控制属性

条件渲染3.png

注意：不是一个组件，仅仅是一个包装元素，
不会在页面中做任何渲染，只接受控制属性

wx：if 和hidden的比较

因为wx：if之中的模板可能包含数据绑定，
当wx：if的条件值切换的时候，框架有一个局部渲染的过程，
它会确保条件块在切换时候销毁和重新渲染
同时，wx:if也是惰性的
如果初始渲染条件是false，框架什么也不做，
在条件第一次变成真，才开始局部渲染
hidden简单，组件始终会被渲染，只是简单的控制显示和隐藏
wx：if有更高的切换消耗
hidden有更高的初始渲染消耗，
如果需要频繁切换情景，用hidden
如果在运行时条件不大可能改变，wx：if较好

四 模板

模板.png

wxml提供模板，可以在模板中定义代码片段，然后在不同地方调用

1 定义模板

使用name属性，作为模板的名字，然后在