小程序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 用在<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 字符串 -->
<text>字符串:{{msg}}</text>
<!-- 2 数字类型 -->
<text>数字类型:{{num}}</text>
<!-- 3 布尔类型 -->
<text>布尔类型:{{booleanType}}</text>
<!-- 4 对象类型,会输出[object Object],对象的属性只能单个输出 -->
<text>对象类型:{{person}}</text>
<!-- 单个输出对象中的属性 -->
<text>{{person.age}},</text>
<text>{{person.height}},</text>
<text>{{person.tag}},</text>
<!-- 5 在标签的属性中使用--数据得用双引号括起来作为自定义属性使用 -->
<text data-num="{{num}}">自定义属性</text>
<!-- 6 使用Boolean类型充当属性时，checked -->
<view>
  <checkbox checked="{{isChecked}}"></checkbox>
</view>
<!-- 7 运算 → 表达式 -->
 <view>{{1+1}}</view>
 <view>{{'1' + '1'}}</view>
 <view>{{10%2 === 0 ? '偶数' : '奇数'}}</view>
 <!-- 8 列表循环 -->
<view wx:for="{{list}}" wx:key="id">
  数组循环  索引：{{index}}
  --
  值：{{item.name}}
</view>
<!-- 9 对象循环 -->
<view wx:for="{{person}}" wx:for-item="value" wx:for-index="key" wx:key="*this">
  对象循环  属性：{{key}}
  ---
  值：{{kvalueey}}
</view>
<!-- 10 block  占位符标签 -->
<view>
  <block>111</block>
  <block>222</block>
</view>
<!-- 11 条件渲染 wx:if="{{true/false}}" -->
<view>
  <view>条件渲染</view>
  <view wx:if="{{true}}">显示</view>
  <view wx:else>隐藏</view>
  <view hidden>利用hidden属性隐藏元素</view>
</view>