VPS参考测评推荐
专注分享VPS主机优惠信息
衡天云优惠活动
华纳云优惠活动
荫云优惠活动

浅谈使用JS库解决小程序跨页面传递消息和数据的方法(如何跨小程序页面传递值)

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

浅谈使用JS库解决小程序跨页面传递消息和数据的方法(如何跨小程序页面传递值)

由于微信小程序wx.navigateBack的方法不支持返回和传递值,因此不方便在页面返回后立即更新数据。

一。需求分析

这种需求可能意味着:页面A进入页面B,页面B返回并将值传递给页面A或者当页面B触发事件时,页面A也有一个事件来触发更改。

1.png

商情分析

第一个:使用微信的wx.setStorage在小程序实例中缓存数据。从B页返回A页时,B页先缓存数据;然后在页面A的onshow方法中,调用wx.getStorage读取缓存。但是却为以后的维护带来了很多隐患。(类似于全局变量方法)

第二种方法:获取上一个页面实例也可以实现这个功能。部分代码如下:

2.png

这种方法的缺点:因为B页可能有很多入口。这样做可能会导致错误的页面实例。

二。方法简介

言归正传,介绍一下onfire.js()

Onfire.js是一个非常简单的用于事件分发的JavaScript库(只有0.9kb),简洁而实用。它可以应用于:

1.简单的事件分布。

2.React、Vue.js和Angular中跨组件的轻量级实现。

3.活动订阅和发布。

如何使用:(做过移动开发的人都知道,类似于iOS的通知和Android的广播)

A.页面首先订阅一个事件并定义处理方法;

B.从B页返回时,发送消息;

卸载c.A页面后,取消订阅。

我的使用方法是:

页面代码:

3.png

我们可以直接在A页面上调用onfire.on方法来订阅名为key的消息。在上面的代码中,没有传递附加到消息的参数。如果需要传递参数,可以直接在函数中添加参数,例如:

4.png

需要注意的是,您必须取消订阅onUnload中的消息(当页面关闭时)并取消绑定eventObj。

b页面代码在回调处添加以下代码:

5.png

三。分析库代码

从代码中可以看到,在订阅on方法时,实际上调用了_bind方法。此方法使用二维数组存储订阅的对象。

6.png

fire消息发送方法的本质是调用_fire_func方法,通过名称(键)遍历订阅者,然后通知订阅者。调用un方法,按名称(键)遍历订阅者,找到后将其删除。

推荐:《小程序开发教程》

以上就是如何使用JS库解决小程序跨页面传递消息和数据的细节。更多资讯请关注主机参考等相关文章!

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

本文由主机参考刊发,转载请注明:浅谈使用JS库解决小程序跨页面传递消息和数据的方法(如何跨小程序页面传递值) https://zhujicankao.com/102712.html

【腾讯云】领8888元采购礼包,抢爆款云服务器 每月 9元起,个人开发者加享折上折!
打赏
转载请注明原文链接:主机参考 » 浅谈使用JS库解决小程序跨页面传递消息和数据的方法(如何跨小程序页面传递值)
主机参考仅做资料收集,不对商家任何信息及交易做信用担保,购买前请注意风险,有交易纠纷请自行解决!请查阅:特别声明

评论 抢沙发

评论前必须登录!