樂成鎮(zhèn)談?wù)勈褂肑S庫解決小程序跨頁傳遞消息和數(shù)據(jù)問題的方法

閱讀 44721  ·  發(fā)布日期 2020-08-24 17:26  ·  溫州優(yōu)光網(wǎng)絡(luò)科技有限公司|建站|APP小程序制作|做網(wǎng)站SEO推廣優(yōu)化
【摘要】 由于微信小程序 wx.navigateBack 方法并不支持返回傳值,導(dǎo)致頁面在返回后,不能方便地即時(shí)更新數(shù)據(jù)。一.需求分析此類需求大概意思是:A 頁面進(jìn)入 B 頁面,B 頁面返回并傳值給 A或在B頁面觸發(fā)事件時(shí),A頁面也有事件觸發(fā)改變。業(yè)務(wù)分析第一種:利用微信的 wx.setStorage,將數(shù)據(jù)緩存在小程序?qū)嵗齼?nèi)。... 【溫州小程序開發(fā),溫州微信公眾號,平陽做網(wǎng)站,平陽網(wǎng)站建設(shè)公司,平陽小程序商城制作,昆陽萬全做網(wǎng)站,鰲江水頭小程序,蕭江騰蛟微信公眾號,山門順溪南雁海西南麂鳳臥麻步懷溪網(wǎng)絡(luò)網(wǎng)店服務(wù),政采云網(wǎng)店管理服務(wù)】...

談?wù)勈褂肑S庫解決小程序跨頁傳遞消息和數(shù)據(jù)問題的方法

由于微信小程序 wx.navigateBack 方法并不支持返回傳值,導(dǎo)致頁面在返回后,不能方便地即時(shí)更新數(shù)據(jù)。
一.需求分析此類需求大概意思是:
A 頁面進(jìn)入 B 頁面,B 頁面返回并傳值給 A或在B頁面觸發(fā)事件時(shí),A頁面也有事件觸發(fā)改變。
業(yè)務(wù)分析第一種:
利用微信的 wx.setStorage,將數(shù)據(jù)緩存在小程序?qū)嵗齼?nèi)。
從 B 頁面返回 A 頁面時(shí),B 頁面先將數(shù)據(jù)緩存;然后在 A 頁面的 onshow 方法里,調(diào)用 wx.getStorage 讀取緩存來實(shí)現(xiàn)。
但為日后維護(hù)帶來大量隱患。
(用全局變量方法類似)第二種:
獲取前一個(gè) page 實(shí)例的方法,也可以實(shí)現(xiàn)此功能。
部分代碼如下:
這種方法的弊端:
因?yàn)檫M(jìn)入 B 頁面的入口可能是很多個(gè)。
這樣做,可能會(huì)導(dǎo)致獲取到的頁面實(shí)例不正確。
二.方法介紹下面進(jìn)入正題介紹onfire.js() onfire.js 是一個(gè)很簡單的事件分發(fā) JavaScript 庫(僅僅 0.9kb),簡潔實(shí)用。
它可以應(yīng)用于: 1.簡單的事件分發(fā)。
2.在 React、Vue.js、Angular 中用于跨組件的輕量級實(shí)現(xiàn)。
3.事件訂閱和發(fā)布。
使用思路:
(做過移動(dòng)端開發(fā)的都知道,類似于iOS的通知和安卓的廣播) a.A 頁面先訂閱一個(gè)事件,并定義處理方法; b.從 B 頁面返回時(shí),發(fā)送消息; c.A 頁面卸載時(shí),解除訂閱。
我的使用方法為:
A 頁面代碼:
我們可以在 A 頁面直接調(diào)用 onfire.on 方法,訂閱一個(gè)名字為 key 的消息。
在上面的代碼中,消息附帶的參數(shù)無傳參。
如果需要傳參的話,直接在 function 里增加參數(shù)即可,例如:
需要注意的是,一定要在 onUnload 里(在頁面被關(guān)閉時(shí))取消訂閱消息,并取消綁定 eventObj。
B 頁面里代碼在回調(diào)的地方加入以下代碼:
三.分析庫代碼從代碼中可以看出訂閱 on 方法的時(shí)候,實(shí)際調(diào)用 _bind 方法。
該方法利用一個(gè)二維數(shù)組,來存儲(chǔ)訂閱的對象。
而 fire 發(fā)送消息方法的實(shí)質(zhì),是調(diào)用 _fire_func 方法,通過名字(key)來遍歷訂閱者,然后通知訂閱者。
調(diào)用un方法,通過名字(key)來遍歷訂閱者,找到后移除。
推薦:
《小程序開發(fā)教程》以上就是談?wù)勈褂肑S庫解決小程序跨頁傳遞消息和數(shù)據(jù)問題的方法的詳細(xì)內(nèi)容,更多請關(guān)注php中文網(wǎng)其它相關(guān)文章!
微信
分享相關(guān)標(biāo)簽:
JS庫 小程序本文轉(zhuǎn)載于:
即速資訊,如有侵犯,請聯(lián)系[email protected]刪除
上一篇:
微信小程序網(wǎng)絡(luò)超時(shí)怎么辦?
下一篇:
app與小程序有什么區(qū)別?相關(guān)文章相關(guān)視頻微信小程序之購物車功能實(shí)現(xiàn)微信小程序 暗黑模式分析微信小程序底層原理微信小程序如何配置網(wǎng)絡(luò)請求超時(shí)?微信小程序網(wǎng)絡(luò)超時(shí)怎么辦?談?wù)勈褂肑S庫解決小程序跨頁傳遞消息和數(shù)據(jù)問題的方...(歐陽克)微信小程序與CMS后臺(tái)登錄小程序中心認(rèn)識(shí)小程序開發(fā)工具認(rèn)識(shí)小程序的目錄結(jié)構(gòu) [溫州做小程序]