H5嵌入APP后,通过window.WebViewJavascriptBridge原生APP与H5之间交互

本文介绍了如何在H5页面中利用window.WebViewJavascriptBridge与原生APP进行数据交互,特别是在安卓和iOS环境下的处理策略。包括根据navigator.userAgent判断环境、处理兼容性问题、注册事件以及在安卓系统中调用WebViewJavascriptBridge.init()。原生APP通过注册handler来响应H5的特定操作。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

原生APP跳转到H5页面时,往往需要携带一些用户信息,之前做法是在跳转的地址中拼接H5页面需要的参数,现在通过window.WebViewJavascriptBridge悄悄的进行数据交互。

本文主要从H5的角度记录交互思路:

1:安卓环境和ios环境稍微有点不同,需要根据navigator.userAgent判断一下当前环境

2:仍然是APP环境不同,安卓需要进行兼容性判断,如果不存在window.WebViewJavascriptBridge变量,需要手动添加Dom的WebViewJavascriptBridgeReady事件监听;ios同样需要判断是否存在window.WebViewJavascriptBridge变量,如果不存在继续判断window.WVJBCallbacks变量,如果仍然不存在,则手动赋值为H5回调,然后document.createElement('iframe')插入document中,随即移除。

3:以上处理完成后,通过WebViewJavascriptBridge变量来注册【事件】以便APP能监听到并执行相应操作

4:3中需要对安卓系统进行init处理,如果是安卓系统,注册事件之前需要先调用WebViewJavascriptBridge.init()

方法(注意: 一个页面整个生命周期过程中,只能进行一次init()否则会报错,我的做法是通过一个全局变量来判断是否初始化过)

以下是具体代码:

//针对安卓和ios系统,对window.WebViewJavascriptBridge进行
### 解决 `uni.navigateBack` 在 H5 嵌入 APP 中的问题 在处理 `uni.navigateBack` 方法于 H5 页面嵌入原生应用环境下的使用问题时,需关注几个关键点。由于 webview 组件内部的历史记录管理机制不同,在调用此 API 时可能会仅返回到 webview 的前一页面而非整个应用程序的上一层级[^5]。 #### 方案概述 为了实现从当前 H5 页面回退至上层原生界面的功能,建议采用以下策略: - **引入特定脚本文件**:对于基于 uni-app 构建并部署为 H5 应用的情况,应在项目的入口 HTML 文件 (`index.html`) 中正确加载 `uni.webview.js` 脚本,并确保其位于 `<body>` 标签之外的位置以防止潜在错误的发生[^1]。 - **调整导航逻辑**:通过监听浏览器端的 popstate 或 hashchange 事件来检测用户的后退操作意图;一旦捕捉到此类行为,则向宿主容器发送消息通知后者执行相应的跳转动作。具体来说就是利用 JavaScript 提供的消息传递接口 (postMessage),配合自定义协议或 URL Scheme 来触发目标平台上的路由变化。 ```javascript // 监听popstate事件, 当用户点击浏览器自带的返回按钮时触发 window.addEventListener('popstate', function(event){ // 向父窗口(即APP)发送一条消息告知要关闭当前WebView window.parent.postMessage({action:'close'}, '*'); }); ``` - **增强跨平台兼容性**:考虑到各操作系统间存在的差异性,务必测试所选方案能否稳定运行于 Android 和 iOS 设备之上。特别是针对某些特殊场景下可能发生的异常状况做好充分准备,比如网络连接不稳定期间的数据同步失败等问题。 #### 示例代码片段 下面给出一段用于演示如何修改现有项目结构以便更好地支持上述功能改进措施的例子: ```html <!-- index.html --> <!DOCTYPE html> <html lang="en"> <head> <!-- ...其他头部信息... --> </head> <body> <!-- 主体内容区域 --> <script src="/static/uni.webview.js"></script> <!-- 正确放置位置 --> </body> </html> ``` ```javascript // main.js or similar entry file of your project if (typeof WeixinJSBridge === 'undefined') { document.addEventListener('WeixinJSBridgeReady', onBridgeReady); } else { onBridgeReady(); } function onBridgeReady() { const backHandler = () => { if (!canGoBack()) { // 自定义函数判断是否有可退回的历史记录项 history.pushState(null, null, '#'); // 阻止默认行为并向栈顶添加新状态 window.addEventListener('popstate', () => { // 这里可以加入更多业务逻辑,例如询问用户是否真的想要退出等交互设计 closeCurrentPage(); // 关闭当前Web视图实例的方法名依实际开发框架而定 }, { once: true }); } }; // 对应微信内置游览器特有的API适配情况 WeixinJSBridge.call('hideOptionMenu'); WeixinJSBridge.on('menu:item:weibo:share', shareToSina); // 类似地绑定分享等功能回调处理器... } ```
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值