浅谈小程序跨页面之间通信的几种方式
本篇文章给大家分享几种常见的小程序跨页面之间通信的方式，有需要的可以参考。
小程序是由一个个page构成的，如果存在路由栈为[A,B]，A->B传值自然可以一层层传递，但是B->A传递数据就需要额外的辅助方式，以下讨论几种常见的方式。
1、localStorage + onShow
应用场景：A->B/B->A 都可
优点：简单操作，易理解
缺点：调用到storage，有可能设置失败；且设置后是持久缓存，可能污染原逻辑，应及时删除
应用示例：
// 以A->B示例
// A 页面
Page({
onShow(){
if(wx.getStorageSync('$datas')){
console.log(wx.getStorageSync('$datas')) // 11111
}
},
})
// B 页面
Page({
someActions(){
wx.setStorageSync('$datas','11111')
},
})
2、globalData + onShow
应用场景：A->B/B->A 都可
优点：简单操作，易理解；直接操作globalData对象，相比于storage执行效率更高
缺点：设置后是小程序生命周期内都可访问，可能污染原逻辑，应及时删除
应用示例：
// 以A->B示例
// A 页面
const app = getApp();
Page({
onShow(){
if(app.globalData.$datas){
console.log(app.globalData.$datas) // 11111
}
},
})
// B 页面
const app = getApp();
Page({
someActions(){
app.globalData.$datas = '11111';
},
})
3、小程序本身提供的 EventChannel
应用场景：主要是 B->A
优点：小程序原生提供，可随时销毁
缺点：仅限制在navigateTo中，且要求基础库版本不低于2.7.3
应用示例：
// A页面
wx.navigateTo({
url: 'B?id=1',
events: {
// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
acceptDataFromOpenedPage: function(data) {
console.log(data)
},
someEvent: function(data) {
console.log(data)
}
...
},
success: function(res) {
// 通过eventChannel向被打开页面传送数据
res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })
}
})
// B页面
Page({
onLoad: function(option){
console.log(option.query)
const eventChannel = this.getOpenerEventChannel()
eventChannel.emit('acceptDataFromOpenedPage', {data: 'test'});
eventChannel.emit('someEvent', {data: 'test'});
// 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
eventChannel.on('acceptDataFromOpenerPage', function(data) {
console.log(data)
})
}
})
4、自定义EventBus
应用场景：A->B/B->A 都可
优点：自定义实现，可扩展
缺点：对wx进行扩展自定义变量，相同eventName可能会重复绑定监听事件
EventBus: 参考这篇EventBus实现
应用示例：
// app.js
const EventBus = require('./utils/eventBus.js');
App({
onLaunch(){
// 将eventBus初始到wx上
wx['$uhomesBus'] = (function () {
if (wx['$uhomesBus']) return wx['$uhomesBus'];
return new EventBus();
})();
}
})
// A页面
Page({
someActions(){
wx.$uhomesBus.$on('$datas',(data)=>{
console.log(data); // 11111
})
},
})
// B页面
Page({
emitActions(){
wx.$uhomesBus.$emit('$datas', '11111');
},
})
5、获取页面栈实例 getCurrentPages
应用场景：主要是 B->A
优点：小程序原生提供，处理逻辑基本都在B页面
缺点：需要增加匹配页面的相应规则,且路由栈至少有两个页面存在
应用示例：
// A页面
Page({
someActions(datas){
console.log(datas); // 11111
},
})
// B页面
Page({
someActions(){
const pages = getCurrentPages();
if (pages.length < 2) return;
// 如果页面层级较多，可用循环去匹配到A页面；
// 此处仅做2个页面的示例
const prevPage = pages[pages.length - 1];
// 路由匹配到A
if (prevPage.route === 'A') {
prevPage.someActions('11111');
}
},
})
6、globalData proxy
暂时未试验这种方式，原理上可行；
相应的原理可参考Vue3的数据劫持和订阅通知相结合；
以上就是浅谈小程序跨页面之间通信的几种方式的详细内容，更多请关注毛票票其它相关文章！