uniapp内嵌h5向app，微信小程序执行postMessage发送参数或操作路由

web-view组件的postmessage方法可以向外部发送参数在这里插入图片描述
我们在index.html文件中（没有自己创建，在manifest.json的H5配置中设置）引入uni的 jssdk
然后在body外引入：

<script type="text/javascript" src="https://gitee.com/dcloud/uni-app/raw/dev/dist/uni.webview.1.5.3.js"></script>

接着就可以执行uni.webView.postMessage()了
也可以将js下载到本地的static文件中，然后这样引入：

<script type="text/javascript" src="<%= BASE_URL %>static/xxxx.js"></script>

但是这样只能给app发送参数，微信小程序只有在分享返回等操作后才会触发，所以可以
引入weixin的jssdk：npm install weixin-js-sdk --save，
在main.js中写入

let wx = require('weixin-js-sdk')
Vue.prototype.wx = wx

    this.wx.miniProgram.postMessage({
              data: {
                action: "message",
              },
            });              
        this.wx.miniProgram.navigateBack() //操作小程序后退，触发message方法
      }

这样app和小程序就可以在web-view的@message方法里监听到h5传来的参数了
最后附上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="<%= BASE_URL %>static/xxxx.js"></script>
	<!-- <script type="text/javascript" src="https://gitee.com/dcloud/uni-app/raw/dev/dist/uni.webview.1.5.3.js"></script> -->
	<script>
		      var userAgent = navigator.userAgent;
			  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>');
		      } 
		  // 待触发 `UniAppJSBridgeReady` 事件后，即可调用 uni 的 API。
		  document.addEventListener('UniAppJSBridgeReady', function() {
			uni.webView.getEnv(function(res) {
				console.log('当前环境：' + JSON.stringify(res));
			});
		  });
	</script>
</html>

uniapp内嵌h5向app，微信小程序执行postMessage发送参数或操作路由

1 条评论