您好,登錄后才能下訂單哦!
導(dǎo)語:本文主要介紹在小程序中,多頁面之間如何保持數(shù)據(jù)同步
在很多的產(chǎn)品中,都會存在跨頁面間需要數(shù)據(jù)同步,如下示例:
為了更好的理解該場景,我們再詳細描繪一下:
下面我們來探討一下這個場景的實現(xiàn),在此之前,我們先要了解在點贊時,該場景中各頁面的狀態(tài)及關(guān)系。
如上圖所示,當我們在點贊時,4個頁面都已經(jīng)在是打開的(4個webview)。當我們點贊成功時,點擊左上解返回時,動態(tài)詳情頁的webview關(guān)掉,直接看到下一層webview,也就是我的動態(tài)頁,這個頁面是已經(jīng)存在的。其他頁面也是如此。
那對于這些已經(jīng)存在的頁面,我們應(yīng)該如何同步更新數(shù)據(jù)呢?
當然,如果比較懶,可以直接在onShow的時候重新拉數(shù)據(jù)渲染頁面。但顯然這是非常低級、不可取也沒必要的做法。重新拉數(shù)據(jù)需要耗時,頁面重新渲染也會看到閃屏,關(guān)鍵是根本沒必要重新拉數(shù)據(jù),因為數(shù)據(jù)發(fā)生了變化,前端是知道的。
所以我們可以這樣做,在動態(tài)詳情頁點贊成功時,保存一個數(shù)據(jù)到全局globalData中去,回到我的動態(tài)頁,在onShow中去檢測全局globalData中是否有點贊變化的數(shù)據(jù),有的話,就讀取出來去更新相應(yīng)的動態(tài)。
// 動態(tài)詳情頁js onLike() { ... success: () => { App.globalData.like = { fid: 10001, likes: 1, hasLike: true } } } // 我的動態(tài)頁js onShow() { if(App.globalData.like !== null) { // 讀取globaldata.like數(shù)據(jù)去更新 this.doUpdata() // 特別需要注意,更新完后,需要把globaldata.like清掉,不然下次onShow還會繼續(xù)走到該邏輯 App.globalData.like = null } }
這樣似乎可以達到我們的目的,無請求、純前端局部更新。
但這樣還存在一個問題,當我們再退回到個人中心頁時,要檢查下獲贊數(shù)量是否需要更新,以及回到動態(tài)廣場頁時,也要檢查點贊有沒有發(fā)生變化。但在這兩個頁面onShow去判斷App.globalData.like時,都已經(jīng)檢測不到了,因為該數(shù)據(jù)已經(jīng)在我的動態(tài)頁onShow中置為null了。
概括來說,在點贊時,只生產(chǎn)了一條數(shù)據(jù),但有多個消費者,哪個頁面先把數(shù)據(jù)消費了,其他頁面也就無法檢測到數(shù)據(jù)了。
由此,我們想到那就使用EventBus來處理。
首先,我們自己實現(xiàn)一套簡單的EventBus。
源碼見:git.weixin.qq.com/xinyuanliu/…
在小程序啟動時,初始化EventBus:
const Event = require('/util/events.js').default App({ events: null, onLaunch(options) { this.initEvents() // doOtherThings }, initEvents() { this.events = new Event() }, emitFeedsLike(data) { this.events.emit('feedsLike', data) }, emitPublishFeeds(data) { this.events.emit('publishFeeds', data) }, ... }
各個頁面在onLoad時,注冊監(jiān)聽事件(在此以我的動態(tài)頁為例):
// 我的動態(tài).js const App = getApp() Page({ data: { list: [] }, onLoad: function (options) { ... // 監(jiān)聽點贊事件廣播 ↓ 重點在這里 ↓ App.events.on('feedsLike', data => { console.log('我的動態(tài)頁面收到點贊變化通知:', data) // 進行更新操作 }) // 監(jiān)聽發(fā)布事件廣播 ↓ 重點在這里 ↓ App.events.on('publishFeeds', data => { console.log('我的動態(tài)頁面收到發(fā)布動態(tài)通知:', data) // 進行更新操作 }) }, ... })
然后在動態(tài)點贊時,發(fā)出事件通知。(這里一條動態(tài)是封裝成組件,不屬于某一個頁面,點贊事件也是封裝在組件內(nèi))
const App = getApp() Component({ properties: {...}, methods: { // 點贊 tapLike(e) { let { likes, hasLike } = this.data likes += (hasLike && -1 || 1) hasLike = !hasLike this.updateFeeds(likes, hasLike).then(() => { this.setData({ likes, hasLike }) // 廣播事件 ↓ 重點在這里 ↓ App.emitFeedsLike({ uid: this.data.uid, fid: this.data.fid, likes, hasLike }) }) }, ... } })
這樣,我們便在小程序中實現(xiàn)了一套跨頁面數(shù)據(jù)同步的方案。
直觀上這已經(jīng)非常完美的實現(xiàn)了我們的需求。但在小程序中存在一個與我們常規(guī)經(jīng)驗不太一致的地方。那就是頁面在關(guān)掉后,它里面的對象并沒有銷毀,這點是因為小程序的邏輯層是共用一個進程。
因此,每次進入頁面,都會注冊一次監(jiān)聽事件,而退出頁面后,該事件并不會銷毀。這樣的話,多次重復(fù)進入頁面,就會注冊多個重復(fù)事件,當事件發(fā)生時,就會執(zhí)行多次響應(yīng)。請仔細觀察下圖!
為了避免該現(xiàn)象出現(xiàn),我們切記要在頁面的onUnload事件中,主動銷毀監(jiān)聽事件。
Page({ eventsListener: {}, data: { list: [] }, onLoad: function (options) { ... // 監(jiān)聽點贊事件廣播 ↓ 重點在這里 ↓ this.eventsListener.feedsLike = App.events.on('feedsLike', data => { console.log('我的動態(tài)頁面收到點贊變化通知:', data) // 進行更新操作 }) // 監(jiān)聽發(fā)布事件廣播 ↓ 重點在這里 ↓ this.eventsListener.publishFeeds= App.events.on('publishFeeds', data => { console.log('我的動態(tài)頁面收到發(fā)布動態(tài)通知:', data) // 進行更新操作 }) }, ↓ 重點在這里 ↓ onUnload() { for (let i in this.eventsListener) { App.events.remove(i, this.eventsListener[i]) } }, ... })
至此,我們在小程序中完美的實現(xiàn)了跨頁面/組件、多頁面數(shù)據(jù)同步。
本文研究的demo均可以小程序中體驗,項目源碼:git.weixin.qq.com/xinyuanliu/…
以上所述是小編給大家介紹的小程序開發(fā)經(jīng)驗:多頁面數(shù)據(jù)同步詳解整合,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對億速云網(wǎng)站的支持!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。