电商网站首页图片西安曲江文化园区建设开发有限公司网站
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><!-- built files will be auto injected --></body><!-- uni 的 SDK --><!-- 需要把 uni.webview.1.5.6.js 下载到自己的服务器 --><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，用于在不同窗口或内嵌页面（如 <iframe>）之间安全地传递消息。它允许跨源通信，即不同域名、协议或端口的页面之间可以互相发送消息。
window.postMessage 方法允许一个窗口向另一个窗口发送消息。消息的接收方可以通过监听 message 事件来接收消息。为了确保安全性，postMessage 方法需要明确指定目标窗口的来源（targetOrigin），以防止消息被发送到不安全的地址。
主页面
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Main Page</title></head><body><h1>Main Page</h1><iframe id="myIframe" src="https://other-origin.com/iframe.html" width="600" height="400"></iframe><button id="sendMessage">Send Message to Iframe</button><script>// 获取 iframe 的引用const iframe = document.getElementById('myIframe');// 监听按钮点击事件，向 iframe 发送消息document.getElementById('sendMessage').addEventListener('click', () => {// 确保 iframe 已加载完成if (iframe.contentWindow) {iframe.contentWindow.postMessage('Hello from main page!', 'https://other-origin.com');}});// 监听来自 iframe 的消息window.addEventListener('message', (event) => {// 验证来源if (event.origin !== 'https://other-origin.com') return;console.log('Received message from iframe:', event.data);});</script></body>
</html>
内嵌页面
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Iframe Page</title>
</head>
<body><h1>Iframe Page</h1><button id="sendMessage">Send Message to Main Page</button><script>// 监听按钮点击事件，向主页面发送消息document.getElementById('sendMessage').addEventListener('click', () => {// 向父窗口发送消息window.parent.postMessage('Hello from iframe!', '*');});// 监听来自主页面的消息window.addEventListener('message', (event) => {// 验证来源if (event.origin !== 'http://main-page-origin.com') return;console.log('Received message from main page:', event.data);});</script>
</body>
</html>