uni-app h5项目引入uni.webview.js 实现与app通讯

最新推荐文章于 2024-06-01 17:02:56 发布

Fengyu无阻-流川

最新推荐文章于 2024-06-01 17:02:56 发布

阅读量4.8k

点赞数 8

文章标签： vue.js

原文链接：https://juejin.cn/post/7055106174428905479

版权

uni-app h5项目引入uni.webview.js 实现与app通讯

最近在开发app项目时需要使用webview嵌入h5页面并实现h5与app的互相通讯，根据官网提供的资料来看只需要引入webview的sdk就可以调用uni-app的api了，但是看了半天发现只能在原生h5中使用，我这个h5页面是使用uni-app写的，我希望在uni-app中引入该webview.js然后调用api；

根据官网例子：

在这里插入图片描述
这样在原生h5中确实可以使用，但是放在uniapp h5项目中就会报错，无法调用api
然后查阅了大量资料以及各自试错后虽然可以调用api了但是uniapp的默认标签样式会全部失效，需要重新写样式；后面有修复这个问题的方法。

uni-app h5项目引入uni.webview.js及调用api

找到index.html
在这里插入图片描述
引入uni.webview.js 注意：需要在body外引入不然会报错

在这里插入图片描述
manifest.json h5配置中引入index.html

使用新版本index.html页面引入uni.webview.js会使页面样式丢失（可以自己编译试一下）

index.html可以使用下面这个

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>
			<%= htmlWebpackPlugin.options.title %>
		</title>
		<!-- Open Graph data -->
		<!-- <meta property="og:title" content="Title Here" /> -->
		<!-- <meta property="og:url" content="http://www.example.com/" /> -->
		<!-- <meta property="og:image" content="http://example.com/image.jpg" /> -->
		<!-- <meta property="og:description" content="Description Here" /> -->
		<script>
			var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports(
				'top: constant(a)'))
			document.write(
				'<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
				(coverSupport ? ', viewport-fit=cover' : '') + '" />')
		</script>
		<link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" />
	</head>
	<body>
		<noscript>
			<strong>Please enable JavaScript to continue.</strong>
		</noscript>
		<div id="app"></div>
		<!-- built files will be auto injected -->
	</body>
	<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
	<script>
		  // 待触发 `UniAppJSBridgeReady` 事件后，即可调用 uni 的 API。
		  document.addEventListener('UniAppJSBridgeReady', function() {
			uni.webView.getEnv(function(res) {
				console.log('当前环境：' + JSON.stringify(res));
			});
		  });
	</script>
</html>