在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双向通信内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
在我们使用vue的时候,当数据发生了改变,界面也会跟着更新,但这并不是理所当然的,我们修改数据的时候vue是如何监听数据的改变以及当数据发生改变的时候vue如何让界面刷新的,所以本文就给大家讲讲Vue.js 数据双向绑定是如何实现的2023-07-07
下面小编就为大家分享一篇vue获取当前激活路由的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了vue-quill-editor如何设置字体大小，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了详解vite2.0配置学习(typescript版本)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-02-02
本篇文章主要介绍了vue之数据交互实例代码，vue中也存在像ajax和jsonp的数据交互，实现向服务器获取数据，有兴趣的可以了解一下2017-06-06
nginx如何配置vue项目history的路由模式(非根目录)
这篇文章主要介绍了nginx如何配置vue项目history的路由模式(非根目录),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
vue自定义指令添加跟随鼠标光标提示框v-tooltip方式
这篇文章主要介绍了vue自定义指令添加跟随鼠标光标提示框v-tooltip方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
vue2.0在没有dev-server.js下的本地数据配置方法
这篇文章主要介绍了vue2.0在没有dev-server.js下的本地数据配置方法的相关资料，非常不错，具有参考借鉴价值,需要的朋友可以参考下2018-02-02
本文主要介绍了vue实现el-menu和el-tab联动的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
一个组件相当于是一个小模块,它是html、css与js的集合体,可以用于描述页面中的某个结构(模块),下面这篇文章主要给大家介绍了关于轻松学Vue组件之单文件组件的相关资料,需要的朋友可以参考下2023-03-03
最新评论