微信小程序官方文檔中解釋說：事件是用于子組件向父組件傳遞數(shù)據(jù)，可以傳遞任意數(shù)據(jù)。

小程序開發(fā)中的事件是指視圖層到邏輯層的通訊方式，主要是可以將用戶的行為反饋到邏輯層進(jìn)行處理。事件可以綁定在組件上，當(dāng)達(dá)到觸發(fā)事件，就會(huì)執(zhí)行邏輯層中對(duì)應(yīng)的事件處理函數(shù)，對(duì)象可以攜帶額外信息，如?id,?dataset,?touches。

匯總來說小程序的事件是一種處理用戶交互的方式，通過監(jiān)聽用戶的操作行為，觸發(fā)相應(yīng)的事件來處理具體的業(yè)務(wù)邏輯和顯示效果。小程序事件主要包括用戶操作事件和自定義事件，開發(fā)人員需要了解這些事件的方法和機(jī)制，以便正確地處理用戶的操作，并實(shí)現(xiàn)良好的用戶體驗(yàn)。

?

事件分類

小程序開發(fā)中的事件分為冒泡事件和非冒泡事件：

1、冒泡事件

當(dāng)一個(gè)組件上的事件被觸發(fā)后，該事件會(huì)向父節(jié)點(diǎn)傳遞。例如下圖所示：

?

2、非冒泡事件

當(dāng)一個(gè)組件上的事件被觸發(fā)后，該事件不會(huì)向父節(jié)點(diǎn)傳遞。無特殊聲明都是非冒泡事件，如 form 的submit事件，input 的input事件，scroll-view 的 scroll 事件。

案例實(shí)操演示

具體如何操作我們這里以 WXML 為例，從底層邏輯上來講，在我們還沒有進(jìn)行事件綁定時(shí)，只在小程序的 WXML 結(jié)構(gòu)中聲明了一個(gè)鍵值對(duì)。

將 WXML 進(jìn)行 virtualDOM 編譯，這里的編譯就是 virtualDOM 使用過的 $gwx 函數(shù)，一起來看下聲明的 tap 鍵值對(duì)編譯在了哪里。

?可以看到上面找到聲明事件標(biāo)記的層級(jí)中，attr 屬性內(nèi)部有 bindtap: bindTextTap 鍵值對(duì)。那么這個(gè) DOM 結(jié)構(gòu)是怎么進(jìn)行事件解析的呢？

解析的算法在底層基礎(chǔ)庫 WAWebview.js 文件中，我們現(xiàn)在此提前解析一下事件模塊完整的流程，為了防止到后面底層基礎(chǔ)庫章節(jié)再講的話，知識(shí)形成不了閉環(huán)。

我這里解析的基礎(chǔ)庫版本為2.11.0。

底層基礎(chǔ)庫中解析 virtualDOM 函數(shù) applyProperties 源碼如下， attr 屬性解析，包含事件解析。

?

緊接著返回的l函數(shù)源碼：

?

可以看到 applyProperties 中有一個(gè) forIn 循環(huán)去遍歷 virtualDOM 中的 attr 屬性。

然后執(zhí)行e函數(shù)，這里可知e函數(shù)的參數(shù)及為attr對(duì)象中的屬性名稱key。

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

小程序事件系統(tǒng)總結(jié)

小程序中，事件是處理用戶交互的重要手段，通過監(jiān)聽用戶操作行為和自定義事件，可以實(shí)現(xiàn)復(fù)雜的業(yè)務(wù)邏輯和良好的用戶體驗(yàn)。開發(fā)人員需要了解不同的事件類型和觸發(fā)方法，根據(jù)不同的業(yè)務(wù)需求進(jìn)行靈活使用和處理。同時(shí)，良好的事件設(shè)計(jì)和處理也是提升應(yīng)用程序質(zhì)量和用戶滿意度的關(guān)鍵因素之一。

當(dāng)我們說到小程序想必大家第一時(shí)間想到的就是微信小程序、支付寶小程序等，其實(shí)除了將我們開發(fā)好的小程序上架到各個(gè)平臺(tái)之上，我們還可以通過集成FinClip SDK將小程序上架到自己的 App 中，這樣就能最大化的實(shí)現(xiàn)一次開發(fā)多端上架，大幅降少在開發(fā)中的人力和成本投入。文章來源地址http://www.zghlxwxcb.cn/news/detail-643365.html

到了這里，關(guān)于實(shí)踐分享：小程序事件系統(tǒng)設(shè)計(jì)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！