JS每日一题: 小程序页面之间如何通信?
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点推送当天的参考答案
- 注 绝不仅限于完成当天任务,更多是查漏补缺,学习群内其它同学优秀的答题思路
相关推荐
拓网科技 2020-11-23
85433664 2020-11-17
拓网科技 2020-11-13
mspgqrs 2020-10-19
xiaotutu0000 2020-10-15
kjyiyi 2020-10-10
大白机器人 2020-09-30
lifan0 2020-09-25
kunyus 2020-09-25
移动互联技术酒歌 2020-09-18
何砝 2020-09-16
anyvip 2020-09-15
zrhCSDN 2020-09-11
myCat 2020-09-09
lantingyue 2020-08-15
SanBa 2020-08-14
hiarxiaoliang 2020-08-05
urmsone 2020-08-03
虞凌云 2020-07-29