189 8069 5689

小程序数据通信方法有哪些

这篇文章给大家分享的是有关小程序数据通信方法有哪些的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

目前成都创新互联已为1000多家的企业提供了网站建设、域名、网页空间、网站改版维护、企业网站设计、和布克赛尔蒙古网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

关系划分

在讨论都有哪些数据通信方式之前，我们先来定义一下，小程序页面、组件之间都有哪些关系。我总结了一下，大概分为以下3类：

  1. 父子关系

  2. 兄弟关系

  3. 爷孙关系

不同的关系里面，不同角色之间有可能是页面，也有可能是组件，接下来我们就一个个来揭示如何进行数据通信。

父子关系

父子关系一般主要就是两种情况：

父为页面，子为组件 父为组件，子为组件

这种关系可能是频率出现最高的了，毕竟大部分小程序页面都是以小而美为主，可能没有分的太细，碰到这种情况，我们可以通过在父页面监听子组件触发的事件来完成数据通信。

方法一





点击这个按钮将触发“myevent”事件
Component({
 methods: {
  onTap() {
   const myEventDetail = {} // detail对象，提供给事件监听函数
   const myEventOption = {} // 触发事件的选项
   this.triggerEvent('myevent', myEventDetail, myEventOption)
  }
 }
})

小程序数据通信方法有哪些 

兄弟关系

兄弟关系同样分为两种情况：

  1. 兄弟间都是页面

  2. 兄弟间都是组件

兄弟间都是页面

这种关系指的就是，同层次间的页面，简单理解其实就是页面之间的跳转，那从页面A跳到页面B，页面B如何修改页面A的数据呢？

方法二

页面生命周期里面都有 onShow``onHide 方法，通过 localStorage 或者 globalData 作为数据中转，进入到不同页面时，在前一个页面 onShow 里面取出数据，在后一个页面 onShow 里面存储数据，具体做法如下：


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);
}

小程序数据通信方法有哪些 

爷孙关系

爷孙关系算是数据通信中最复杂的了，因为不是直系传递，若是通过 方法一来监听，那就需要通过多级传递事件了，如果节点比较深，可想而知代码是得多难理解且难以维护。

我们可以通过全局创建一个事件总栈 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;


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对象缓存起来，之后在孙辈组件里面拿到祖孙的页面对象，从而触发祖孙页面对象对应的方法。


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();
  }
}

小程序数据通信方法有哪些

感谢各位的阅读！关于“小程序数据通信方法有哪些”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！


名称栏目：小程序数据通信方法有哪些
文章路径：http://cdxtjz.com/article/ppgged.html

其他资讯