uniapp-微信小程序与web-view中的@message接收不到信息的解决方法

前言

自从最近开始做了小程序，头发越掉越多了，今天总结下最近用到的小程序中内嵌的h5页面无法接收消息的问题

问题描述

有一个需要从h5页面给小程序中发送消息的需求，但是傻乎乎直接发送不起作用，然后网上找了很多方法，什么window发啊，要加返回啊什么的，最后还是不太行

解决方案

1.h5页面的index.html引入js-sdk什么的（加入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').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 type="text/javascript">
	 document.addEventListener('UniAppJSBridgeReady', function() {
    // 在这里测试是否接收到
	    uni.webView.postMessage({  
			 data: {  
			   type: 'back'  
			 }  
		   });  
		uni.webView.getEnv(function(res) {
		 console.log('当前环境：' + JSON.stringify(res));
	    });
	    uni.webView.back(); 
	});
	</script>

2.uniapp小程序页面

<web-view src="h5地址" @message="onMessage" ></web-view>

//下面methods里面
	onMessage(event) {
		    console.log('Received message from H5:',event);
		},

这样就接收到了，关键步骤还是引入相关的兼容模块，在webview中的h5页面添加相关兼容sdk后就没问题了