uniapp 和 webview 之间的通信
1.背景
应用使用了uniapp开发跨端应用，在uniapp中内嵌webview页面实现页面热更新效果，不需要用户单独重新安装软件即可实现页面的版本更新。
2.webview通知uniapp
在开发过程中我们难会遇到需要uniapp和webview来实现数据通信的场景，接下来介绍一种可行的uniapp和webview的数据通信方案。
在webview中我们可以使用当前webview实例的postMessage方法来触发webview组建的onPostMessage方法来传递数据，重点就需要放在了如何将uniapp的webview实例来加入到webview的h5项目当中。
uniapp官方文档中指出可以使用uni.webview.js 这个js SDK 来将当前的uni对象注入到webview所加载的H5项目当中。
最新版地址：https://gitcode.net/dcloud/uni-app/-/raw/dev/dist/uni.webview.1.5.6.js；
1.UniAppJSBridgeReady :
这个是在引入webview的SDK之后，当webview页面被加载完成之后会触发，该事件触发表示着uniapp和webview之间的桥成功搭建，uni对象被成功的注入到当前H5的上下文中。
我们在index.html文件中将SDK引入，这里的SDK引入必须放在body标签下面。
DOCTYPE html>
<html lang="zh-CN">
<head>
...
head>
<body>
<noscript>
<strong>Please enable JavaScript to continue.strong>
noscript>
<div id="app">div>
body>
<script type="text/javascript" src="https://gitcode.net/dcloud/uni-app/-/raw/dev/dist/uni.webview.1.5.6.js">script>
<script>
document.addEventListener('UniAppJSBridgeReady', function() {
uni.webView.getEnv(function(res) {
console.log('当前环境：' + JSON.stringify(res));
});
// uni.webView.navigateTo(...)
});
script>
html>
2.webview中可用的uni API
| 方法名 | 说明 | 平台差异说明 |
|---|---|---|
| uni.navigateTo | navigateTo | |
| uni.redirectTo | redirectTo | |
| uni.reLaunch | reLaunch | |
| uni.switchTab | switchTab | |
| uni.navigateBack | navigateBack | |
| uni.postMessage | 向应用发送消息 | 抖音小程序不支持、H5 暂不支持（可以直接使用 window.postMessage |
| uni.getEnv | 获取当前环境 | 抖音小程序与飞书小程序不支持 |
3.发送消息
我们在H5中可以使用uni.postMessage方法来向应用发送消息，应用中的webview的onPostMessage方法会被触发，从而通过参数就可以拿到需要传递的数据。
或者因为可以使用uni.webView获取到当前webview实例，调用实例postMessage方法也可以传递数据。
注意： 这种做法在H5端是不支持的，后续会介绍H5端的处理方式。
3.uniapp 通知webview
uniapp通知webview页面，官方提供了一种巧妙地方式。在H5项目中全局暴露一个用于接收数据的函数，然后在uniapp中去触发这个函数将参数传递过去即可是实现数据的传递。
evalJS
uniapp为每一个webview组件实例挂载了一个evalJS方法，用于为webview页面注入一个可执行的js脚本代码。这段代码会在webview的全局作用域中执行。我们使用evalJS来触发一个特定的函数，在H5的全局作用域中定义对应的函数，并提前写好对应的数据处理逻辑。后续只需要在uniapp中触发evalJS即可实现数据的传递。
注意：这种方式在H5端也是不支持的，后续会介绍。
4.H5中实现数据的通信
上述介绍的webview和uniapp的通信只针对于uniapp编译的代码是非H5环境，如果是H5环境则无效。因此使用postMessage 方案替代
postMessage
window.postMessage 是一个非常强大的 Web API，用于在不同窗口或内嵌页面（如