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

2019-11-19 11:46:47

字體：大中小

來源：轉載

供稿：網友

序

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

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

關系劃分

在討論都有哪些數據通信方式之前，我們先來定義一下，小程序頁面、組件之間都有哪些關系。我總結了一下，大概分為以下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)  } }})

兄弟關系

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

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

兄弟間都是頁面

這種關系指的就是，同層次間的頁面，簡單理解其實就是頁面之間的跳轉，那從頁面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();  }}