前言
在uniapp开发过程中，uniapp编译出的平台的小程序、APP中，都需要使用webview组件进行内嵌H5。
内嵌H5有哪些好处：
- 通过web-view内嵌，APP和小程序可以直接复用这些H5资源，避免了重复开发。
- 无需升级原生代码就能展示新的H5内容，支持动态更新功能
当然H5页面也可调用原生API，这就涉及到内嵌H5与webview通信。对于uniapp可以编译出多平台的代码，每个平台的webview通信都会有所差别。
如图所示：
本文主要讲解和实践微信小程序的webview与h5的双向通信。
1. 前置工作
因为是uniapp开发的，按照[uni-app webview官方文档]H5可以使用window.postMessage，但经过实践，这个方法并没办法发送数据.
1.1 引入uni.webview
所以我们使用的都是使用uni.webView.postMessage，需要说明的是不管你的H5是uniapp编译、还是非uniapp编译，都需要额外引入一个js(uni.webview.1.5.6.js)才能支持，需要1.5.6版本才支持鸿蒙系统。
特别需要注意的是： 引入的文件提供的全局变量是uni，如果你的H5是uni-app编译出的，会与原有的uni冲突，会导致覆盖掉你引入的js变量。可以直接修改引入的全局变量，例如将其修改为webUni
解决方案：修改全局uni的名称
可以直接在index.html中引入：
html
// 微信sdk
<script src='https://res2.wx.qq.com/open/js/jweixin-1.6.0.js'></script>
// 支付宝sdk
<script src='https://appx/web-view.min.js'></script>
// uni sdk
<script type="text/javascript" src="/static/uni.webview.1.5.6.js"></script>
<script>
document.addEventListener('UniAppJSBridgeReady', function () {
window.webUni = webUni.webView
webUni.getEnv(function (res) {
console.log('当前环境：' + JSON.stringify(res));
});
});
</script>1.2 引入对应小程序的sdk
如果不引入，通过uni.getEnv获取的环境一直为h5,引入后才能判断环境。
经过实践，uniapp编译的H5和非uniapp编译的H5用法一致。
2. 微信小程序webview通信概述
uniapp编译出的微信小程序weiview通信，参考微信小程序webview组件官方文档，webview 指向网页的链接。可打开关联的公众号的文章，其它网页需登录小程序管理后台配置业务域名。
可以用一个图简述下通信的过程：
下面我们具体实践下。
3. 微信小程序->H5
从微信小程序发送参数给H5，通过url传参数给H5，并且参数需要encodeURIComponent,参数的长度是有限制的，如果需要带过多参数，建议通过接口保存和获取。
例如：可以约定一个随机值，关联对应的传递参数，H5通过query接收到这个随机值，通过接口去获取对应的参数，完成相应的操作。
具体代码如下：
js
<web-view :src="url" @message="bindMessage" @load="bindLoad"></web-view>4. H5->微信小程序
H5发送到微信小程序的参数，web-view网页中可使用JSSDK 1.3.2提供的接口返回小程序页面。wx.miniProgram.postMessage：
js
webUni.postMessage({
data: {
name: 'jack',
age: 20,
title: '复制'
}
})如果H5直接发送数据，微信小程序是不会实时接收到数据，需要在特定的时机触发，例如分享。
发送完成，点击微信小程序开发者工具分享，此时数据通过message接收到，接收的数据是一个数组，需要取第一个，不同的小程序取值不同。
5. 总结
最后总结一下： 微信小程序webview通信，是有一些限制，小程序通过url传参给H5，H5通过postMessage发送给小程序，小程序接收数据是要在特定的时机才能获取。
如果错误，请指正O^O!