【web-view加载h5】小程序中web-view加载uni-app H5如何使用postMessage方法的解决方案

最新推荐文章于 2024-09-03 09:02:06 发布

上网的虫不叫网虫

最新推荐文章于 2024-09-03 09:02:06 发布

阅读量4.2k

点赞数 2

分类专栏： uniapp 微信小程序文章标签： html 小程序 html5 前端前端框架

本文链接：https://blog.csdn.net/qq_42961150/article/details/120330032

版权

uniapp 同时被 2 个专栏收录

31 篇文章 9 订阅

订阅专栏

微信小程序

19 篇文章 4 订阅

订阅专栏

一、前言

小程序web-view访问一个非uniapp制作的h5页面的相互通信，这个我在之前的文章中已经写得很清楚了，也没有太多的坑，具体可查看：uniapp中使用web-view相互通信
小程序中web-view加载uni-app H5其实思路是一样的，只不过这里有一些坑，而且我在社区去搜相关问题，确实有好些人提问，但是下面回答的也不太靠谱，于是我在这里综合起来总结下：

二、解决方案

【坑1】怎么在uniapp H5中嵌入uni sdk？

根据官方提供的，h5配置中有个index.html模板路径，默认为空，可定制生成的html代码，自定义meta、引入外部js等，参考
在项目根目录建立一个template.h5.html（仿照hello-uni-app项目），然后在h5配置中填入template.h5.html
template.h5.html中的代码可以直接先复制官方提供的h5-template自定义模板的代码，或者下面的代码
然后将uni-sdk等第三方引入到html中，注意这里就有个小坑： uni sdk放到body下面！下面！下面！这里不注意的话，可能会根据我们的习惯放到body里面。

template.h5.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">
		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>');
		}
		if (!/toutiaomicroapp/i.test(userAgent) && document.querySelector('.post-message-section')) {
			document.querySelector('.post-message-section').style.visibility = 'visible';
		}
	</script>
	<!-- uni 的 SDK -->
	<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
	<script>
		document.addEventListener('UniAppJSBridgeReady', function() {
			console.log(uni, uni.webView)
			uni.webView.getEnv(function(res) {
				console.log('当前环境：' + JSON.stringify(res));
			});
			<!--经过测试验证这里已经成功了-->
			uni.webView.navigateTo({
				url:'/pages/test1/test1'
			})
		});
	</script>
</html>

【坑2】web-view 加载 uni-app H5，内部跳转冲突如何解决?

该问题也是在web-view的下面的FAQ中有说明
使用 uni.webView.navigateTo…，这样就避免了与内部uni.navigateTo的冲突
注意：再次提醒下uni sdk放到body下面，否则uni.webView是找不到的

【坑3】uniappzz+VUE3中的自定义模板template.h5.html不生效?

根据做项目的时候发现在使用VUE3模式下，自定义模板template.h5.html不生效，而生效是默认的index.html，那么就可以直接在index.html中写：
注意：这里还有个坑，uni.webView应该在初始的时候就用变量保存下来，后面直接用变量，不能在document.addEventListener(‘UniAppJSBridgeReady’, function() {})中去保存，否则拿不到uni.webView

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
    <title></title>
    <!--preload-links-->
    <!--app-context-->
  </head>
  <body>
    <div id="app"><!--app-html--></div>
    <script type="module" src="/main.js"></script>
		<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>');
			}
			if (!/toutiaomicroapp/i.test(userAgent) && document.querySelector('.post-message-section')) {
				document.querySelector('.post-message-section').style.visibility = 'visible';
			}
		</script>
		<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
		<script type="text/javascript">
			var uniWebView = uni.webView;//必须在这时候保存下来
			console.log(uniWebView)
			uniWebView.getEnv(function(res) {
				console.log('当前环境：' + JSON.stringify(res));
			});
		</script>
  </body>
</html>

代码中使用：

uniWebView.navigateTo({
	url:'/pages/test1/test1'
})

三、补充：h5中获取小程序或父级传递的参数

可以将此方法写到公共调用的地方，话不多说，直接上代码：

function getQuery(name) {
    let reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
    let r = decodeURIComponent(window.location.search).substr(1).match(reg);
    if(r != null) {
        // 对参数值进行解码
        return decodeURIComponent(r[2]);
    }
    return null;
}

使用的时候直接调用：const id = getQuery(‘id’);