这篇文章给大家分享的是有关小程序数据通信方法有哪些的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
目前累计服务客户近1000家，积累了丰富的产品开发及服务经验。以网站设计水平和技术实力，树立企业形象，为客户提供成都做网站、成都网站制作、网站策划、网页设计、网络营销、VI设计、
网站改版、漏洞修补等服务。
创新互联建站始终以务实、诚信为根本，不断创新和提高建站品质，通过对领先技术的掌握、对创意设计的研究、对客户形象的视觉传递、对应用系统的结合，为客户提供更好的一站式互联网解决方案，携手广大客户，共同发展进步。
关系划分
在讨论都有哪些数据通信方式之前，我们先来定义一下，小程序页面、组件之间都有哪些关系。我总结了一下，大概分为以下3类：
父子关系
兄弟关系
爷孙关系
不同的关系里面，不同角色之间有可能是页面，也有可能是组件，接下来我们就一个个来揭示如何进行数据通信。
父子关系
父子关系一般主要就是两种情况：
父为页面，子为组件 父为组件，子为组件
这种关系可能是频率出现最高的了，毕竟大部分小程序页面都是以小而美为主，可能没有分的太细，碰到这种情况，我们可以通过在父页面监听子组件触发的事件来完成数据通信。
方法一
点击这个按钮将触发“myevent”事件
Component({
methods: {
onTap() {
const myEventDetail = {} // detail对象，提供给事件监听函数
const myEventOption = {} // 触发事件的选项
this.triggerEvent('myevent', myEventDetail, myEventOption)
}
}
})
兄弟关系
兄弟关系同样分为两种情况：
兄弟间都是页面
兄弟间都是组件
兄弟间都是页面
这种关系指的就是，同层次间的页面，简单理解其实就是页面之间的跳转，那从页面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://kswjz.com/article/iieco.html
