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

目前成都創(chuàng)新互聯(lián)已為1000多家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)頁空間、網(wǎng)站改版維護(hù)、企業(yè)網(wǎng)站設(shè)計、和布克賽爾蒙古網(wǎng)站維護(hù)等服務(wù)，公司將堅持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

關(guān)系劃分

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

1. 父子關(guān)系

2. 兄弟關(guān)系

3. 爺孫關(guān)系

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

父子關(guān)系

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

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

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

方法一

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

兄弟關(guān)系

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

1. 兄弟間都是頁面

2. 兄弟間都是組件

兄弟間都是頁面

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

方法二

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

App({
  globalData: { count: 0 },
});


onShow(){
  let countValue = wx.getStorageSync('count');
  
  
  let countValue = getApp().globalData.count;
  
  
  if(countValue){
    this.setData({
      count:countValue
    })
  }
  
  
  getApp().globalData.count = null
  
}
onHide(){
  wx.removeStorageSync('count') 
}


onShow(){
  
  getApp().globalData.count = 1
  
  
  wx.setStorageSync('count',1);
}

爺孫關(guān)系

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

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


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對象緩存起來，之后在孫輩組件里面拿到祖孫的頁面對象，從而觸發(fā)祖孫頁面對象對應(yīng)的方法。

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)];
  }
  
  _getPageModelPath(page) {
    return page.__route__;
  }
}

export default PageModel ;


import PageModel from './common/page-model/index.js';

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


onLoad: function(options) {
  app.pageModel.add(this);
}


methods: {
  addCount() {
    app.pageModel.get('pages/communicate/index').addCount();
  }
}

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