微信小程序筆記（2）：wxml相比於html的擴展

wxml的概述

WXML（WeiXin Markup Language）是框架設計的一套標籤語言，結合基礎組件、事件系統，可以構建出頁面的結構。
與html不同的是，爲了方便小程序的開發，wxml配合小程序渲染層與邏輯層分離的理念，新增了數據綁定、列表渲染、條件渲染、模板、引用功能。

數據綁定

小程序爲了做到數據與邏輯的分離，可以在wxml中使用在js中定義的變量名，並且通過在js中調用setData的方法實時改變小程序的頁面狀態！
具體寫法如下:

• wxml文件中

<view> {{message}} </view>

• js文件中

Page({
  data: {
    message: 'nihao!'
  }
})

change:function()//要改變頁面中message的內容只要綁定該事件即可！
{
    this.setData({
        message:"zaijian!"
    })
}

條件渲染

在wxml中可以通過條件渲染來實現一些簡單的邏輯交互。
具體的條件渲染屬性有三個:wx:if``wx:elif``wx:else
具體寫法如下:

• wxml文件中

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

hidden與wx:if的選擇與取捨

hidden的功能與wx:if非常相似，都可以控制某些條件來控制控件的渲染與隱藏。
不同的是，對於hidden來說不管最終是否被隱藏，它都會把控件先渲染出來。而wx:if則不然，如果條件判斷不需要渲染，那麼wx:if就不會渲染這個控件。
所以，在需要頻繁切換控件的渲染與隱藏時，建議使用hidden，否則使用wx:if更好一些。

列表渲染

類似於一般編程語言的for循環。如果小程序的開發中可以直接使用wx:for來渲染列表中的內容，而不用重複的編寫重複的html代碼。
具體寫法如下:

• wxml文件中：

<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>

• js文件中:

Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})

模板

暫未接觸，待補充

引用

同上