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>
<!-- 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>总结
到此这篇关于uniapp和webview之间通信的文章就介绍到这了,更多相关uniapp和webview通信内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
解决vue2 在mounted函数无法获取prop中的变量问题
这篇文章主要介绍了vue2 在mounted函数无法获取prop中的变量的解决方法 ,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-11-11
这篇文章介绍了VUE中template的三种写法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-04-04
有时候会碰到查询条件需要用下拉框来区分的时候,比如需要区分全部 | 启用 | 停用三个状态,这时一般会给全部的value值设置为'',但是这样会导致下拉框无法选中对应的全部选项,本文就来介绍一下这个问题解决,感兴趣的可以了解一下2024-11-11
文章介绍了如何在Vue中设置页面全屏,包括下载插件、全屏、退出全屏、全屏切换等操作,同时,还分享了在若依框架中实现主页面内容全屏的方法,包括配置全局变量和在布局文件中进行设置2025-02-02
这篇文章主要介绍了vue如何还原data中数据-重置问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
vue中实现当前时间echarts图表时间轴动态的数据(实例代码)
这篇文章主要介绍了vue中实现当前时间echarts图表时间轴动态的数据，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-10-10
这篇文章主要介绍了Vue3中watch的详解,主要包括Vue2使用watch及Vue3使用watch的方法，通过多种情况实例代码相结合给大家详细讲解，需要的朋友可以参考下2022-11-11
axios 发 post 请求，后端接收不到参数的完美解决方案
这篇文章主要介绍了axios 发 post 请求，后端接收不到参数的解决方案,场景很简单，就是一个正常 axios post 请求，本文给大家分享问题原因分析及解决方案需要的朋友可以参考下2022-12-12
对于每天都在用的计算属性(computed)，小编猜大家肯定也想窥探其奥妙与原理对吧，所以这篇文章就来讲讲computed是如何实现的吧，感兴趣的小伙伴可以学习一下2023-08-08
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
这篇文章主要介绍了vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下2021-03-03
最新评论