在先前的教學中寫到,微信小程式框架將程式分成邏輯層(.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)
#
以上是小程式開發基礎篇之資料綁定上篇(7)的詳細內容。更多資訊請關注PHP中文網其他相關文章!