在UniApp中使用WebView實(shí)現(xiàn)雙向通信完整代碼
更新時(shí)間：2025年06月24日 08:30:19 作者：陶之妖妖
這篇文章主要介紹了在UniApp中使用WebView實(shí)現(xiàn)雙向通信的相關(guān)資料,適用于需調(diào)用不支持的API（如文件上傳）的場(chǎng)景,包含Vue與HTML間的數(shù)據(jù)交互及調(diào)試技巧,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
為什么用WebView？
WebView是UniApp中用于嵌入網(wǎng)頁內(nèi)容的組件，允許在應(yīng)用中加載和顯示網(wǎng)頁。它適用于需要在應(yīng)用中集成外部網(wǎng)頁或HTML內(nèi)容的場(chǎng)景，如展示幫助文檔、加載第三方服務(wù)等。簡(jiǎn)單來說就是：我需要在app環(huán)境做一些uniapp的api不支持的功能，如：文件上傳、音源轉(zhuǎn)碼等；
一、在vue文件中創(chuàng)建webview
插入的時(shí)候注意下，如果小伙伴用了自己src的地址發(fā)現(xiàn)頁面出不來，可以也換成百度的試一下，如果百度的出的來，那就是你地址有問題；
<template>
<web-view
ref="webview"
id="myWebview"
src="http://baidu.com"
:fullscreen="false"
@message="handleMessage"
:webview-styles="{
process: false,
}" />
<up-button @click="myClickFn">點(diǎn)擊</up-button>
</template>二、雙向通信：
2.1、uniapp→webview
- vue中發(fā)送數(shù)據(jù)到html文件
// vue中發(fā)送數(shù)據(jù)到html文件，getMsgFromApp名字自定義
myClickFn() {
// #ifdef APP-PLUS
//選擇到自己的webview-------h5不支持
var currentWebview = this.$parent.$scope.$getAppWebview().children()[0]
currentWebview.evalJS(`getMsgFromApp(${你的數(shù)據(jù)})`)
// #Endif
},- html中接收來自 uniapp 的消息
// html中接收來自 uniapp 的消息
window.getMsgFromApp = function (arg) {
console.log('接收來自 uniapp 的消息，arg',arg)
}2.2、webview→uniapp
- html向uniapp 發(fā)送消息
// 向 uniapp 發(fā)送消息
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">點(diǎn)擊</up-button>
</template>
<script>
export default {
data() {
return {}
},
methods: {
// 接收來自 webview 的消息
handleMessage(event) {
console.log('收到來自 webview 的消息：', event.detail)
},
// 發(fā)送數(shù)據(jù)到html文件
myClickFn() {
// #ifdef APP-PLUS
//選擇到自己的webview-------h5不支持
var currentWebview = this.$parent.$scope.$getAppWebview().children()[0]
currentWebview.evalJS(`getMsgFromApp(${你的數(shù)據(jù)})`) // #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">
內(nèi)容?。。。。?！
</div>
<script type="text/javascript">
// 接收來自 uniapp 的消息
window.getMsgFromApp = function (arg) {
console.log('接收來自 uniapp 的消息')
}
// 向 uniapp 發(fā)送消息
function sendMessageToUniapp() {
window.uni.postMessage({
data: {
type: 'fromWebview',
message: '這是來自 webview 的消息',
},
})
}
window.onload = function () {
// 頁面創(chuàng)建時(shí)執(zhí)行
console.log('頁面創(chuàng)建了')
}
window.addEventListener('pagehide', function (event) {
if (event.persisted) {
// 頁面被瀏覽器緩存（如iOS Safari的后臺(tái)標(biāo)簽）
console.log('頁面被緩存');
} else {
// 頁面正在被銷毀
console.log('頁面被銷毀')
}
});
</script>
</body>
<style>
</style>
</html>總結(jié)
到此這篇關(guān)于在UniApp中使用WebView實(shí)現(xiàn)雙向通信的文章就介紹到這了,更多相關(guān)UniApp WebView雙向通信內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue.js實(shí)現(xiàn)數(shù)據(jù)雙向綁定的代碼示例
在我們使用vue的時(shí)候,當(dāng)數(shù)據(jù)發(fā)生了改變,界面也會(huì)跟著更新,但這并不是理所當(dāng)然的,我們修改數(shù)據(jù)的時(shí)候vue是如何監(jiān)聽數(shù)據(jù)的改變以及當(dāng)數(shù)據(jù)發(fā)生改變的時(shí)候vue如何讓界面刷新的,所以本文就給大家講講Vue.js 數(shù)據(jù)雙向綁定是如何實(shí)現(xiàn)的2023-07-07
下面小編就為大家分享一篇vue獲取當(dāng)前激活路由的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了vue-quill-editor如何設(shè)置字體大小，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
詳解vite2.0配置學(xué)習(xí)(typescript版本)
這篇文章主要介紹了詳解vite2.0配置學(xué)習(xí)(typescript版本)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
vue之?dāng)?shù)據(jù)交互實(shí)例代碼
本篇文章主要介紹了vue之?dāng)?shù)據(jù)交互實(shí)例代碼，vue中也存在像ajax和jsonp的數(shù)據(jù)交互，實(shí)現(xiàn)向服務(wù)器獲取數(shù)據(jù)，有興趣的可以了解一下2017-06-06
nginx如何配置vue項(xiàng)目history的路由模式(非根目錄)
這篇文章主要介紹了nginx如何配置vue項(xiàng)目history的路由模式(非根目錄),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue自定義指令添加跟隨鼠標(biāo)光標(biāo)提示框v-tooltip方式
這篇文章主要介紹了vue自定義指令添加跟隨鼠標(biāo)光標(biāo)提示框v-tooltip方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
vue2.0在沒有dev-server.js下的本地?cái)?shù)據(jù)配置方法
這篇文章主要介紹了vue2.0在沒有dev-server.js下的本地?cái)?shù)據(jù)配置方法的相關(guān)資料，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2018-02-02
vue實(shí)現(xiàn)el-menu和el-tab聯(lián)動(dòng)的示例代碼
本文主要介紹了vue實(shí)現(xiàn)el-menu和el-tab聯(lián)動(dòng)的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
一個(gè)組件相當(dāng)于是一個(gè)小模塊,它是html、css與js的集合體,可以用于描述頁面中的某個(gè)結(jié)構(gòu)(模塊),下面這篇文章主要給大家介紹了關(guān)于輕松學(xué)Vue組件之單文件組件的相關(guān)資料,需要的朋友可以參考下2023-03-03