微信小程序与web-view网页进行通信的尝试

ops/2024/10/21 6:20:28/

        首先,微信小程序向web-view传递数据一般通过地址栏传参的形式(给src赋值或者修改hash),这样一般就已经能够满足实际开发需求了,所以这里主要探讨web-view向微信小程序传参。下面,我们从官方文档入手,基于web-view标签自身的能力特点做一些尝试:

一、JSSDK提供的wx.miniProgram.postMessage

        文档中说此方法只能在“小程序后退、组件销毁、分享、复制链接”时才会触发,意思也就是说通信不是即时的,而实际中,我们大多是需要即时通信的,所以该方法的用处有限。

// h5页面<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
wx.miniProgram.postMessage({ data: 'foo' })
wx.miniProgram.postMessage({ data: {foo: 'bar'} })// 小程序
<web-view src="{{url}}" bindmessage="messageHandler" ></web-view>

二、路由跳转(wx.miniProgram.navigateTo/redirectTo等)

        文档提供了一些web-view改变小程序路由的方法,那么能否通过这些方法传递数据,然后在小程序中拦截路由,拿到数据后再阻止跳转?答案是不行。原因是:小程序虽然可以通过wx.onAppRoute监听路由变更,但不能阻止路由跳转行为。

        另外,即便是当前页面跳转到当前页面也不行(即/page/webview/index跳转到/page/webview/index?a=123),页面会重新加载,闪现白屏。

三、事件绑定bindload

        web-view标签提供了3个事件:bindload、bindmessage、binderror。其中,bindmessage是配合上面的postMessage使用的;binderror是网页加载失败时触发的;只有bindload(页面加载成功时触发)存在可利用的契机。

        3.1 在h5页面中修改location.href,通过地址栏向小程序传参

        这是最直接能想到的办法,H5页面不复杂的话,用户几乎感觉不到页面重新加载带来的影响。不过,该方式隐性要求我们:在开发时,最好将H5页面设计成“页面的所有状态都使用地址栏参数和localStorage来维护”,这样,无论是“小程序变更h5页面”还是“h5页面向小程序传递自身当前的状态”都会很方便。

        3.2 是否可以模拟触发load事件来优化上述方式(fail)

        答案是不行的。假如是在h5页面内,模拟触发load事件是可行的,但是网页内window的load并不会冒泡给web-view标签。

        3.3 是否可以使用多标签来优化上述方式(fail)

        现在的浏览器都支持多标签页,那么web-view标签是否也可以同时打开两个标签页(页面a、页面b),其中页面a用来展示页面,页面b(假设它是页面a用window.open(‘page-b’, ‘_blank’)打开的)则不显示;需要传参时,页面a修改页面b的地址,继而触发load事件,将参数传递给小程序?

        答案是不行的。

        虽然window.open方法可以执行,但貌似在web-view中,“_blank”跟“_self”一样,无论是页面a操作页面b,还是页面b操作页面a都操作的是同一个标签页。

        3.4 是否可使用history.pushState/replaceState或修改hash来触发load(fail)

        答案是不行的。毕竟这两种方法都只是修改地址,并不影响网页内容,而load是需要网页加载才可能触发。

四、Websocket通信

        小程序和H5网页通过websocket服务器进行通信,这种方式固然很好,但需要额外成本,此处不作考虑。


http://www.ppmy.cn/ops/28734.html

相关文章

2024年第二十六届“华东杯”(B题)大学生数学建模挑战赛|数学建模完整代码+建模过程全解全析

当大家面临着复杂的数学建模问题时&#xff0c;你是否曾经感到茫然无措&#xff1f;作为2022年美国大学生数学建模比赛的O奖得主&#xff0c;我为大家提供了一套优秀的解题思路&#xff0c;让你轻松应对各种难题。 让我们来看看华东杯 (B题&#xff09;&#xff01; 第一个问题…

LabVIEW高效目标跟踪系统

LabVIEW高效目标跟踪系统 随着机器视觉技术的飞速发展&#xff0c;设计和实现高效的目标跟踪系统成为了众多领域关注的焦点。基于LabVIEW平台&#xff0c;结合NI Vision机器视觉库&#xff0c;开发了一种既高效又灵活的目标跟踪系统。通过面向对象编程方法和队列消息处理器程序…

程序员副业可用的四大原则

界面设计对于许多尝试独立开发完整产品的程序员来说&#xff0c;可能是一个令人头疼的问题。很多时候&#xff0c;如果我们向设计师询问&#xff0c;很多人虽然擅长设计&#xff0c;但可能无法解释背后的原理。他们只会说&#xff0c;“这样做感觉更好一些”&#xff0c;“这就…

发电厂智能巡检机器人:让发电厂更安全、更高效

在发电厂的众多应用场景中&#xff0c;升压站、化学车间、空冷塔、输煤皮带、综合管廊等&#xff0c;一直以来都是人工巡检的主战场。然而&#xff0c;这些场所环境极为复杂&#xff0c;人工巡检面临着诸多难题&#xff0c;强度大、频率低、间隔长等问题突出。这使得设备在运行…

【网络原理】UDP协议 | UDP报文格式 | 校验和 | UDP的特点 | 应用层的自定义格式

文章目录 一、UDP协议1.UDP的传输流程发送方接收方 2.UDP协议报文格式&#xff1a;长度受限校验和如何校验&#xff1a;CRC算法&#xff1a;循环冗余算法md5算法&#xff1a; 2.UDP的特点 二、开发中常见的自定义格式1.xml&#xff08;古老&#xff09;2.json&#xff08;最流行…

State.initState() must be a void method without an `async` keyword错误解析

文章目录 报错问题报错的代码 错误原因解决方法解析 另外的方法 报错问题 State.initState() must be a void method without an async keyword如下图&#xff1a; 报错的代码 报错的代码如下&#xff1a; overridevoid initState() async{super.initState();await getConf…

【计算机毕业设计】基于SSM++jsp的社区管理与服务系统【源码+lw+部署文档+讲解】

目录 摘 要 Abstract 第一章 绪论 第二章 系统关键技术 第三章 系统分析 3.1.1技术可行性 3.1.2经济可行性 3.1.3运行可行性 3.1.4法律可行性 3.4.1注册流程 3.4.2登录流程 3.4.3活动报名流程 第四章 系统设计 4.3.1登录模块顺序图 4.3.2添加信息模块顺序图 4.4.1 数据库E-…

【经典算法】LeetCode 108. 将有序数组转换为二叉搜索树(Java/C/Python3/Go实现含注释说明,Easy)

目录 题目描述思路及实现方式一&#xff1a;递归中值法思路代码实现Java版本C语言版本Python3版本Golang版本 复杂度分析 方式二&#xff1a;迭代法思路代码实现Java实现Python实现C实现Go版本 复杂度分析总结 总结相似题目 标签(题目类型)&#xff1a;树&#xff0c;二叉搜索树…