導(dǎo)語：本文主要介紹在小程序中，多頁面之間如何保持?jǐn)?shù)據(jù)同步

在很多的產(chǎn)品中，都會(huì)存在跨頁面間需要數(shù)據(jù)同步，如下示例：

為了更好的理解該場景，我們?cè)僭敿?xì)描繪一下：

1. 本場景包括4個(gè)頁面：動(dòng)態(tài)廣場、個(gè)人中心、我的動(dòng)態(tài)、動(dòng)態(tài)詳情
2. 首先，進(jìn)入動(dòng)態(tài)廣場頁，請(qǐng)求加載數(shù)據(jù)，展示動(dòng)態(tài)列表，其中，我們用綠色內(nèi)陰影區(qū)分該條動(dòng)態(tài)是“我的”，其他未加內(nèi)陰影的表示是“別人的”；
3. 然后，進(jìn)入個(gè)人中心頁，請(qǐng)求加載數(shù)據(jù)，展示獲贊數(shù)量；
4. 點(diǎn)擊我的動(dòng)態(tài)，進(jìn)入我的動(dòng)態(tài)頁，請(qǐng)求加載數(shù)據(jù)，展示我的動(dòng)態(tài)列表；
5. 點(diǎn)擊其中一條動(dòng)態(tài)，進(jìn)入動(dòng)態(tài)詳情頁，請(qǐng)求加載數(shù)據(jù)，進(jìn)行點(diǎn)贊操作；
6. 在第5步中，點(diǎn)贊成功后，回退到我的動(dòng)態(tài)頁，可以看到該條動(dòng)態(tài)點(diǎn)贊狀態(tài)和數(shù)量發(fā)生變化，已經(jīng)同步；
7. 再回到到個(gè)人中心頁，也可以看到獲贊數(shù)量發(fā)生變化，已經(jīng)同步；
8. 再回到動(dòng)態(tài)廣場頁，也可以看到對(duì)應(yīng)的一條動(dòng)態(tài)點(diǎn)贊狀態(tài)和數(shù)量發(fā)生變化，已經(jīng)同步；

下面我們來探討一下這個(gè)場景的實(shí)現(xiàn)，在此之前，我們先要了解在點(diǎn)贊時(shí)，該場景中各頁面的狀態(tài)及關(guān)系。

如上圖所示，當(dāng)我們?cè)邳c(diǎn)贊時(shí)，4個(gè)頁面都已經(jīng)在是打開的（4個(gè)webview）。當(dāng)我們點(diǎn)贊成功時(shí)，點(diǎn)擊左上解返回時(shí)，動(dòng)態(tài)詳情頁的webview關(guān)掉，直接看到下一層webview，也就是我的動(dòng)態(tài)頁，這個(gè)頁面是已經(jīng)存在的。其他頁面也是如此。
那對(duì)于這些已經(jīng)存在的頁面，我們應(yīng)該如何同步更新數(shù)據(jù)呢？

當(dāng)然，如果比較懶，可以直接在onShow的時(shí)候重新拉數(shù)據(jù)渲染頁面。但顯然這是非常低級(jí)、不可取也沒必要的做法。重新拉數(shù)據(jù)需要耗時(shí)，頁面重新渲染也會(huì)看到閃屏，關(guān)鍵是根本沒必要重新拉數(shù)據(jù)，因?yàn)閿?shù)據(jù)發(fā)生了變化，前端是知道的。

所以我們可以這樣做，在動(dòng)態(tài)詳情頁點(diǎn)贊成功時(shí)，保存一個(gè)數(shù)據(jù)到全局globalData中去，回到我的動(dòng)態(tài)頁，在onShow中去檢測全局globalData中是否有點(diǎn)贊變化的數(shù)據(jù)，有的話，就讀取出來去更新相應(yīng)的動(dòng)態(tài)。

// 動(dòng)態(tài)詳情頁js
onLike() {
 ...
 success: () => {
 App.globalData.like = {
  fid: 10001,
  likes: 1,
  hasLike: true   
 }
 }
}

// 我的動(dòng)態(tài)頁js
onShow() {
 if(App.globalData.like !== null) {
 // 讀取globaldata.like數(shù)據(jù)去更新
 this.doUpdata()
 // 特別需要注意，更新完后，需要把globaldata.like清掉，不然下次onShow還會(huì)繼續(xù)走到該邏輯
 App.globalData.like = null
 }
}

這樣似乎可以達(dá)到我們的目的，無請(qǐng)求、純前端局部更新。

但這樣還存在一個(gè)問題，當(dāng)我們?cè)偻嘶氐絺€(gè)人中心頁時(shí)，要檢查下獲贊數(shù)量是否需要更新，以及回到動(dòng)態(tài)廣場頁時(shí)，也要檢查點(diǎn)贊有沒有發(fā)生變化。但在這兩個(gè)頁面onShow去判斷App.globalData.like時(shí)，都已經(jīng)檢測不到了，因?yàn)樵摂?shù)據(jù)已經(jīng)在我的動(dòng)態(tài)頁onShow中置為null了。

概括來說，在點(diǎn)贊時(shí)，只生產(chǎn)了一條數(shù)據(jù)，但有多個(gè)消費(fèi)者，哪個(gè)頁面先把數(shù)據(jù)消費(fèi)了，其他頁面也就無法檢測到數(shù)據(jù)了。

由此，我們想到那就使用EventBus來處理。
首先，我們自己實(shí)現(xiàn)一套簡單的EventBus。

源碼見：git.weixin.qq.com/xinyuanliu/…

在小程序啟動(dòng)時(shí)，初始化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)
 },
 ...
}

各個(gè)頁面在onLoad時(shí)，注冊(cè)監(jiān)聽事件(在此以我的動(dòng)態(tài)頁為例)：

// 我的動(dòng)態(tài).js
const App = getApp()

Page({
 data: {
 list: []
 },
 onLoad: function (options) {
 ...
 // 監(jiān)聽點(diǎn)贊事件廣播
 ↓ 重點(diǎn)在這里 ↓
 App.events.on('feedsLike', data => {
  console.log('我的動(dòng)態(tài)頁面收到點(diǎn)贊變化通知：', data)
  // 進(jìn)行更新操作
 })
 // 監(jiān)聽發(fā)布事件廣播
 ↓ 重點(diǎn)在這里 ↓
 App.events.on('publishFeeds', data => {
  console.log('我的動(dòng)態(tài)頁面收到發(fā)布動(dòng)態(tài)通知：', data)
  // 進(jìn)行更新操作
 })
 },
 ...
})

然后在動(dòng)態(tài)點(diǎn)贊時(shí)，發(fā)出事件通知。（這里一條動(dòng)態(tài)是封裝成組件，不屬于某一個(gè)頁面，點(diǎn)贊事件也是封裝在組件內(nèi)）

const App = getApp()

Component({
 properties: {...},
 methods: {
 // 點(diǎn)贊
 tapLike(e) {
  let { likes, hasLike } = this.data

  likes += (hasLike && -1 || 1)
  hasLike = !hasLike

  this.updateFeeds(likes, hasLike).then(() => {
  this.setData({
   likes,
   hasLike
  })

  // 廣播事件
  ↓ 重點(diǎn)在這里 ↓
  App.emitFeedsLike({
   uid: this.data.uid,
   fid: this.data.fid,
   likes,
   hasLike
  })
  })
 },
 ...
 }
})

這樣，我們便在小程序中實(shí)現(xiàn)了一套跨頁面數(shù)據(jù)同步的方案。

直觀上這已經(jīng)非常完美的實(shí)現(xiàn)了我們的需求。但在小程序中存在一個(gè)與我們常規(guī)經(jīng)驗(yàn)不太一致的地方。那就是頁面在關(guān)掉后，它里面的對(duì)象并沒有銷毀，這點(diǎn)是因?yàn)樾〕绦虻倪壿媽邮枪灿靡粋€(gè)進(jìn)程。

因此，每次進(jìn)入頁面，都會(huì)注冊(cè)一次監(jiān)聽事件，而退出頁面后，該事件并不會(huì)銷毀。這樣的話，多次重復(fù)進(jìn)入頁面，就會(huì)注冊(cè)多個(gè)重復(fù)事件，當(dāng)事件發(fā)生時(shí)，就會(huì)執(zhí)行多次響應(yīng)。請(qǐng)仔細(xì)觀察下圖！

為了避免該現(xiàn)象出現(xiàn)，我們切記要在頁面的onUnload事件中，主動(dòng)銷毀監(jiān)聽事件。

Page({
 eventsListener: {},
 data: {
 list: []
 },
 onLoad: function (options) {
 ...
 // 監(jiān)聽點(diǎn)贊事件廣播
 ↓ 重點(diǎn)在這里 ↓
 this.eventsListener.feedsLike = App.events.on('feedsLike', data => {
  console.log('我的動(dòng)態(tài)頁面收到點(diǎn)贊變化通知：', data)
  // 進(jìn)行更新操作
 })
 // 監(jiān)聽發(fā)布事件廣播
 ↓ 重點(diǎn)在這里 ↓
 this.eventsListener.publishFeeds= App.events.on('publishFeeds', data => {
  console.log('我的動(dòng)態(tài)頁面收到發(fā)布動(dòng)態(tài)通知：', data)
  // 進(jìn)行更新操作
 })
 },
 ↓ 重點(diǎn)在這里 ↓
 onUnload() {
 for (let i in this.eventsListener) {
  App.events.remove(i, this.eventsListener[i])
 } 
 },
 ...
})

至此，我們?cè)谛〕绦蛑型昝赖膶?shí)現(xiàn)了跨頁面/組件、多頁面數(shù)據(jù)同步。

本文研究的demo均可以小程序中體驗(yàn)，項(xiàng)目源碼：git.weixin.qq.com/xinyuanliu/…

以上所述是小編給大家介紹的小程序開發(fā)經(jīng)驗(yàn)：多頁面數(shù)據(jù)同步詳解整合，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論