小程序03-WXML语法

Posted 2020-12-13 跳跃的皮皮虾

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

 WXML 具有以下几种能力

一、数据绑定

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

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

 

二、运算

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

 

三、列表渲染

1.wx:for

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

 

2.block wx:for

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

<block wx:for="{{[1, 2, 3]}}"> <view> {{index}}: </view> <view> {{item}} </view> </block>

3.wx:key

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

 

四、条件渲染

wx:if

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

<view wx:if="{{length > 5}}"> 1 </view> <view wx:elif="{{length > 2}}"> 2 </view> <view wx:else> 3 </view>

 

block wx:if

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

<block wx:if="{{true}}"> <view> view1 </view> <view> view2 </view> </block>

 .wxml文件

 1 <!-- 1 字符串 -->
 2 <text>字符串:{{msg}}</text>
 3 <!-- 2 数字类型 -->
 4 <text>数字类型:{{num}}</text>
 5 <!-- 3 布尔类型 -->
 6 <text>布尔类型:{{booleanType}}</text>
 7 <!-- 4 对象类型,会输出[object Object],对象的属性只能单个输出 -->
 8 <text>对象类型:{{person}}</text>
 9 <!-- 单个输出对象中的属性 -->
10 <text>{{person.age}},</text>
11 <text>{{person.height}},</text>
12 <text>{{person.tag}},</text>
13 <!-- 5 在标签的属性中使用--数据得用双引号括起来作为自定义属性使用 -->
14 <text data-num="{{num}}">自定义属性</text>
15 <!-- 6 使用Boolean类型充当属性时，checked -->
16 <view>
17   <checkbox checked="{{isChecked}}"></checkbox>
18 </view>
19 <!-- 7 运算 → 表达式 -->
20  <view>{{1+1}}</view>
21  <view>{{‘1‘ + ‘1‘}}</view>
22  <view>{{10%2 === 0 ? ‘偶数‘ : ‘奇数‘}}</view>
23  <!-- 8 列表循环 -->
24 <view wx:for="{{list}}" wx:key="id">
25   数组循环  索引：{{index}}
26   --
27   值：{{item.name}}
28 </view>
29 <!-- 9 对象循环 -->
30 <view wx:for="{{person}}" wx:for-item="value" wx:for-index="key" wx:key="*this">
31   对象循环  属性：{{key}}
32   ---
33   值：{{kvalueey}}
34 </view>
35 <!-- 10 block  占位符标签 -->
36 <view>
37   <block>111</block>
38   <block>222</block>
39 </view>
40 <!-- 11 条件渲染 wx:if="{{true/false}}" -->
41 <view>
42   <view>条件渲染</view>
43   <view wx:if="{{true}}">显示</view>
44   <view wx:else>隐藏</view>
45   <view hidden>利用hidden属性隐藏元素</view>
46 </view>