小程序數(shù)據(jù)通信方法大全(推薦)

更新時間：2019年04月15日 11:41:20 作者：skinner

這篇文章主要介紹了小程序數(shù)據(jù)通信方法大全，文中詳細的介紹了小程序頁面、組件之間的三種關系進行通信，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

序

本文論述的是子或孫向父傳遞數(shù)據(jù)的情況，自下而上

相信大家平時在小程序開發(fā)中肯定遇到過頁面或者組件之間的數(shù)據(jù)通信問題，那小程序數(shù)據(jù)通信都有哪些方式呢？如何選擇合適的通信方式呢？這就是本文要討論的重點。

關系劃分

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

父子關系
兄弟關系
爺孫關系

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

父子關系

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

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

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

方法一

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

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

兄弟關系

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

兄弟間都是頁面
兄弟間都是組件

兄弟間都是頁面

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

方法二

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

<!--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的方式 清除數(shù)據(jù)-->
  getApp().globalData.count = null
  <!---->
}
onHide(){
  wx.removeStorageSync('count') 
}

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

爺孫關系

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

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

方法三

<!--第一步：實現(xiàn)一個事件總棧類-->
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 觸發(fā)
  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(),
});

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


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

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

<!--第一步：實現(xiàn)一個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();
  }
}