小程序03-WXML语法

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

 WXML 具有以下几种能力

一、数据绑定

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

数据绑定使用 Mustache 语法（{{}}）将变量包起来

 

二、运算

{{}}中支持三元运算、算数运算、逻辑判断、字符串运算

 

三、列表渲染

1.wx:for

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

 

2.block wx:for

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

{{index}}: {{item}}

3.wx:key

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

 

四、条件渲染

wx:if

在框架中，使用 wx:if="" 来判断是否需要渲染该代码块：

1 2 3

 

block wx:if

因为 wx:if 是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个 标签将多个组件包装起来，并在上边使用 wx:if 控制属性。

view1 view2

 .wxml文件

 1 
 2 <text>字符串:{{msg}}text>
 3 
 4 <text>数字类型:{{num}}text>
 5 
 6 <text>布尔类型:{{booleanType}}text>
 7 
 8 <text>对象类型:{{person}}text>
 9 
10 <text>{{person.age}},text>
11 <text>{{person.height}},text>
12 <text>{{person.tag}},text>
13 
14 <text data-num="{{num}}">自定义属性text>
15 
16 <view>
17   <checkbox checked="{{isChecked}}">checkbox>
18 view>
19 
20  <view>{{1+1}}view>
21  <view>{{'1' + '1'}}view>
22  <view>{{10%2 === 0 ? '偶数' : '奇数'}}view>
23  
24 <view wx:for="{{list}}" wx:key="id">
25   数组循环  索引：{{index}}
26   --
27   值：{{item.name}}
28 view>
29 
30 <view wx:for="{{person}}" wx:for-item="value" wx:for-index="key" wx:key="*this">
31   对象循环  属性：{{key}}
32   ---
33   值：{{kvalueey}}
34 view>
35 
36 <view>
37   <block>111block>
38   <block>222block>
39 view>
40 
41 <view>
42   <view>条件渲染view>
43   <view wx:if="{{true}}">显示view>
44   <view wx:else>隐藏view>
45   <view hidden>利用hidden属性隐藏元素view>
46 view>