浅谈小程序跨页面之间通信的思路方式（小程序跨页面数据同步）

提要：

小程序是由一个个page形成的，如果存在路由栈为[A,B]，A->B传值自然能够一层层通报，然而B->A通报数据就需要分外的协助形式，下列探讨多少种罕见的形式。

一、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')},})

二、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';},})

三、小程序自身供应的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)})}})

四、自界说EventBus
应用处景：A->B/B->A均可

好处：自界说实现，可扩年夜

缺点：对于wx停止扩年夜自界说变量，相同eventName能够会重复绑定监听事件

EventBus:参考这篇EventBus实现

应用示例：

 // app.jsconst 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');},})

五、获取页面栈实例getCurrentPages
应用处景：首如果B->A

好处：小程序原生供应，解决逻辑基础都在B页面

缺点：需要增加结婚页面的响应规定,且路由栈至少有两个页面存在

应用示例：

 // A页面Page({someActions(datas){console.log(datas); // 11111},})// B页面Page({someActions(){const pages = getCurrentPages();if (pages.length 
六、globalDataproxy
临时未试验这种形式，情理上可行；
响应的情理可参考Vue3的数据要挟以及定阅照顾相联合。

本文链接：https://addon.ciliseo.com/qian-tan-xiao-cheng-xu-kua-ye-mian-zhi-jian-tong-xin-de-si-lu-fang-shi.html