小程序數據通信方法有哪些

這篇文章給大家分享的是有關小程序數據通信方法有哪些的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

關系劃分

在討論都有哪些數據通信方式之前，我們先來定義一下，小程序頁面、組件之間都有哪些關系。我總結了一下，大概分為以下3類：

1. 父子關系

2. 兄弟關系

3. 爺孫關系

不同的關系里面，不同角色之間有可能是頁面，也有可能是組件，接下來我們就一個個來揭示如何進行數據通信。

父子關系

父子關系一般主要就是兩種情況：

父為頁面，子為組件 父為組件，子為組件

這種關系可能是頻率出現最高的了，畢竟大部分小程序頁面都是以小而美為主，可能沒有分的太細，碰到這種情況，我們可以通過在父頁面監聽子組件觸發的事件來完成數據通信。

方法一

<!-- 當自定義組件觸發“myevent”事件時，調用“onMyEvent”方法 -->
<component-tag-name bindmyevent="onMyEvent" />

<!-- 在自定義組件中 -->
<button bindtap="onTap">點擊這個按鈕將觸發“myevent”事件</button>
Component({
 methods: {
  onTap() {
   const myEventDetail = {} // detail對象，提供給事件監聽函數
   const myEventOption = {} // 觸發事件的選項
   this.triggerEvent('myevent', myEventDetail, myEventOption)
  }
 }
})

兄弟關系

兄弟關系同樣分為兩種情況：

1. 兄弟間都是頁面

2. 兄弟間都是組件

兄弟間都是頁面

這種關系指的就是，同層次間的頁面，簡單理解其實就是頁面之間的跳轉，那從頁面A跳到頁面B，頁面B如何修改頁面A的數據呢？

方法二

頁面生命周期里面都有 onShow``onHide 方法，通過 localStorage 或者 globalData 作為數據中轉，進入到不同頁面時，在前一個頁面 onShow 里面取出數據，在后一個頁面 onShow 里面存儲數據，具體做法如下：

<!--app.js-->
App({
  globalData: { count: 0 },
});

<!--頁面A-->
onShow(){
  let countValue = wx.getStorageSync('count');
  
  <!--globalData的方式-->
  let countValue = getApp().globalData.count;
  <!---->
  
  if(countValue){
    this.setData({
      count:countValue
    })
  }
  
  <!--globalData的方式 清除數據-->
  getApp().globalData.count = null
  <!---->
}
onHide(){
  wx.removeStorageSync('count') 
}

<!--頁面B-->
onShow(){
  <!--globalData的方式-->
  getApp().globalData.count = 1
  <!---->
  
  wx.setStorageSync('count',1);
}

爺孫關系

爺孫關系算是數據通信中最復雜的了，因為不是直系傳遞，若是通過 方法一 來監聽，那就需要通過多級傳遞事件了，如果節點比較深，可想而知代碼是得多難理解且難以維護。

我們可以通過全局創建一個事件總棧 EventBus ，利用這個 EventBus 來訂閱發布事件，也就是我們經常使用的 發布訂閱模式 ，那在小程序里面如何實現呢？

方法三

<!--第一步：實現一個事件總棧類-->
class EventBus {
  constructor() {
    this.bus = {};
  }
  // on 訂閱
  on(type, fun) {
    if (typeof fun !== 'function') {
      console.error('fun is not a function');
      return;
    }
    (this.bus[type] = this.bus[type] || []).push(fun);
  }
  // emit 觸發
  emit(type, ...param) {
    let cache = this.bus[type];
    if (!cache) return;
    for (let event of cache) {
      event.call(this, ...param);
    }
  }
  // off 釋放
  off(type, fun) {
    let events = this.bus[type];
    if (!events) return;
    let i = 0,
      n = events.length;
    for (i; i < n; i++) {
      let event = events[i];
      if (fun === event) {
        events.splice(i, 1);
        break;
      }
    }
  }
}
module.exports = EventBus;

<!--第二步：在app.js文件中引入-->
import EventBus from './common/event-bus/index.js';
App({
  eventBus: new EventBus(),
});

<!--第三步：在父頁面或者父組件中監聽某個事件-->
onLoad: function(options) {
  app.eventBus.on('add-count', this.addCount);
}
onUnload: function(options) {
  app.eventBus.off('add-count', this.addCount);
}


<!--第四步：在子組件里面觸發事件-->
methods: {
  addCount() {
    app.eventBus.emit('add-count');
  }
}

除此之外，還有一種方式，我們可以在每個頁面 onLoad 周期里面將該頁面的 pageModel 對象緩存起來，之后在孫輩組件里面拿到祖孫的頁面對象，從而觸發祖孫頁面對象對應的方法。

<!--第一步：實現一個pageModel，用來緩存頁面對象-->
class PageModel {
  constructor() {
    this.pageCache = {};
  }

  add(page) {
    let pagePath = this._getPageModelPath(page);
    this.pageCache[pagePath] = page;
  }

  get(path) {
    return this.pageCache[path];
  }

  delete(page) {
    delete this.pageCache[this._getPageModelPath(page)];
  }
  <!--這一段代碼是關鍵，存儲的是__route__屬性-->
  _getPageModelPath(page) {
    return page.__route__;
  }
}

export default PageModel ;

<!--第二步：app.js中引入-->
import PageModel from './common/page-model/index.js';

App({
  pageModel: new PageModel(),
});

<!--第三步：頁面onLoad周期里緩存頁面-->
onLoad: function(options) {
  app.pageModel.add(this);
}

<!--第四步：子孫獲取祖輩方法-->
methods: {
  addCount() {
    app.pageModel.get('pages/communicate/index').addCount();
  }
}

感謝各位的閱讀！關于“小程序數據通信方法有哪些”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！