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

本站:VPS参考评测推荐,专注分享VPS服务器优惠信息!若您是商家也可以在本站进行投稿,查看详情!此外我们还提供软文收录、PayPal代付、广告赞助等服务,查看详情!
部分文章发布时间较久远,可能存在未知因素,购买时建议在本站搜索商家名称,可查看相关文章充分了解商家!若非中文页面可使用谷歌浏览器同步翻译!PayPal代付/收录合作

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

小程序由页面组成。如果有[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的数据劫持和订阅通知相结合;

有关编程的更多信息,请访问:编程入门!!以上是小程序跨页面通信的几种方式的细节。请多关注本站其他相关文章!

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

推荐站内搜索:备案信息查询、国外网站空间、ip138网站查询、云服务器租用、云服务器官网、高防服务器租用qy、免费注册网站域名、国外免费空间、cm域名注册、香港服务器购买、