頁面結構檔案

     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']]