首頁  >  文章  >  微信小程式  >  小程式開發基礎篇之資料綁定上篇(7)

小程式開發基礎篇之資料綁定上篇(7)

Y2J
Y2J原創
2017-04-25 09:38:161799瀏覽

在先前的教學中寫到,微信小程式框架將程式分成邏輯層(.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:&#39;Hello My World&#39;
  })

當執行上述程式碼後,介面會顯示"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>

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

關於資料綁定的更多敘述,敬請期待
小程式開發基礎篇之資料綁定下(8)

#

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

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn