談談使用JS函式庫解決小程式跨頁傳遞訊息和資料問題的方法

青灯夜游
發布: 2021-05-08 09:00:48
轉載
3022 人瀏覽過

談談使用JS函式庫解決小程式跨頁傳遞訊息和資料問題的方法

由於微信小程式 wx.navigateBack 方法並不支援返回傳值,導致頁面在返回後,無法方便地即時更新資料。

一.需求分析

這類需求大概意思是:A 頁面進入B 頁面,B 頁面返回並傳值給A或在B頁面觸發事件時,A頁面也有事件觸發改變。

談談使用JS函式庫解決小程式跨頁傳遞訊息和資料問題的方法

業務分析

第一種:利用微信的 wx.setStorage,將資料快取在小程式實例內。從 B 頁面返回 A 頁面時,B 頁面先將資料緩存;然後在 A 頁面的 onshow 方法裡,呼叫 wx.getStorage 讀取快取來實現。但為日後維護帶來大量隱憂。 (用全域變數方法類似)

第二種:取得前一個 page 實例的方法,也可以實作此功能。部分程式碼如下:

談談使用JS函式庫解決小程式跨頁傳遞訊息和資料問題的方法

這種方法的弊端:因為進入 B 頁面的入口可能是很多個。這樣做,可能會導致取得到的頁面實例不正確。

二.方法介紹

下面進入正題介紹onfire.js() 

onfire.js 是一個很簡單的事件分發JavaScript 函式庫(僅0.9kb),簡潔實用。它可以應用在: 

1.簡單的事件分發。 

2.在 React、Vue.js、Angular 中用於跨元件的輕量級實作。 

3.事件訂閱與發布。

使用想法:(做過行動裝置開發的都知道,類似iOS的通知和安卓的廣播) 

a.A 頁面先訂閱一個事件,並定義處理方法; 

b.從B 頁面返回時,發送訊息; 

c.A 頁面卸載時,解除訂閱。

我的使用方法是: 

A 頁面程式碼:

談談使用JS函式庫解決小程式跨頁傳遞訊息和資料問題的方法

#我們可以直接在A 頁面呼叫onfire.on 方法,訂閱一個名字為key 的訊息。在上面的程式碼中,訊息附帶的參數無傳參。
如果需要傳參的話,直接在function 裡增加參數即可,例如:

談談使用JS函式庫解決小程式跨頁傳遞訊息和資料問題的方法

需要注意的是,一定要在onUnload 裡(在頁面被關閉時)取消訂閱訊息,並取消綁定eventObj。

B 頁面裡程式碼在回呼的地方加入以下程式碼:

談談使用JS函式庫解決小程式跨頁傳遞訊息和資料問題的方法

#三.分析函式庫程式碼

從程式碼可以看出訂閱on 方法的時候,實際呼叫_bind 方法。此方法利用一個二維數組,來儲存訂閱的物件。

談談使用JS函式庫解決小程式跨頁傳遞訊息和資料問題的方法

而 fire 傳送訊息方法的實質,是呼叫 _fire_func 方法,透過名字(key)來遍歷訂閱者,然後通知訂閱者。呼叫un方法,透過名字(key)來遍歷訂閱者,找到後移除。

推薦:《小程式開發教學

以上是談談使用JS函式庫解決小程式跨頁傳遞訊息和資料問題的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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