微信小程式 資料繫結詳解及例項

2022-10-07 07:36:07 字數 1308 閱讀 5500

微信小程式最近要火,火不火看看微信使用者就知道了,做前端的朋友可以大展身手,跟上腳步,這裡來介紹下微信小程式的資料繫結。

>>>資料檢視繫結

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

以下資料和物件等同。

傳統的檢視和資料繫結

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

狀態模式定義乙個物件,這個物件可以通過管理其狀態從而使得應用程式作出相應的變化。

簡單的講,物件狀態化,只程式設計客棧要物件狀態傳送變化,就通知頁面更新檢視元素。

三個步奏:

1. 識別哪個ui元素被繫結了相應的物件。

2. 監視物件狀態的變化。

3. 將所有變化傳播到繫結的檢視上。

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

} page(

})就這麼簡單完成檢視跟資料的繫結。

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

這裡要區分的是,使用者觸發事件不僅要考慮當前ui元素更新,還會通過當前元素更新其他檢視。

所以檢視上的資料都必須用過事件傳遞給物件,只有使用者操作檢視,才能獲取到資料,並更新物件狀態。

如下圖:

什麼是『事件』:

事件是檢視層到邏輯層的通訊方式。

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

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

流程說明:

www.cppcns.com檢視a由於使用者操作,觸發事件a

2. 事件a處理函式中,更新物件a和物件b的狀態

3. 由於物件a和b狀態變化,通知檢視a和b更新

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

部分**如下:

正在登入...

page(,

//按鈕事件

loginbtn: function(event));

//彈出正在登入框

this.setdata(); }

})總結:

現在流行資料單雙向繫結,小程式使用了單向資料流,如果採用傳統的jquery方式運算元據和檢視,開發效率低,開發者不買賬。如果採用雙向資料流,程式執行效率偏低,而且是邏輯層物件狀態不可控。

總體來說,小程式資料檢視單向繫結開發模式,讓開發者專注於事件處理上,改變物件狀態,實現檢視更新。

本文標題: 微信小程式 資料繫結詳解及例項

本文位址:

微信小程式 資料繫結

頁面 view 頁面 page 效果顯示 wxml item view 則此時這個view的id為0 js page wxml view js page checkbox 注意不要寫成checked false 這個的結果是乙個字串,轉成boolean型別後表示真.運算 hidden view wx...

微信小程式資料的接收詳解

1.wxml 日期 customer date 為我們需要接收的資料的欄位名 wx for 中的date 是我給需要接收的資料取的陣列名字,接收的資料可以為多個 2.wxss inputbox 3.js var enddate 這裡設定enddate為空,page 生命週期函式 監聽頁面載入 onl...

微信小程式 Template詳解及簡單例項

模板 wxml提供模板 template 可以在模板中定義 片段,然後在不同的地方使用。可以保證格式以及資料的相同。1 定義模板 使用 標籤定義模板,並將模板名稱命名為tempname,賦值給屬性name。在標籤內部,定義模板結構。如下 1 2 3 4 5 6 7 8 9 10 11 12 time...