浅谈小程序跨页面通信的几种方式(小程序跨页面的数据同步)

本文将与大家分享几种常见的小程序跨页面通信方式。如果有需要，可以参考他们。

小程序由页面组成。如果有[A，B]的路由栈，A->；b的值自然可以逐层传递，但是B->: A需要额外的辅助方法来传递数据，下面讨论几种常见的方法。【相关学习推荐:小程序开发教程】

1.localStorage+onShow应用场景:a->:B/B->；一个公爵

优点:操作简单，容易理解。

缺点:调用存储时，设置可能会失败；而且是设置后的永久缓存，可能会污染原有逻辑，要及时删除。

应用示例:

//with a->:例b//A page page({ on show(){ if(wx . getstoragesync( # 39；$ datas # 39)){ console . log(wx . getstoragesync( # 39；$ datas # 39)//1111}}，})/b Page({ some actions(){ wx . setstoragesync( # 39；$ datas # 39,'11111'} },})2.globalData+onShow应用场景:A->；B- gt；一个公爵

优点:操作简单，易于理解；直接操作globalData对象比存储更高效。

缺点:设置后，小程序在其生命周期内可以访问，可能会污染原有逻辑，应及时删除。

应用示例:

//with a->:Exle b//A page const app = getApp()；Page ({onshow () {if (app。globaldata。$ datas) {console.log (app。globaldata。$ datas)//1111}})//b页面常量app = getApp()；page({ some actions(){ app . global data . $ datas = # 39；11111'；}}) 3.小程序本身提供的EventChannel应用场景:主要是B->: A

优点:原生提供小程序，随时可以销毁。

缺点:仅限于navigateTo，要求基本库版本至少2.7.3。

应用示例:

//A page wx . navigate to({ URL: # 39；b？id = 1 # 39，events: {//为指定事件添加一个监听器，以获取从打开的页面传输到当前页面的数据acceptdatafrompendpage:function(data){ console . log(data)}，Some event:function(data){ console . log(data)}...}，success:function(RES){//Send data RES . event channel . emit( # 39；acceptDataFromOpenerPage # 39，{数据: # 39；测试 # 39；}}}})//b页({ onload:function(option){ console . log(option . query)const event channel = this . getopenereventchannel()event channel . emit( # 39；acceptDataFromOpenedPage # 39，{数据: # 39；测试 # 39；});event channel . emit( # 39；someEvent # 39，{数据: # 39；测试 # 39；});//监听acceptDataFromOpenerPage事件，获取数据event channel( # 39；acceptDataFromOpenerPage # 39，function(data){ console . log(data)} })4。自定义EventBus应用场景:A->:B/B->；一个公爵

优点:用户定义的实现，可扩展

缺点:当wx扩展为自定义变量时，同一个eventName可能会重复绑定监听事件。

EventBus:参考这个EventBus实现。

应用示例:

//app . jsconst event bus = require( # 39；。/utils/event bus . js # 39；);App({ onLaunch(){ //将eventBus初始化为wx on wx[ # 39；$ uhomesBus # 39]=(function(){ if(wx[ # 39；$ uhomesBus # 39])返回wx[ # 39；$ uhomesBus # 39];返回新的event bus()；})();}})//页面page ({some actions () {wx。$ uhomesbus$ on( # 39；$ datas # 39，(数据)= gt{ console.log(数据)；//1111})}，})/b Page ({emit actions () {wx。$ uhomesbus$ emit( # 39；$ datas # 39, '11111');}}) 5.获取页面堆栈实例getCurrentPages应用场景:主要是B->: A

优点:原生提供小程序，处理逻辑基本在b页。

缺点:需要添加相应的页面匹配规则，路由栈中至少有两个页面。

应用示例:

//一个页面page({某些动作(数据){console.log(数据))；//1111}，})//b页Page({ some actions(){ const pages = getcurrentpages())；if(pages . length lt；2)退货；//如果页面层次多，可以用循环来匹配A页；//这里只举例说明2 pages const prev page = pages[pages . length -1]；//路由匹配到一个if(prev page . route = = # 39；一 # 39；){ prev page . some actions( # 39；11111');}}}) 6.globalData代理暂时没有尝试过这种方法，原则上可行；

对应的原理可以参考Vue3的数据劫持和订阅通知相结合；

有关编程的更多信息，请访问:编程入门！！以上是小程序跨页面通信的几种方式的细节。请多关注主机参考其他相关文章！

这几篇文章你可能也喜欢：

• 如何实现小程序发送服务通知（小程序如何主动向用户发送通知）
• 如何获取小程序的unionid（如何获取小程序的页面路径）
• 生成海报的示例小程序（Java后端）（微信小程序生成海报演示）
• 什么是小程序？ 有哪些功能？（什么是小程序？有哪些功能？）
• 介绍如何用小程序生成参数二维码（二维码+小程序参数）

本文由主机参考刊发，转载请注明：浅谈小程序跨页面通信的几种方式(小程序跨页面的数据同步) https://zhujicankao.com/77665.html