在UniApp中使用WebView实现双向通信完整代码
更新时间：2025年06月24日 08:30:19 作者：陶之妖妖
这篇文章主要介绍了在UniApp中使用WebView实现双向通信的相关资料,适用于需调用不支持的API（如文件上传）的场景,包含Vue与HTML间的数据交互及调试技巧,文中通过代码介绍的非常详细,需要的朋友可以参考下
为什么用WebView？
WebView是UniApp中用于嵌入网页内容的组件，允许在应用中加载和显示网页。它适用于需要在应用中集成外部网页或HTML内容的场景，如展示帮助文档、加载第三方服务等。简单来说就是：我需要在app环境做一些uniapp的api不支持的功能，如：文件上传、音源转码等；
一、在vue文件中创建webview
插入的时候注意下，如果小伙伴用了自己src的地址发现页面出不来，可以也换成百度的试一下，如果百度的出的来，那就是你地址有问题；
<template>
<web-view
ref="webview"
id="myWebview"
src="http://baidu.com"
:fullscreen="false"
@message="handleMessage"
:webview-styles="{
process: false,
}" />
<up-button @click="myClickFn">点击</up-button>
</template>二、双向通信：
2.1、uniapp→webview
- vue中发送数据到html文件
// vue中发送数据到html文件，getMsgFromApp名字自定义
myClickFn() {
// #ifdef APP-PLUS
//选择到自己的webview-------h5不支持
var currentWebview = this.$parent.$scope.$getAppWebview().children()[0]
currentWebview.evalJS(`getMsgFromApp(${你的数据})`)
// #Endif
},- html中接收来自 uniapp 的消息
// html中接收来自 uniapp 的消息
window.getMsgFromApp = function (arg) {
console.log('接收来自 uniapp 的消息，arg',arg)
}2.2、webview→uniapp
- html向uniapp 发送消息
// 向 uniapp 发送消息
function sendMessageToUniapp() {
window.uni.postMessage({
data: {
type: 'fromWebview',
message: '这是来自 webview 的消息',
},
})
}- uniapp接收html消息
<web-view
、、、、
@message="handleMessage"
/>
// 接收来自 webview 的消息
handleMessage(event) {
console.log('收到来自 webview 的消息：', event.detail)
},三、完整代码
3.1UniApp:
<template>
<web-view
ref="webview"
id="myWebview"
src="http://baidu.com"
:fullscreen="false"
@message="handleMessage"
:webview-styles="{
process: false,
}" />
<up-button @click="myClickFn">点击</up-button>
</template>
<script>
export default {
data() {
return {}
},
methods: {
// 接收来自 webview 的消息
handleMessage(event) {
console.log('收到来自 webview 的消息：', event.detail)
},
// 发送数据到html文件
myClickFn() {
// #ifdef APP-PLUS
//选择到自己的webview-------h5不支持
var currentWebview = this.$parent.$scope.$getAppWebview().children()[0]
currentWebview.evalJS(`getMsgFromApp(${你的数据})`) // #Endif
},
},
}
</script>
3.2WebView的html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>我的webview</title>
</head>
<body>
<script src="xxxxxxxxxx" charset="UTF-8"></script> //引入的js文件
<script type="text/javascript" src="https://gitcode.net/dcloud/uni-app/-/raw/dev/dist/uni.webview.1.5.6.js"></script>
<div id="content" class="content">
内容！！！！！！
</div>
<script type="text/javascript">
// 接收来自 uniapp 的消息
window.getMsgFromApp = function (arg) {
console.log('接收来自 uniapp 的消息')
}
// 向 uniapp 发送消息
function sendMessageToUniapp() {
window.uni.postMessage({
data: {
type: 'fromWebview',
message: '这是来自 webview 的消息',
},
})
}
window.onload = function () {
// 页面创建时执行
console.log('页面创建了')
}
window.addEventListener('pagehide', function (event) {
if (event.persisted) {
// 页面被浏览器缓存（如iOS Safari的后台标签）
console.log('页面被缓存');
} else {
// 页面正在被销毁
console.log('页面被销毁')
}
});
</script>
</body>
<style>
</style>
</html>总结
到此这篇关于在UniApp中使用WebView实现双向通信的文章就介绍到这了,更多相关UniApp WebView双向通信内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Vue3中的响应式系统由Proxy实现,它取代了Vue2中的Object.defineProperty,提供了更强大的功能和更好的性能,下面给大家介绍Vue3实现双向绑定的基本原理和代码示例解析,感兴趣的朋友一起看看吧2024-12-12
vue3使用vis绘制甘特图制作timeline可拖动时间轴及时间轴中文化(推荐)
这篇文章主要介绍了vue3使用vis绘制甘特图制作timeline可拖动时间轴，时间轴中文化,本文结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-02-02
这篇文章主要介绍了vue单元格多列合并的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-11-11
这篇文章主要为大家详细介绍了如何基于vue手动实现一个日历组件,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以跟随小编一起学习一下2024-01-01
本文通过实例代码给大家介绍了vue 图标选择器的相关知识，图文实例代码相结合给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧2021-11-11
这篇文章主要介绍了vue之组件和iframe页面的相互传参问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-06-06
VUE2.0自定义指令与v-if冲突导致元素属性修改错位问题及解决方法
这篇文章主要介绍了VUE2.0自定义指令与v-if冲突导致元素属性修改错位问题及解决方法，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-07-07
vue深拷贝的三种实现方式：1、通过递归方式实现深拷贝；2、JSON.parse(JSON.stringify(obj))；3、jQuery的extend方法实现深拷贝,本文通过实例代码给大家介绍的非常详细,需要的朋友参考下吧2023-11-11
开发项目有一段时间了,随着项目越来越大,打包的时间也相应的变长了,打包时的内存也增多了,这时候产生了一个问题,在发布项目的时候,会出现Vue热更新出现内存溢出的问题,所以本文给大家介绍了Vue热更新出现内存溢出的解决方法,需要的朋友可以参考下2024-05-05
这篇文章主要介绍了vue3 el-select懒加载以及自定义指令方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-04-04
最新评论