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

目前累計服務(wù)客戶近1000家，積累了豐富的產(chǎn)品開發(fā)及服務(wù)經(jīng)驗。以網(wǎng)站設(shè)計水平和技術(shù)實力，樹立企業(yè)形象，為客戶提供成都做網(wǎng)站、成都網(wǎng)站制作、網(wǎng)站策劃、網(wǎng)頁設(shè)計、網(wǎng)絡(luò)營銷、VI設(shè)計、網(wǎng)站改版、漏洞修補等服務(wù)。創(chuàng)新互聯(lián)建站始終以務(wù)實、誠信為根本，不斷創(chuàng)新和提高建站品質(zhì)，通過對領(lǐng)先技術(shù)的掌握、對創(chuàng)意設(shè)計的研究、對客戶形象的視覺傳遞、對應(yīng)用系統(tǒng)的結(jié)合，為客戶提供更好的一站式互聯(lián)網(wǎng)解決方案，攜手廣大客戶，共同發(fā)展進(jìn)步。

關(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ù)通信。

方法一

<!-- 當(dāng)自定義組件觸發(fā)“myevent”事件時，調(diào)用“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)
  }
 }
})

兄弟關(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.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);
}

爺孫關(guān)系

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

我們可以通過全局創(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ā)祖孫頁面對象對應(yīng)的方法。

<!--第一步：實現(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)];
  }
  <!--這一段代碼是關(guān)鍵，存儲的是__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();
  }
}

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

名稱欄目：小程序數(shù)據(jù)通信方法有哪些-創(chuàng)新互聯(lián)
網(wǎng)站鏈接：http://www.chinadenli.net/article20/iieco.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供云服務(wù)器、微信小程序、企業(yè)網(wǎng)站制作、品牌網(wǎng)站設(shè)計、網(wǎng)站維護(hù)、電子商務(wù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)