20190227
小程序页面之间如何通信?
首先将通信的模型列举出来, 分为以下几种
兄弟页面间通信
父路径页面向子路径页面通信
子路径页面向父路径页面通信
通信的方式
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 基本适用合任何JS可以运行的环境, 通过订阅一个事件，然后再发布事件的时间点收到消息
// 首先你得实现一个 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 过多时内存会不会爆不知道~_~
关于 JS 每日一题
JS 每日一题可以看成是一个语音答题社区 每天利用碎片时间采用 60 秒内的语音形式来完成当天的考题 群主在次日 0 点推送当天的参考答案
注 绝不仅限于完成当天任务，更多是查漏补缺，学习群内其它同学优秀的答题思路
点击加入答题