webview 无法调用uni_uni-app web-view中加载的本地或远程html中如何调用uni-app的api,实现网页和app之间的通信 | 志博日记...

本文介绍了在uni-app中,如何在web-view组件加载的HTML页面里调用uni的API,实现网页与uni-app的通信。通过引入JS-SDK,监听UniAppJSBridgeReady事件,可以进行页面跳转、发送消息和获取环境信息。此外,还详细讲解了在5+App中加载本地HTML资源的配置要求。
摘要由CSDN通过智能技术生成

uni-app的web-view组件,支持加载远程网页,在app环境下,还支持加载本地HTML页面。

在web-view加载页面中,会涉及wx、plus、uni等对象的使用。

在小程序下使用wx的api,需要引入微信提供的https://res.wx.qq.com/open/js/jweixin-1.4.0.js。

在app下默认有plus对象,不需要引入js文件。

不管是在小程序下还是在app下,使用uni的api,需要引入https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.0.1.52.js

本文会详述在webview里的uni对象的使用方式,以及和vue页面的通讯方式。

HBuilderX 1.0.0 版本开始,uni-app 支持在 web-view 中调用 uni 的 API。

引用依赖的文件

在 web-view 加载的 HTML 中调用 uni 的 API,需要在 HTML 中引用必要的 JS-SDK。

Tips

这些 JS 文件是在 web-view 加载的那个 HTML 文件中引用的,而不是 uni-app 项目中的文件。

如果不考虑微信小程序,则无需引入微信的 JS-SDK。

两个文件同时引入时,注意引入的顺序,微信的需要在前。

调用的时机

在引用依赖的文件后,需要在 HTML 中监听 UniAppJSBridgeReady 事件触发后,才能安全调用 uni 的 API。

document.addEventListener('UniAppJSBridgeReady', function() {

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值