页面结构文件
WXML(weixin markup language)是框架设计的一套标记语言,用于渲染界面,WXML的渲染原理,通过一套标记语言,在不同平台被解析为不同端的渲染文件。
WXML具有数据绑定、列表渲染、条件渲染、模板、事件等能力。
1. 数据绑定
小程序中页面渲染时,框架会将WXML文件同对应Page的data进行绑定。
1.1 简单绑定
<view>{{text}}</view>
<!--pages/static/third/third.wxml-->
<text>数据绑定</text>
<!--作为内容-->
<view>{{content}}</view>
<!--作为组件属性-->
<view id="item-{{id}}" style="border:{{border}}">作为渲染属性</view>
<!--作为控制属性-->
<view wx:if="{{showContent}}">作为渲染属性</view>
<!--关键字-->
<view>{{2}}</view>
<checkbox checked='{{false}}'></checkbox>
/**
* 页面的初始数据
*/
data: {
border:'solid 1px #000',
id:1,
content:'内容',
showContent:false
}
1.2 运算
在{{}}内可以做一些简单的运算,支持的运算有三元运算、算数运算、逻辑判断、字符串运算,这些运算均符合js规则。
1.3 组合
data中的数据可以在模板再次组合成新的数据结构,这种组合常常在数组或对象中使用。
2. 条件渲染
2.1 wx:if="{{判断条件}}"
<view wx:if="{{number1>23}}">你的年龄大于23</view>
<view wx:elif="{{number1==23}}">你的年龄等于23</view>
<view wx:else>你的年龄小于23</view>
2.2 block wx:if
wx: if是一个控制属性,可以添置在任何组件标签上,但如果需要包装多个组件,又不影响布局,这时就需要使用<block/>标签将需要包装的组件放置在里面,通过wx:if作判断。<block/>不是一个组件,仅仅是一个包装元素,页面渲染过程中不做任何渲染,由属性控制。
2.3 wx:if与hidden
两者都可以决定组件是否显示,两者之间的区别在于:wx:if控制是否渲染条件块内的模板,当其条件值切换时,会触发局部渲染以确保条件块在切换时销毁或重新渲染。而hidden控制组件是否显示,组件始终会被渲染,只是简单控制显示与隐藏,并不会触发重新渲染和销毁。
由于wx:if会触发框架局部渲染过程,在频繁切换状态的场景中,会产生较大的消耗,此时应尽量使用hidden;在运行时条件变动不大的场景中我们使用wx:if,这样能够给保证页面的高效的渲染,而不用把所有组件都渲染出来。
2.4 列表渲染
wx:for=“{{}}” 组件的wx:for控制属性用于遍历数组,重复渲染该组件,遍历过程中当前项的下标变量名默认为index,数组当前项变量名默认为item
<view wx:for="{{myArray}}">{{index}}:{{item}}</view>
data: {
myArray:['xu','shuai']
}
wx:for-index
wx:for-item
<view wx:for="myArrayObject" wx:for-item="myItem" wx:for-index="myIndex">{{myIndex}}:{{myItem}}</view>
data: {
myArrayObject:[{name:'xushuai'},{name:'zhudapang'}]
}
<view wx:for="{{myArrayObject}}" wx:for-item="myItem" wx:for-index="myIndex">{{myIndex}}:{{myItem.name}}</view>
须知,一般我们不必修改index、item变量名,当当wx:for出现多层嵌套使用时,就有必须要设置变量名。
<view wx:for="{{mySecArray}}" wx:for-index="myIndex" wx:for-item="myItem">
<block wx:for="{{myItem}}" wx:for-index="subIndex" wx:for-item="subItem">
{{subItem}}
</block>
</view>
mySecArray:[['ww','rr','tt'],['ff','gg','tr']]