微信小程序与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服务器进行通信,这种方式固然很好,但需要额外成本,此处不作考虑。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/583991.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

计算机组成实验(4)

实验目的&#xff1a; 1. 初步了解GPIO接口与设备 2. 了解计算机系统的基本结构 3. 了解计算机各组成部分的关系 4. 了解并掌握IP核的使用方法 5. 了解SOC系统并用IP核实现简单的SOC系统 实验环境&#xff1a; 1. 计算机&#xff08;Intel Core i5以上&#xff0c;4GB内存以…

【工具】--- Adobe Illustrator 下载-入门绘图

文章目录 软件下载入门项目可看课程 尝试使用Adobe Illustrator&#xff08;设计师常用软件&#xff09;进行科研绘图。 软件下载 阿里云盘下载 入门项目 绘制一个箭头并保持为SVG&#xff0c; 直线->画线->窗口->描边->选择想要的箭头样式->颜色->改为蓝…

git误操作版本回退的方法

场景&#xff1a;在使用git进行代码提交的时候不小心执行了git reset 命令进行了版本回退但是在这之前进行了git add . git commit -m "提交"等命令&#xff0c;正常情况下就可以直接使用 git reset 版本号 进行代码的回退&#xff0c;但是发现自己不能找打上一个提…

机器学习:逻辑回归

概念 首先&#xff0c;逻辑回归属于分类算法&#xff0c;是线性分类器。我们可以认为逻辑回归是在多元线性回归的基础上把结果给映射到0-1的区间内&#xff0c;hθ&#xff08;x&#xff09;越接近1越有可能是正例&#xff0c;反之&#xff0c;越接近0越有可能是负例。那么&am…

IC设计数据传输 如何能保障安全高效?

IC&#xff08;集成电路&#xff09;设计数据&#xff0c;对于IC设计企业来说&#xff0c;其重要性不言而喻。所以IC设计数据传输过程中&#xff0c;其安全性和效率&#xff0c;也需要有保障。 首先我们来看看IC设计数据为什么重要&#xff0c;其重要性体现在多个方面&#xff…

edge 入门基础了解使用

随着Windows 11的发布&#xff0c;Microsoft Edge也迎来了新的更新和改进。作为一名长期使用Edge的用户&#xff0c;我不仅注意到了这些表面的变化&#xff0c;还深入研究了Edge在Windows 11上的新特性和潜在优势。 快捷方式 查找框 在Microsoft Edge浏览器中&#xff0c;按…

踩坑Mybatis + Mybatis-plus + MyBatis-plus-join

数据库里有两张表 tb_bursary和tb_student tb_bursary里关联了tb_student.id作为外键 由于tb_student表可以单独操作&#xff0c;而tb_bursary需要联合tb_student查询 所以一开始&#xff0c;我是用mybatis-plus mybaits混合的模式 mybatis-plus单独操作tb_student表&…

学习 Rust 第 22 天:mini_grep 第 2 部分

书接上文&#xff0c;在本文中&#xff0c;我们学习了如何通过将 Rust 程序的逻辑移至单独的库箱中并采用测试驱动开发 (TDD) 实践来重构 Rust 程序。通过在实现功能之前编写测试&#xff0c;我们确保了代码的可靠性。我们涵盖了基本的 Rust 概念&#xff0c;例如错误处理、环境…

小程序SSL证书更新指南

随着网络技术的不断发展&#xff0c;小程序已经成为许多企业和个人进行业务推广和服务提供的重要平台。在享受小程序带来的便利和高效的同时&#xff0c;我们也必须重视其安全性问题。SSL证书作为保障小程序数据传输安全的重要手段&#xff0c;其更新工作不容忽视。本文将为大家…

在线教程|零门槛部署 Llama 3,70B 版本只占 1.07G 存储空间,新用户免费体验 8B 版本

4 月 18 日&#xff0c;Meta 宣布开源 Llama 3&#xff0c;这个号称「迄今为止最好的开源大模型」一经发布&#xff0c;立刻引爆科技圈&#xff01; 发布当天恰逢斯坦福大学教授、AI 顶尖专家吴恩达的生日&#xff0c;作为 AI 开源倡导者&#xff0c;他激动地发文表示&#xff…

CogAgent:开创性的VLM在GUI理解和自动化任务中的突破

尽管LLMs如ChatGPT在撰写电子邮件等任务上能够提供帮助&#xff0c;它们在理解和与GUIs交互方面存在挑战&#xff0c;这限制了它们在提高自动化水平方面的潜力。数字世界中的自主代理是许多现代人梦寐以求的理想助手。这些代理能够根据用户输入的任务描述自动完成如在线预订票务…

【doghead】ubuntu构建libuv

按照官方的文档2024年3月的版本。首先构建libuv 最终构建的还得了test 构建过程 zhangbin@DESKTOP-1723CM1:/mnt/d/XTRANS/thunderbolt/ayame/zhb-bifrost$ ls Bifrost-202403 README.md draw player-only worker 大神的带宽估计.png zhangbin@DESKTOP-1723CM1:/mnt/d/XTRANS/…

计算机网络 备查

OSI 七层模型 七层模型协议各层实现的功能 简要 详细 TCP/IP协议 组成 1.传输层协议 TCP 2.网络层协议 IP 协议数据单元&#xff08;PDU&#xff09;和 封装 数据收发过程 数据发送过程 1. 2.终端用户生成数据 3.数据被分段&#xff0c;并加上TCP头 4.网络层添加IP地址信息…

React + 项目(从基础到实战) -- 第十期

目标 学会react 状态管理工具 使用redux管理用户状态 Context 跨层级传递,不像props层层传递类似于Vue的provide/inject用于:切换主题颜色,切换语言 useReducer useState 的替代方案 简化版的redux MobX 1. MobX 介绍 MobX 中文文档 声明式的修改数据 , 像vue state ac…

【算法基础实验】图论-UnionFind连通性检测之quick-union

Union-Find连通性检测之quick-union 理论基础 在图论和计算机科学中&#xff0c;Union-Find 或并查集是一种用于处理一组元素分成的多个不相交集合&#xff08;即连通分量&#xff09;的情况&#xff0c;并能快速回答这组元素中任意两个元素是否在同一集合中的问题。Union-Fi…

55.基于SpringBoot + Vue实现的前后端分离-旅游管理系统(项目 + 论文)

项目介绍 本站是一个B/S模式系统&#xff0c;采用SpringBoot Vue框架&#xff0c;MYSQL数据库设计开发&#xff0c;充分保证系统的稳定性。系统具有界面清晰、操作简单&#xff0c;功能齐全的特点&#xff0c;使得基于SpringBoot Vue技术的旅游管理系统设计与实现管理工作系统…

【Node.js工程师养成计划】之express框架

一、Express 官网&#xff1a;http://www.expressjs.com.cn express 是一个基于内置核心 http 模块的&#xff0c;一个第三方的包&#xff0c;专注于 web 服务器的构建。 Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用&…

docker学习笔记3:VmWare CentOS7安装与静态ip配置

文章目录 一、安装CentOS71、下载centos镜像2、安装二、设置静态ip三、xshell连接centos本专栏的docker环境是在centos7里安装,因此首先需要会安装centos虚拟机。 本篇博客介绍如何在vm虚拟机里安装centos7。 一、安装CentOS7 1、下载centos镜像 推荐清华源,下载如下版本 …

使用量排名前50的GPTs趋势和特征

Chatgpt的gpt商店已经有几千gpts了。目前哪些gpts比较受欢迎呢&#xff1f;有哪些趋势和投资呢? 根据whatplugin.ai&#xff08;截止日期为2024年3月&#xff09;&#xff0c;使用量最多的50个gpts数据分析结果如下&#xff1a; GPTs类型的分布情况如下&#xff1a; 图像生成…

案例-部门管理-删除

黑马程序员JavaWeb开发教程 文章目录 一、查看页面原型二、查看接口文档三、开发1、Controller2、Service&#xff08;1&#xff09;service接口层&#xff08;3&#xff09;service实现层 3、Mapper4、Postman 一、查看页面原型 二、查看接口文档 三、开发 1、Controller 因…