跨页面小程序之间通信的几种方式（如何在跨页面小程序之间传递值）

本文将分享几种常见的小程序跨页面通信方式，必要时可以参考。

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

1.localStorage+onShow应用场景:A-& gt；B-& gt；一个公爵

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

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

应用示例:

//带有A-& gt；b示例//A page page({ on show(){ if(wx . getstoragesync(&；#39;$ datas & amp#39;)){ console . log(wx . getstoragesync(& amp；#39;$ datas & amp#39;))//11111}}，})/b页面({ Some Actions(){ wx . setstoragesync(&；#39;$ datas & amp#39;，& amp#39;11111 & amp#39;) },})2.globalData+onShow应用场景:A-& gt；B-& gt；一个公爵

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

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

应用示例:

//带有A-& gt；b示例// A页面常量app = getApp()；Page({ on show(){ if(app . global data . data){ console . log(app . global data . data)//11111 } })//b Page const app = getApp()；page({ some actions(){ app . global data . $ datas = & amp；#39;11111 & amp#39;；},})3.小程序本身提供的EventChannel应用场景:主要是B-& gt；A

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

缺点:仅限于Navigator到，要求基本库版本不低于2.7.3。

应用示例:

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

优点:自定义实现和可扩展性。

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

EventBus:参考这个EventBus实现。

应用示例:

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

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

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

应用示例:

//一个页面({某些动作(数据){console.log(数据))；// 11111 }，})// B页面({ some actions(){ const pages = getcurrentpages()；if(pages . length & lt；2)退货；//如果有很多页级，可以循环匹配到A页；//这里只是一个2 pages const preview page = pages[pages . length -1]的例子；//路由匹配到if (preview。route = = = &；#39;A & amp#39;){ prev page . some actions(& amp；#39;11111 & amp#39;);} },})6.globalData代理暂时没有尝试过这种方法，原则上可行；

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

更多编程相关知识，请访问:编程入门！！

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

• 在小程序中优化css树抖动。
• 自定义小程序的动画框/提示框。
• 介绍applet依赖分析的练习(composition介绍applet依赖分析练习)
• 用矢量字体自定义小程序图标组件图标。
• 小程序内嵌h5页面，小程序webview页面等方法实现微信支付。

本文由主机参考刊发，转载请注明：跨页面小程序之间通信的几种方式（如何在跨页面小程序之间传递值） https://zhujicankao.com/112893.html