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