小程式開發基礎篇之資料綁定上篇（7）

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

這種程式設計方式通常要解決兩個問題:

UI層回應邏輯層邏輯和資料的變化
UI層將​​使用者的操作回饋到邏輯層

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

微信小程式框架正是基於這種模式進行設計的，.wxml檔案來描述UI層(微信官方名稱為視圖層，教程後續也將用視圖層來命名)，.js檔案來處理邏輯層，而微信的框架則作為中間層管理兩者之間的呼叫。

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

資料綁定

顯示字串內容

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

//page.js
 data: {
    motto: &#39;Hello World&#39;,
  },

透過將"{{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(&#39;onLoad&#39;)
    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>

關於資料綁定的更多敘述，敬請期待

#

以上是小程式開發基礎篇之資料綁定上篇（7）的詳細內容。更多資訊請關注PHP中文網其他相關文章！