快捷導(dǎo)航

uni-app之webview通信實(shí)現(xiàn)方法示例

更新時(shí)間：2025年07月17日 09:15:51 作者：Pearson

UniApp憑借其跨平臺(tái)開發(fā)的顯著優(yōu)勢,成為眾多開發(fā)者構(gòu)建多端應(yīng)用的首選框架,這篇文章主要介紹了uni-app之webview通信的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

1 背景

在uni-app開發(fā)中，常見的一種場景是主應(yīng)用通過web-view組件加載子應(yīng)用的H5頁面。為便于描述，我們將主應(yīng)用稱為App，子應(yīng)用稱為H5站點(diǎn)。兩者均采用uni-app+Vue技術(shù)棧：主應(yīng)用通過HBuilderX云打包生成原生App（如Android的APK包），子應(yīng)用則通過HBuilderX發(fā)布為H5站點(diǎn)。當(dāng)主應(yīng)用加載H5頁面時(shí)，web-view會(huì)占據(jù)整個(gè)手機(jī)屏幕。此時(shí)，若需通過物理按鍵或H5頁面的返回按鈕返回主應(yīng)用，則需實(shí)現(xiàn)應(yīng)用間通信，由H5站點(diǎn)向主應(yīng)用發(fā)送關(guān)閉web-view實(shí)例的請(qǐng)求。

2 技術(shù)方案

經(jīng)過分析，我確定了兩種可行的技術(shù)方案。第一種方案利用web-view組件的消息機(jī)制：子應(yīng)用通過調(diào)用postMessage向主應(yīng)用發(fā)送消息，主應(yīng)用監(jiān)聽message事件，并在消息處理函數(shù)中執(zhí)行web-view的關(guān)閉操作。第二種方案則采用服務(wù)器中轉(zhuǎn)機(jī)制：主應(yīng)用和子應(yīng)用均通過WebSocket連接至中轉(zhuǎn)服務(wù)器，實(shí)現(xiàn)命令的發(fā)送與接收。相較而言，第二種方案實(shí)現(xiàn)復(fù)雜度較高，且易受網(wǎng)絡(luò)環(huán)境影響。因此，本文將采用第一種方案進(jìn)行實(shí)現(xiàn)。

3 實(shí)現(xiàn)

3.1 子應(yīng)用實(shí)現(xiàn)

下載uni.webview.1.5.6.js

在子項(xiàng)目中，下載uni.webview.js，我使用的是uni.webview.1.5.6.js,下載地址為：

https://gitcode.net/dcloud/uni-app/-/raw/dev/dist/uni.webview.1.5.6.js

將下載完成的uni.webview.1.5.6.js文件復(fù)制到項(xiàng)目的目錄/static/js/目錄下（如果目錄不存在，則可以手動(dòng)創(chuàng)建這個(gè)目錄）。

引用

修改main.js, 添加對(duì)uni.webview.1.5.6.js的引用：

import '/static/js/uni.webview.1.5.6.js'

調(diào)用postMessage

在需要返回主應(yīng)用的地方，添加如下代碼

if(uni.webView) {
	console.log("支持uni.webview", uni.webView);
	uni.webView.postMessage({
		data: {
			action: 'backToPlatform'
		}
	});
} else {
	console.log("不支持uni.webview");
}

3.2 主應(yīng)用實(shí)現(xiàn)

模版

<web-view
	 :embed="true" 
	 :src="imViewUrl" 
	 @message="handleMessage" 
/>

js

export default {
	//其他代碼
	methods: {
		handleMessage(e) {
			if(e && e.detail && e.detail.data && e.detail.data.length > 0) {
				const { action } = e.detail.data[0];
				if(action == 'backToPlatform') {
				//在這里，我們可以通過顯隱條件或refs對(duì)象的操作來關(guān)閉web-view
				}
			}
		},
	}
	//其他代碼

3.3 主應(yīng)用發(fā)送消息到H5

app端

var currentWebview = that.$parent.$scope.$getAppWebview()
currentWebview.children()[0].evalJS(`onMicrophonePermResult(${res ? 'true' : 'false'})`);

h5段

	mounted() {
		// 將方法掛載到 window，供主應(yīng)用調(diào)用
		window.onMicrophonePermResult = (result) => {
			console.log("onMicrophonePermResult result=", result)
		};
	},