微信小程序与web-view网页进行通信的尝试
首先,微信小程序向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服务器进行通信,这种方式固然很好,但需要额外成本,此处不作考虑。
版权声明:
作者: FreeClashNode
链接: https://www.freeclashnode.com/news/article-2936.htm
来源: www.freeclashnode.com
文章版权归作者所有,未经允许请勿转载。
热门文章
- 11月2日免费节点分享|22.5M/S,V2ray节点/Clash节点/SSR节点/Singbox节点|免费上网梯子每天更新
- 10月14日免费节点分享|22.5M/S,Clash节点/V2ray节点/Singbox节点/SSR节点|免费上网梯子每天更新
- 10月11日免费节点分享|18.6M/S,V2ray节点/Clash节点/SSR节点/Singbox节点|免费上网梯子每天更新
- 10月13日免费节点分享|22.1M/S,V2ray节点/Clash节点/Singbox节点/Shadowrocket节点|免费上网梯子每天更新
- 10月25日免费节点分享|18.1M/S,SSR节点/V2ray节点/Singbox节点/Clash节点|免费上网梯子每天更新
- 10月12日免费节点分享|22.7M/S,Shadowrocket节点/V2ray节点/Singbox节点/Clash节点|免费上网梯子每天更新
- 10月27日免费节点分享|20M/S,Shadowrocket节点/Singbox节点/V2ray节点/Clash节点|免费上网梯子每天更新
- 10月28日免费节点分享|22.8M/S,Singbox节点/SSR节点/V2ray节点/Clash节点|免费上网梯子每天更新
- 10月21日免费节点分享|22M/S,Clash节点/Singbox节点/V2ray节点/SSR节点|免费上网梯子每天更新
- 10月17日免费节点分享|18M/S,Clash节点/SSR节点/V2ray节点/Singbox节点|免费上网梯子每天更新
最新文章
- 11月9日免费节点分享|22.3M/S,Shadowrocket节点/Clash节点/V2ray节点/Singbox节点|免费上网梯子每天更新
- 轻松翻越网络高墙:Shadowrocket一键导入配置全攻略
- 11月8日免费节点分享|21.3M/S,Clash节点/V2ray节点/Singbox节点/SSR节点|免费上网梯子每天更新
- 当Vmess突然失效:一场技术与封锁的无声博弈
- 11月7日免费节点分享|22.9M/S,Shadowrocket节点/V2ray节点/Singbox节点/Clash节点|免费上网梯子每天更新
- 梅林固件科学上网完全指南:从入门到精通,零成本解锁网络自由
- 11月6日免费节点分享|20.9M/S,Shadowrocket节点/V2ray节点/Singbox节点/Clash节点|免费上网梯子每天更新
- 幸运破解器科学上网全解析:解锁数字世界的终极指南
- 11月5日免费节点分享|21.9M/S,Shadowrocket节点/Singbox节点/V2ray节点/Clash节点|免费上网梯子每天更新
- 11月4日免费节点分享|18M/S,Clash节点/Singbox节点/SSR节点/V2ray节点|免费上网梯子每天更新
- 穿越数字迷雾:深度解析V2Ray中转迟滞之谜与极速优化指南
- 跨越数字边界:科学上网的终极指南与深度思考
- 从连接到掌控:深入理解 Quantumult 的工作流程与网络管理哲学
- 11月2日免费节点分享|22.5M/S,V2ray节点/Clash节点/SSR节点/Singbox节点|免费上网梯子每天更新
- 深度解析《荒野冲突》:征服与策略的终极对决
- 11月1日免费节点分享|20.3M/S,V2ray节点/Shadowrocket节点/Clash节点/Singbox节点|免费上网梯子每天更新
- 斐讯路由器刷机配置v2ray全攻略:打造安全高效的翻墙网络环境
- 10月31日免费节点分享|18.7M/S,Shadowrocket节点/Clash节点/V2ray节点/Singbox节点|免费上网梯子每天更新
- 谷歌浏览器科学上网扩展全攻略:从入门到精通
- 10月30日免费节点分享|20.4M/S,V2ray节点/SSR节点/Singbox节点/Clash节点|免费上网梯子每天更新
- 苹果手机V2Ray完全指南:从零开始打造安全上网环境
- 10月29日免费节点分享|21.6M/S,SSR节点/Clash节点/V2ray节点/Singbox节点|免费上网梯子每天更新
- 探索数字世界的门户:电脑科学上网贴吧完全指南
- 10月28日免费节点分享|22.8M/S,Singbox节点/SSR节点/V2ray节点/Clash节点|免费上网梯子每天更新
- 穿越数字边界:科学上网的全面指南与深度思考
- 10月27日免费节点分享|20M/S,Shadowrocket节点/Singbox节点/V2ray节点/Clash节点|免费上网梯子每天更新
- 数字世界的破壁之旅:科学上网全指南与实用工具深度解析
- 10月26日免费节点分享|21.5M/S,V2ray节点/SSR节点/Singbox节点/Clash节点|免费上网梯子每天更新
- 跨越知识边界:浙大学子的全球学术网络探索指南
- 10月25日免费节点分享|18.1M/S,SSR节点/V2ray节点/Singbox节点/Clash节点|免费上网梯子每天更新
- 10月24日免费节点分享|20.5M/S,V2ray节点/Clash节点/Singbox节点/Shadowrocket节点|免费上网梯子每天更新
- 刘大猫科学上网全攻略:解锁全球网络的终极指南
- 10月23日免费节点分享|22.2M/S,Shadowrocket节点/Clash节点/Singbox节点/V2ray节点|免费上网梯子每天更新
- 全面解析Quantumult安卓版:功能、安装与配置教程
- 双重防护,畅享无界:AdGuard联手V2RayNG,打造极致安全的上网体验
- 10月22日免费节点分享|18.8M/S,V2ray节点/SSR节点/Singbox节点/Clash节点|免费上网梯子每天更新
- 掌握Clash白名单设置:精准控制代理流量的艺术
- 10月21日免费节点分享|22M/S,Clash节点/Singbox节点/V2ray节点/SSR节点|免费上网梯子每天更新
- 突破网络边界:技术科学上网的终极安全指南
- 10月20日免费节点分享|22.9M/S,SSR节点/V2ray节点/Clash节点/Singbox节点|免费上网梯子每天更新
- Shadowrocket 选购指南:从入门到精通,找到你的专属代理神器
- 10月19日免费节点分享|19.3M/S,Singbox节点/V2ray节点/Clash节点/Shadowrocket节点|免费上网梯子每天更新
- 深入解读:V2Ray为何比SSR更安全?一场网络隐私的全方位较量
- 10月18日免费节点分享|20.6M/S,V2ray节点/Clash节点/SSR节点/Singbox节点|免费上网梯子每天更新
- 深度指南:Shadowrocket从入门到精通——iOS用户的网络自由密钥
- 10月17日免费节点分享|18M/S,Clash节点/SSR节点/V2ray节点/Singbox节点|免费上网梯子每天更新
- 深入解析科学上网套:全方位使用指南与常见问题解答
- 10月16日免费节点分享|22M/S,Shadowrocket节点/V2ray节点/Singbox节点/Clash节点|免费上网梯子每天更新
- 10月15日免费节点分享|21.2M/S,Clash节点/SSR节点/V2ray节点/Singbox节点|免费上网梯子每天更新
- 全局掌控:安卓设备上 Clash 全局模式完整设置指南与深度解析
归档
- 2026-11 16
- 2026-10 61
- 2026-09 58
- 2026-08 63
- 2026-07 61
- 2026-06 55
- 2026-05 56
- 2026-04 51
- 2026-03 60
- 2026-02 52
- 2026-01 56
- 2025-12 59
- 2025-11 55
- 2025-10 56
- 2025-09 55
- 2025-08 49
- 2025-07 31
- 2025-06 30
- 2025-05 31
- 2025-04 30
- 2025-03 388
- 2025-02 360
- 2025-01 403
- 2024-12 403
- 2024-11 390
- 2024-10 403
- 2024-09 388
- 2024-08 402
- 2024-07 427
- 2024-06 442
- 2024-05 181
- 2024-04 33
- 2024-03 31
- 2024-02 29
- 2024-01 51
- 2023-12 52
- 2023-11 32
- 2023-10 32
- 2023-09 3