微信小程序開發教程(基礎篇)7-數據綁定上

在以前的教程中寫到，微信小程序框架將程序分爲邏輯層(.js文件)和視圖層(.wxml文件)。這是一種常見的UI和邏輯分離的程序設計方式，開發出來的程序更加靈活，易擴展。

這種程序設計方式一般要解決兩個問題:

UI層響應邏輯層邏輯和數據的變化
UI層將用戶的操做反饋到邏輯層

一般來講可讓UI層和邏輯層互相暴露接口給對方，不過出於對靈活性和擴展性的考慮，會引入中間層來進行管理，這樣能夠避免UI層和邏輯層之間的直接依賴。

微信小程序框架正是基於這種模式進行設計的，.wxml文件來描述UI層(微信官方名稱爲視圖層，教程後續也將用視圖層來命名)，.js文件來處理邏輯層，而微信的框架則做爲中間層管理二者之間的調用。

爲了更好的幫助開發者開發微信小程序，微信定義了一些語法和規則來幫助開發者鏈接視圖層和邏輯層。

數據綁定

顯示字符串內容

//page.wxml
<text class="user-motto">{{motto}}</text>

//page.js
 data: {
    motto: 'Hello World',
  },

經過將"{{motto}}"嵌入視圖層代碼中，界面會顯示"Hello World"

更改字符串內容

setData({
  motto:'Hello My World'
  })

當執行上述代碼後，界面會顯示"Hello My World"

上述部分有兩點須要說明:

1: 視圖層嵌入的是{{motto}}而不是{{data.motto}}，微信框架默認設定視圖層綁定的變量定義在Page對象的data屬性中，也就是說，若是變量須要綁定到視圖層，必定要定義data屬性中

2: 經過調用Page對象的setData(Page對象預約義)方法，能夠更新界面數據，可是直接設置變量是無效的，所以對於綁定到視圖層的變量，要永遠使用setData方法來設置變量值

顯示圖片
在開發工具默認生成的程序首頁，顯示了用戶的頭像，相關代碼以下:

//index.wxml
 <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>

//index.js
onLoad: function () {
    console.log('onLoad')
    var that = **this**
    //調用應用實例的方法獲取全局數據
    app.getUserInfo(function(userInfo){
      //更新數據
      that.setData({
        userInfo:userInfo
      })
    })
  }

image標籤的src屬性綁定了userInfo.avatarUrl變量，並在onLoad方法中經過調用setData方法設置userInfo。

屬性綁定

能夠將變量綁定到視圖組件的屬性值上(如上面image標籤的src屬性)，注意在綁定到屬性時，須要在外面加入一對雙引號。

src="{{userInfo.avatarUrl}}"

除了用於顯示圖片外，屬性綁定還有許多做用。

關聯數據

假設要作一個學生管理程序，頁面使用列表來展現用戶數據，當用戶點擊某一學生信息時，進入該學生的詳情頁頁面。
當獲取到用戶的點擊事件時，必需要知道點擊的是哪個學生的數據，這時能夠將學生的id綁定到視圖組件的id屬性中來進行數據關聯。

控制視圖的隱藏/顯示

能夠將變量綁定到視圖組件的hidden屬性中，經過更改組件hidden屬性的值，能夠控制組件是否顯示。

控制屬性
上面說到能夠經過屬性綁定的方法來控制視圖組件是否顯示，還能夠經過控制屬性來實現這一功能。

//Page.wxml
<view wx:if="{{condition}}"> </view>

//Page.js
Page({
  data: {
    condition: true
  }
})

經過綁定數據到wx:if屬性，能夠控制該組件是否顯示。
框架還提供了wx:elif和wx:else屬性，用法以下:

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

若是想同時控制多個視圖組件，可使用block wx:if

<block wx:if="{{true}}">
  <view> view1 </view>
  <view> view2 </view>
</block>

一樣，控制屬性綁定時也須要添加雙引號

wx:if vs hidden

通常來講，wx:if 有更高的切換消耗而 hidden 有更高的初始渲染消耗。所以，若是須要頻繁切換的情景下，用 hidden
更好，若是在運行時條件不大可能改變則 wx:if 較好。

關鍵字
框架提供了兩個關鍵字來表示真和假
true：boolean 類型的 true，表明真值。
false： boolean 類型的 false，表明假值。

代碼示例

<checkbox checked="{{false}}"> </checkbox>

特別注意：不要直接寫 checked="false"，其計算結果是一個字符串，轉成 boolean 類型後表明真值。

關於數據綁定的更多講述，敬請期待微信小程序開發教程(基礎篇)8-數據綁定下