在UniApp中使用WebView实现双向通信完整代码

殷含玉 · 发表于 2025-9-11 13:22:39

为什么用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双向通信内容请搜索晓枫资讯以前的文章或继续浏览下面的相关文章希望大家以后多多支持晓枫资讯！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

		自动登录	找回密码
密码			立即注册

在UniApp中使用WebView实现双向通信完整代码

浏览过的版块