uniapp 打包 H5 实现在 uniapp 打包 APP 的 webview 通信

最新推荐文章于 2025-10-14 14:02:24 发布

原创

最新推荐文章于 2025-10-14 14:02:24 发布 · 3.8k 阅读

37 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #html #前端

该文章已生成可运行项目，

一、前言

遇到 uniapp 打包的 APP 在 webview 内嵌入 uniapp 打包的 H5 页面的需求，并实现通信。本篇主要总结了如何实现并总结遇到的问题，希望可以帮助大家减少负担。

实现需求主要有三个地方需要处理：

index.html 的打包配置
导入 uni.webview.js
使用 myUni.getEnv() 导入和 myUni.webView.postMessage() 导出

二、index.html 的打包配置

直接拷贝覆盖 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 -->
		<script type="text/javascript">
			var userAgent = navigator.userAgent;
			if (userAgent.indexOf('AlipayClient') > -1) {
     
     
				// 支付宝小程序的 JS-SDK 防止 404 需要动态加载，如果不需要兼容支付宝小程序，则无需引用此 JS 文件。
				document.writeln('<script src="https://appx/web-view.min.js"' + '>' + '<' + '/' + 'script>');
			} else if (/QQ/i.test(userAgent) && /miniProgram/i.test(userAgent)) {
     
     
				// QQ 小程序
				document.write(
					'<script type="text/javascript" src="https://qqq.gtimg.cn/miniprogram/webview_jssdk/qqjssdk-1.0.0.js"><\/script>'
				);
			} else if (/miniProgram/i.test(userAgent) && /micromessenger/i.test(userAgent)) {
     
     
				// 微信小程序 JS-SDK 如果不需要兼容微信小程序，则无需引用此 JS 文件。
				document.write('<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"><\/script>');
			} else if (/toutiaomicroapp/i.test(userAgent)) {
     
     
				// 头条小程序 JS-SDK 如果不需要兼容头条小程序，则无需引用此 JS 文件。
				document.write(
					'<script type="text/javascript" src="https://s3.pstatp.com/toutiao/tmajssdk/jssdk-1.0.1.js"><\/script>');
			} else if (/swan/i.test(userAgent)) {
     
     
				// 百度小程序 JS-SDK 如果不需要兼容百度小程序，则无需引用此 JS 文件。
				document.write(
					'<script type="text/javascript" src="https://b.bdstatic.com/searchbox/icms/searchbox/js/swan-2.0.18.js"><\/script>'
				);
			} else if (/quickapp/i.test(userAgent)) {
     
     
				// quickapp
				document.write('<script type="text/javascript" src="https://quickapp/jssdk.webview.min.js"><\/script>');
			}
		</script>
		<!-- uni 的 SDK -->
		<script type="text/javascript" src="<%= BASE_URL %>static/uni.webview.js"></script>
		<script type="text/javascript" src="https://unpkg.com/@dcloudio/uni-webview-js@0.0.3/index.js"></script>
		<script type="text/javascript">