小程序页面之间如何通信?

首先将通信的模型列举出来, 分为以下几种

• 兄弟页面间通信
• 父路径页面向子路径页面通信
• 子路径页面向父路径页面通信

通信的方式

• localStorage 本地存储
• globalData 全局对象
• eventBus 发布订阅
• PageModel 缓存整个pageModel至globalData

LocalStorage

利用onShow/onHide激活方法，通过localStorage传递数据

 onShow(){ let newHello = wx . getStorageSync ( '__data'); if (newHello ){ this .setData({ helloMsg: newHello });   // 清空上次通信数据  wx.clearStorageSync ( '__data' ); }} 

GlobalData

同localStorage一样，利用onShow/onHide激活方法，通过读写小程序globalData完成数据传递

 let app = getApp(); onShow(){ let newHello = app.$$data.helloMsg; if (newHello){ this.setData({ helloMsg: newHello }); // 清空上次通信数据 app.$$data.helloMsg =null; } }

EventBus

eventBus基本适用合任何ＪＳ可以运行的环境, 通过订阅一个事件，然后再发布事件的时间点收到消息

// 首先你得实现一个eventBus, 这里假设你已经实现了..// Page A onLoad(){ app.pubSub.on('hello',(msg)=>{ this.setData({ helloMsg:'hello :'+ msg }); }); },// Page B onLoad(){ app.pubSub.emit('hello', 'JS每日一题') },

PageModel

缓存页面PageModel, 通信时，直接找到要通信页面的PageModel,进而可以访问通信页面PageModel所有的属性，方法

// 在app.js中add及get实现 this.$$cache ={} add(pageModel){ // 添加时以__route__做为key，方便在其它页面调用 let pagePath =this.__route__; this.$$cache[pagePath]= pageModel; } get(pagePath){ // 同时直接取走相应的pageModel return this.$$cache[pagePath]; }// Page A 在onLoad 时将本身(this)存放到GlobalData中 onLoad(){ app.pages.add(this); },// Page B onLoad(){ // 拿到Page A所有属性及方法 console.log(app.pages.get( 'pages/a/b'))},

总结

• localstorage 同步会阻塞进程，异步可能会错过最佳取值时机
• globalData 直接操作内存，比localstorage更快，注意全局变量污染
• eventBus 方便灵活,推荐使用,注意解绑及重复绑定
• PageModel 思路很棒,但globalDatac存放的pageModel过多时内存会不会爆不知道~_~