微信標籤語言之頁面結構檔案--資料繫結、條件渲染
頁面結構檔案
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']]