在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)試技巧,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
為什么用WebView？
WebView是UniApp中用于嵌入網(wǎng)頁(yè)內(nèi)容的組件，允許在應(yīng)用中加載和顯示網(wǎng)頁(yè)。它適用于需要在應(yīng)用中集成外部網(wǎng)頁(yè)或HTML內(nèi)容的場(chǎng)景，如展示幫助文檔、加載第三方服務(wù)等。簡(jiǎn)單來(lái)說(shuō)就是：我需要在app環(huán)境做一些uniapp的api不支持的功能，如：文件上傳、音源轉(zhuǎn)碼等；
一、在vue文件中創(chuàng)建webview
插入的時(shí)候注意下，如果小伙伴用了自己src的地址發(fā)現(xiàn)頁(yè)面出不來(lái)，可以也換成百度的試一下，如果百度的出的來(lái)，那就是你地址有問(wè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中接收來(lái)自 uniapp 的消息
// html中接收來(lái)自 uniapp 的消息
window.getMsgFromApp = function (arg) {
console.log('接收來(lái)自 uniapp 的消息，arg',arg)
}2.2、webview→uniapp
- html向uniapp 發(fā)送消息
// 向 uniapp 發(fā)送消息
function sendMessageToUniapp() {
window.uni.postMessage({
data: {
type: 'fromWebview',
message: '這是來(lái)自 webview 的消息',
},
})
}- uniapp接收html消息
<web-view
、、、、
@message="handleMessage"
/>
// 接收來(lái)自 webview 的消息
handleMessage(event) {
console.log('收到來(lái)自 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: {
// 接收來(lái)自 webview 的消息
handleMessage(event) {
console.log('收到來(lái)自 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">
// 接收來(lái)自 uniapp 的消息
window.getMsgFromApp = function (arg) {
console.log('接收來(lái)自 uniapp 的消息')
}
// 向 uniapp 發(fā)送消息
function sendMessageToUniapp() {
window.uni.postMessage({
data: {
type: 'fromWebview',
message: '這是來(lái)自 webview 的消息',
},
})
}
window.onload = function () {
// 頁(yè)面創(chuàng)建時(shí)執(zhí)行
console.log('頁(yè)面創(chuàng)建了')
}
window.addEventListener('pagehide', function (event) {
if (event.persisted) {
// 頁(yè)面被瀏覽器緩存（如iOS Safari的后臺(tái)標(biāo)簽）
console.log('頁(yè)面被緩存');
} else {
// 頁(yè)面正在被銷毀
console.log('頁(yè)面被銷毀')
}
});
</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)文章
Vue3實(shí)現(xiàn)雙向綁定的基本原理和代碼示例解析
Vue3中的響應(yīng)式系統(tǒng)由Proxy實(shí)現(xiàn),它取代了Vue2中的Object.defineProperty,提供了更強(qiáng)大的功能和更好的性能,下面給大家介紹Vue3實(shí)現(xiàn)雙向綁定的基本原理和代碼示例解析,感興趣的朋友一起看看吧2024-12-12
vue3使用vis繪制甘特圖制作timeline可拖動(dòng)時(shí)間軸及時(shí)間軸中文化(推薦)
這篇文章主要介紹了vue3使用vis繪制甘特圖制作timeline可拖動(dòng)時(shí)間軸，時(shí)間軸中文化,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-02-02
這篇文章主要介紹了vue單元格多列合并的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
基于vue手動(dòng)實(shí)現(xiàn)一個(gè)日歷組件
這篇文章主要為大家詳細(xì)介紹了如何基于vue手動(dòng)實(shí)現(xiàn)一個(gè)日歷組件,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01
本文通過(guò)實(shí)例代碼給大家介紹了vue 圖標(biāo)選擇器的相關(guān)知識(shí)，圖文實(shí)例代碼相結(jié)合給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2021-11-11
vue之組件和iframe頁(yè)面的相互傳參問(wèn)題
這篇文章主要介紹了vue之組件和iframe頁(yè)面的相互傳參問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-06-06
VUE2.0自定義指令與v-if沖突導(dǎo)致元素屬性修改錯(cuò)位問(wèn)題及解決方法
這篇文章主要介紹了VUE2.0自定義指令與v-if沖突導(dǎo)致元素屬性修改錯(cuò)位問(wèn)題及解決方法，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-07-07
vue深拷貝的三種實(shí)現(xiàn)方式：1、通過(guò)遞歸方式實(shí)現(xiàn)深拷貝；2、JSON.parse(JSON.stringify(obj))；3、jQuery的extend方法實(shí)現(xiàn)深拷貝,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2023-11-11
開(kāi)發(fā)項(xiàng)目有一段時(shí)間了,隨著項(xiàng)目越來(lái)越大,打包的時(shí)間也相應(yīng)的變長(zhǎng)了,打包時(shí)的內(nèi)存也增多了,這時(shí)候產(chǎn)生了一個(gè)問(wèn)題,在發(fā)布項(xiàng)目的時(shí)候,會(huì)出現(xiàn)Vue熱更新出現(xiàn)內(nèi)存溢出的問(wèn)題,所以本文給大家介紹了Vue熱更新出現(xiàn)內(nèi)存溢出的解決方法,需要的朋友可以參考下2024-05-05
這篇文章主要介紹了vue3 el-select懶加載以及自定義指令方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04