uniapp跳转webview后H5不执行UniAppJSBridgeReady 回调无用

最新推荐文章于 2024-06-01 17:02:56 发布
最新推荐文章于 2024-06-01 17:02:56 发布
阅读量5.1k 收藏
点赞数 1
文章标签： xcode json javascript ViewUI
原文链接：http://www.cnblogs.com/lizhao123/p/11558674.html
版权
在uniapp中，使用webview进行页面跳转时遇到问题，当离线打包并在xcode上运行时，H5页面的UniAppJSBridgeReady回调未执行。经排查发现，传参方式可能导致此问题。将参数传递方式更改为URL查询字符串形式（例如：`¶ms=xxx`）后，H5页面能够正确触发UniAppJSBridgeReady回调。参考链接：https://www.cnblogs.com/lizhao123/p/11558674.html。
摘要由CSDN通过智能技术生成

开始时我在真机上测试使用

<web-view :src="'/hybrid/html/pages/index/index.html?userInfo='+JSON.stringify(userInfo)+'&type='+webViewType" @message="getMessage"></web-view>

这种形式传参时没有问题会走UniAppJSBridgeReady 回调但是，离线打包生成app资源在xcode上运行到手机出现不回调

因为官方的demo实例中没有出现问题，因为里面没有向webview传参

后来发现是传参问题，不能用下面形式

<web-view :src="'/hybrid/ht
最低0.47元/天 解锁文章
weixin_30856965
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
跨平台应用开发进阶(十七) ：uni-app 内嵌 H5 应用并实现双端通信_uniappjsbridgeready(1)
2401_84447149的博客
05-04 1351
如果你已经下定决心要转行做编程行业，在最开始的时候就要对自己的学习有一个基本的规划，还要对这个行业的技术需求有一个基本的了解。有一个已就业为目的的学习目标，然后为之努力，坚持到底。如果你有幸看到这篇文章，希望对你有所帮助，祝你转行成功。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
跨平台应用开发进阶(十七) ：uni-app 内嵌 H5 应用并实现双端通信_uniappjsbridgeready
2401_84447207的博客
05-04 970
前端字节跳动真题解析开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】[外链图片转存中…(img-NpDoqHyv-1714765330682)]
【uni-app】App与webview双向实时通信
最新发布
Assa_ss的博客
06-01 2306
在 Uniapp 中，App 与 里面嵌入的 webview 进行双向的实时通信vue2 ， 模拟器主要分为两部分webview 向 app 发送信息app 向 webview 发送信息以下是实现方式，用一个例子来说明（文章最后我会放这个例子的github地址）
UniAppJSBridgeReady不触发
weixin_47072581的博客
06-28 1941
背景：uniapp开发的小程序（简称UNI）页面A用Webview内嵌vue开发的h5，想从h5直接跳到UNI页面B。备注：初始化成功后，后续可以直接使用。（如果初始化未成功，会报uni undefined）（我的UniAppJSBridgeReady没有触发就是因为之前没有写在body里面）1、微信sdk要写在uni-app sdk前面。2、两个script要写在body里面！h5业务页面（实际使用的页面）
微信小程序webview嵌入H5页面，返回 UniAppJSBridgeReady，不触发问题
zhangyongbink的博客
09-27 3096
微信小程序webview嵌入H5页面，返回 UniAppJSBridgeReady，不触发问题
Android中WebView加载H5页面JS不执行的问题
学无止境
10-23 1万+
今天在使用WebView加载H5网页是，网页自身的JS并没有执行，后来加上下面几句就可以执行了，所以记录下： 首先WebView必须支持JS的执行 WebSettings webSettings = webview.getSettings(); //如果访问的页面中要与Javascript交互，则webview必须设置支持Javascript
uniapp实现webview和APP之间的传值通信 / VUE和HTML页面通信
qq_41556539的博客
12-03 1万+
首先，让我们来谈谈会应用到什么业务场景。 在uniapp开发中会我们可能会内嵌html, 并且有时候还需要相互通信的需求 例子：我们有个移动端的现成做好的网页，需要搬到uniapp开发的项目中，需要把这个网页打包成ios端和安卓端的APP，页面中有一个需要调用扫码功能。 思路逻辑分析： 1* uni 中的 web-view 来引入网页，网页中需要调用扫码功能，但是webview是不能直接调用手机的扫码功能的 2* 点击网页的扫码按钮触发事件，事件给app发送一个我要使用扫码的需求，然后再uni中收.
uni-app html 以及 js页面如何使用uni
授人以渔的博客
07-22 4231
可以自行定义一个_uni对象 var _uni; document.addEventListener('UniAppJSBridgeReady', function() { _uni = uni; }); 之后就可以正常使用了，调用_uni就是uni. 我试过了，直接在外部调用uni无用，所以需要承接以下uni，再使用。 然后uni在html以及js中可以使用的方法较少，使用之前一定要看好API。 ...
uniapp与webview之间的相互传值的实现
10-15
在移动应用开发中，uni-app是一个跨端框架，它允许开发者编写一次代码，就能在iOS、Android、H5等多个平台上运行。而Webview是uni-app中用于嵌入HTML5页面的组件，它使得原生应用能够加载和展示网页内容。在uni-app...
uniapp 使用webView通讯
04-04
uniapp 使用webView通讯
（uniapp框架）手动封装webview页面与App交互sdk
01-30
H5页面可以通过发送消息到App，App接收到消息后执行相应操作，然后再通过发送回调结果给H5。这种异步通信方式确保了数据的实时同步。 5. **安全性和性能优化**：在实现交互时，需要注意安全问题，防止恶意代码通过...
解决WebView通过URL加载H5界面出现空白的问题
08-19
解决WebView通过URL加载H5界面出现空白的问题 WebView是一种常用的显示网页内容的控件，但是在使用时经常会出现问题，例如加载H5界面出现空白的问题。下面我们将介绍解决这个问题的方法。 一、权限问题 在使用...
引入uni.js 实现uni-app与H5通讯 / H5的横屏展示（uni-app通过＜web-view＞标签嵌入H5项目）
weixin_46977882的博客
10-18 457
注：以下代码是H5的代码（基于vue实现的h5），注释部分是原生的写法。以上代码经过多次实际总结验证，有问题可以评论留言。
跨平台应用开发进阶(十七) ：uni-app 内嵌 H5 应用并实现双端通信
IT全栈 华强工作室
05-27 9271
uni-app应用开发过程中，需要应用内嵌H5页面，H5分为html、Vue两种。现如今，各大APP平台都拥有属于自己的小程序体系，各种各样的应用都可直接内嵌在APP中实现一站式体验。使用uniapp开发的APP如何实现这样的功能呢？答案就是内嵌web-view。
h5打开app跳不到指定页面 uni_【报Bug】web-view 组件在跳转到h5本地页面，在使用uni-app 的 api 无法执行...
weixin_40004960的博客
12-20 888
这一段代码在h5 页面可以正常执行没有问题。document.addEventListener('UniAppJSBridgeReady', function() {uni.getEnv(function(res) {if (res.plus) {console.log('当前环境为【5+App】');} else if (res.miniprogram) {console.log('当前环境为【...
uni-app应用中控制webview的H5页面返回
热门推荐
jared.wang
12-03 1万+
在uni-app中使用了webview之后, 由于项目完全由app内嵌h5完成, 所以无法控制app的物理返回键； 要实现这个功能，最主要的是完成应用与H5 的通讯问题。 1、H5向应用发送消息 首先处理uni-app: 需要在webview标签上加入接受消息的方法，通过e.detail.data 来获得消息中带来的信息 // <web-view src="***/main/main?edition=1.0.0" @message="getH5Message"></web-vie
【uni-app】app与H5进行双向通讯
baidu_34861695的博客
09-13 6818
首先，app的webview需要使用nvue，只有nvue的webview才能实时监听到postMessage。如果用vue的webview，只能在页面加载、回退等特殊时候将消息回传给app。使用模板，可点击截图中的参考按钮，复制下来用。在 template.h5.html引入 uni.webview.js ，这里注意，（官方的某些版本有些问题，需要自己把js文件里面的uni换成webUni，文章后面我会贴上自己用的uni.webview.js）。
uniapp支付宝小程序内嵌webview通信uniapp H5项目的解决方案
shmilynn_的博客
05-11 2699
本文主要提供uniapp支付宝小程序内嵌webviewh5通信的解决方案
【工作实践-06】uniapp使用webView
weixin_49491274的博客
03-01 5318
利用节点信息减去其他内容的高度，得到webview的高度，this.scope.scope.scope.getAppWebview()获取webview实例（只能app使用），再修改实例setStyle设置。其次网页向应用 postMessage 需要通过 wv.evalJS(``)方法，在此方法中利用uniapp的postMessage()方法向应用发送消息。在初始化webview时，需要引入webview.js文件和添加的搭桥 js (post.js)文件。这样写在安卓端没有问题，运行很顺利，但是在。
UNIAPP使用webview跳转h5页面在这个h5页面中使用JSBridge跳转UNIAPP的其他页面代码实现
03-29
在H5页面中使用JSBridge跳转UNIAPP的其他页面，可以按照以下步骤进行实现： 1. 在H5页面中引入JSBridge库，例如： ``` <script src="https://unpkg.com/uni-app-plus-jsbridge/dist/uni-app-plus-jsbridge.umd.min.js"></script> ``` 2. 在H5页面中定义一个跳转函数，例如： ``` function jumpToPage(pageName, params) { if (window.plus) { // 获取uni-app的webview对象 var webview = plus.webview.currentWebview().opener(); // 调用uni-app的JSBridge方法跳转页面 uni.invokeMethod('navigateTo', { url: pageName, params: params }, function(res) { // 跳转成功回调 }); } } ``` 3. 在H5页面中调用跳转函数，例如： ``` <button onclick="jumpToPage('/pages/home/home', {id: 1, name: 'test'})">跳转到首页</button> ``` 4. 在目标UNIAPP页面中接收参数，例如： ``` export default { onLoad(options) { console.log(options.id); console.log(options.name); } } ``` 通过以上步骤，就可以在H5页面中使用JSBridge跳转UNIAPP的其他页面并传递参数。需要注意的是，需要在UNIAPP中集成JSBridge插件，同时在H5页面中引入JSBridge库才能正常使用JSBridge功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值