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

前言

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

问题描述

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

解决方案

1.h5页面的index.html引入js-sdk什么的（加入body下面）

 var userAgent = navigator.userAgent; if (userAgent.indexOf(\'AlipayClient\') > -1) { // 支付宝小程序的 JS-SDK 防止 404 需要动态加载，如果不需要兼容支付宝小程序，则无需引用此 JS 文件。 document.writeln(\'\' + \'\'); } else if (/QQ/i.test(userAgent) && /miniProgram/i.test(userAgent)) { // QQ 小程序 document.write( \'\' ); } else if (/miniProgram/i.test(userAgent) && /micromessenger/i.test(userAgent)) { // 微信小程序 JS-SDK 如果不需要兼容微信小程序，则无需引用此 JS 文件。 document.write(\'\'); } else if (/toutiaomicroapp/i.test(userAgent)) { // 头条小程序 JS-SDK 如果不需要兼容头条小程序，则无需引用此 JS 文件。 document.write( \'\'); } else if (/swan/i.test(userAgent)) { // 百度小程序 JS-SDK 如果不需要兼容百度小程序，则无需引用此 JS 文件。 document.write( \'\' ); } else if (/quickapp/i.test(userAgent)) { // quickapp document.write(\'\'); } if (!/toutiaomicroapp/i.test(userAgent)) { document.querySelector(\'.post-message-section\').style.visibility = \'visible\'; } document.addEventListener(\'UniAppJSBridgeReady\', function() { // 在这里测试是否接收到 uni.webView.postMessage({ data: { type: \'back\' } }); uni.webView.getEnv(function(res) { console.log(\'当前环境：\' + JSON.stringify(res)); }); uni.webView.back(); });

2.uniapp小程序页面

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

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