/ taohigo.com / 1浏览

小程序開發技術解析:事件系統設計

我們在小程序開發中可能會時常聽到事件系統這個詞,但卻對其背後的技術可能不是非常的理解,今天就準備通過一些實際案例的演示為大傢進行解釋和說明。

什麼是事件?

微信小程序官方文檔中解釋說:事件是用於子組件向父組件傳遞數據,可以傳遞任意數據。

小程序開發中的事件是指視圖層到邏輯層的通訊方式,主要是可以將用戶的行為反饋到邏輯層進行處理。事件可以綁定在組件上,當達到觸發事件,就會執行邏輯層中對應的事件處理函數,對象可以攜帶額外信息,如 id, dataset, touches。

匯總來說小程序的事件是一種處理用戶交互的方式,通過監聽用戶的操作行為,觸發相應的事件來處理具體的業務邏輯和顯示效果。小程序事件主要包括用戶操作事件和自定義事件,開發人員需要瞭解這些事件的方法和機制,以便正確地處理用戶的操作,並實現良好的用戶體驗。

事件分類

小程序開發中的事件分為冒泡事件和非冒泡事件:

1、冒泡事件

當一個組件上的事件被觸發後,該事件會向父節點傳遞。例如下圖所示:

2、非冒泡事件

當一個組件上的事件被觸發後,該事件不會向父節點傳遞。無特殊聲明都是非冒泡事件,如 form 的submit事件,input 的input事件,scroll-view 的 scroll 事件。

案例實操演示

具體如何操作我們這裡以 WXML 為例,從底層邏輯上來講,在我們還沒有進行事件綁定時,隻在小程序的 WXML 結構中聲明瞭一個鍵值對。

將 WXML 進行 virtualDOM 編譯,這裡的編譯就是 virtualDOM 使用過的 $gwx 函數,一起來看下聲明的 tap 鍵值對編譯在瞭哪裡。

可以看到上面找到聲明事件標記的層級中,attr 屬性內部有 bindtap: bindTextTap 鍵值對。那麼這個 DOM 結構是怎麼進行事件解析的呢?

解析的算法在底層基礎庫 WAWebview.js 文件中,我們現在此提前解析一下事件模塊完整的流程,為瞭防止到後面底層基礎庫章節再講的話,知識形成不瞭閉環。

底層基礎庫中解析 virtualDOM 函數 applyProperties 源碼如下, attr 屬性解析,包含事件解析。

緊接著返回的l函數源碼:

可以看到 applyProperties 中有一個 forIn 循環去遍歷 virtualDOM 中的 attr 屬性。

然後執行e函數,這裡可知e函數的參數及為attr對象中的屬性名稱key。

e函數中有很多的if,是用來判斷特殊的屬性名稱的,我們綁定的tap事件鍵值對是 bindtap: bindTextTap , key 也就是 bindtap ,事件綁定的前綴有很多比如 bind、catch,看到第10行左右的if中用正則if (n = e.match(/^(capture-)?(mut-)?(bind|catch):?(.+)$/)) 判斷 attr 中的屬性名是否為事件屬性。如果是事件屬性的話執行E函數,並且轉換為 exparser 組件系統中的 attr 屬性名稱 exparser:info-attr- 。

小程序事件系統總結

小程序中,事件是處理用戶交互的重要手段,通過監聽用戶操作行為和自定義事件,可以實現復雜的業務邏輯和良好的用戶體驗。開發人員需要瞭解不同的事件類型和觸發方法,根據不同的業務需求進行靈活使用和處理。同時,良好的事件設計和處理也是提升應用程序質量和用戶滿意度的關鍵因素之一。

當我們說到小程序想必大傢第一時間想到的就是微信小程序、支付寶小程序等,其實除瞭將我們開發好的小程序上架到各個平臺之上,我們還可以通過集成 FinClip SDK 將小程序上架到自己的 App 中,這樣就能最大化的實現一次開發多端上架,大幅降少在開發中的人力和成本投入。

什麼是挑高
列省志——吉林
列省志——吉林
2023年我竟然在茅臺京東自營店買到瞭問題飛天茅臺
2023年我竟然在茅臺京東自營店買到瞭問題飛天茅臺
遊記||巴拉格宗一日遊攻略!
遊記||巴拉格宗一日遊攻略!
聊一聊如何分步驟完成一款立體造型的木作
聊一聊如何分步驟完成一款立體造型的木作
【連載4】天津看房買房攻略之北辰區各版塊、新開熱賣樓盤推薦
【連載4】天津看房買房攻略之北辰區各版塊、新開熱賣樓盤推薦

0

  1. This post has no comment yet

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注