微信開發入門(五)資料綁定

零下一度
發布: 2017-05-23 15:33:24
原創
2073 人瀏覽過

前幾篇講述微信小程式開發工具使用、生命週期和事件。

本次講述微信小程式資料和視圖綁定

>>>資料視圖綁定

做前端開發的同學,尤其是WEB前端,每天都要跟視圖打交道,假如你是用過jQuery,你就能體會到jQuery的程式碼冗餘餘和操作不便性,需要手動管理視圖和物件的資料一致性。

以下資料和物件等同。

傳統的視圖和資料綁定

那麼微信小程式是透過什麼方法來管理視圖和物件綁定的呢? 狀態模式-單向資料流。

狀態模式定義一個對象,這個對象可以透過管理其狀態從而使得應用程式做出相應的變化。

 

簡單的講,物件狀態化,只要物件狀態發送變化,就通知頁面更新檢視元素。 
三個步奏: 
1. 辨識哪個UI元素被綁定了對應的物件。 
2. 監視對象狀態的變化。 
3. 將所有變更傳播到綁定的視圖上。

注意資料流向是單向的,即視圖變化不會影響物件狀態。

<view> {{ message }} </view>
登入後複製
Page({

 data: {

   message: &#39;Hello MINA!&#39;
 }

})
登入後複製

就這麼簡單完成視圖跟資料的綁定。

僅僅透過資料更新視圖是不夠的,使用者操作引起視圖更新,資料怎麼同步呢?

這裡要區分的是,使用者觸發事件不僅要考慮目前UI元素更新,還會透過目前元素更新其他視圖。

所以視圖上的資料都必須用過事件傳遞給對象,只有使用者操作視圖,才能取得數據,並更新對象狀態。
如下圖:

 

什麼是『事件』:

##事件是

視圖層到邏輯層的通訊方式。

想知道為什麼的童鞋可以了解數據單雙向流,這裡不介紹了。

再來看檢視與檢視之間是如何影響?

#流程說明: 

1. 檢視A由於使用者操作,觸發事件A 
2. 事件A處理函數中,更新物件A和物件B的狀態 
3. 由於物件A和B狀態變化,通知視圖A和B更新

我們以使用者登入為例,使用者點選(事件A)登入按鈕後,把按鈕變成停用不可點(視圖A),同時彈出等待框(視圖B). 

部分程式碼如下:

<view>

   <loading hidden="{{loadingHidden}}">正在登录...</loading>

   <button type="primary" size="default" disabled="{{disabled}}" bindtap="loginBtn">数据请求</button>

</view>
登入後複製
Page({

 data:{

   disabled: false,

   loadingHidden: true

 },

 //按钮事件

 loginBtn: function(event){

   //禁用按钮

   this.setData({disabled: true});

   //弹出正在登录框

   this.setData({loadingHidden: false});

 }

})
登入後複製
總結:

現在流行資料單雙向綁定,小程式使用了單向資料流,如果採用傳統的jQuery方式操作資料和視圖,開發效率低,開發者不買單。如果採用雙向資料流,程式執行效率偏低,且是邏輯層物件狀態不可控。

整體來說,小程式資料視圖單向綁定開發模式,讓開發者專注於

事件處理上,改變物件狀態,實現視圖更新。

【相關推薦】

1.

微信公眾號平台源碼下載

#2. 

微信投票源碼

#3.

 微信啦啦外送2.2.4解密開源版微信魔術方塊原始碼

以上是微信開發入門(五)資料綁定的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!