摘要：監(jiān)聽點贊事件廣播重點在這里我的動態(tài)頁面收到點贊變化通知進行更新操作監(jiān)聽發(fā)布事件廣播重點在這里我的動態(tài)頁面收到發(fā)布動態(tài)通知進行更新操作重點在這里至此，我們在小程序中完美的實現(xiàn)了跨頁面組件多頁面數(shù)據(jù)同步。

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

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

為了更好的理解該場景，我們再詳細描繪一下：

本場景包括4個頁面：動態(tài)廣場、個人中心、我的動態(tài)、動態(tài)詳情

首先，進入動態(tài)廣場頁，請求加載數(shù)據(jù)，展示動態(tài)列表，其中，我們用綠色內(nèi)陰影區(qū)分該條動態(tài)是“我的”，其他未加內(nèi)陰影的表示是“別人的”；

然后，進入個人中心頁，請求加載數(shù)據(jù)，展示獲贊數(shù)量；

點擊我的動態(tài)，進入我的動態(tài)頁，請求加載數(shù)據(jù)，展示我的動態(tài)列表；

點擊其中一條動態(tài)，進入動態(tài)詳情頁，請求加載數(shù)據(jù)，進行點贊操作；

在第5步中，點贊成功后，回退到我的動態(tài)頁，可以看到該條動態(tài)點贊狀態(tài)和數(shù)量發(fā)生變化，已經(jīng)同步；

再回到到個人中心頁，也可以看到獲贊數(shù)量發(fā)生變化，已經(jīng)同步；

再回到動態(tài)廣場頁，也可以看到對應的一條動態(tài)點贊狀態(tài)和數(shù)量發(fā)生變化，已經(jīng)同步；

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

如上圖所示，當我們在點贊時，4個頁面都已經(jīng)在是打開的（4個webview）。當我們點贊成功時，點擊左上解返回時，動態(tài)詳情頁的webview關(guān)掉，直接看到下一層webview，也就是我的動態(tài)頁，這個頁面是已經(jīng)存在的。其他頁面也是如此。

那對于這些已經(jī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ù)，有的話，就讀取出來去更新相應的動態(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ā)生時，就會執(zhí)行多次響應。請仔細觀察下圖！

為了避免該現(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/…

歡迎交流討論。

下面是廣告時間

還沒有看夠？知名小程序跨端框架 Taro 的作者，面對面教你使用 React Hooks 來重構(gòu)你的小程序，讓你更加優(yōu)雅地進行小程序的數(shù)據(jù)管理，更有小程序云開發(fā)，企業(yè)級小程序開發(fā)實踐等硬核內(nèi)容，要你好看！掃描下方二維碼查看具體詳情。