小程序數(shù)據(jù)通信方法有哪些

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

關(guān)系劃分

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

1. 父子關(guān)系

2. 兄弟關(guān)系

3. 爺孫關(guān)系

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

父子關(guān)系

父子關(guān)系一般主要就是兩種情況：

父為頁(yè)面，子為組件 父為組件，子為組件

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

方法一

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

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

兄弟關(guān)系

兄弟關(guān)系同樣分為兩種情況：

1. 兄弟間都是頁(yè)面

2. 兄弟間都是組件

兄弟間都是頁(yè)面

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

方法二

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

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

<!--頁(yè)面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') 
}

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

爺孫關(guān)系

爺孫關(guān)系算是數(shù)據(jù)通信中最復(fù)雜的了，因?yàn)椴皇侵毕祩鬟f，若是通過 方法一 來監(jiān)聽，那就需要通過多級(jí)傳遞事件了，如果節(jié)點(diǎn)比較深，可想而知代碼是得多難理解且難以維護(hù)。

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

方法三

<!--第一步：實(shí)現(xiàn)一個(gè)事件總棧類-->
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(),
});

<!--第三步：在父頁(yè)面或者父組件中監(jiān)聽某個(gè)事件-->
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');
  }
}

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

<!--第一步：實(shí)現(xiàn)一個(gè)pageModel，用來緩存頁(yè)面對(duì)象-->
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)];
  }
  <!--這一段代碼是關(guān)鍵，存儲(chǔ)的是__route__屬性-->
  _getPageModelPath(page) {
    return page.__route__;
  }
}

export default PageModel ;

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

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

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

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

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