快捷導(dǎo)航

如何使用uniapp內(nèi)置組件webview消息傳遞詳解

更新時(shí)間：2025年02月08日 11:12:20 作者：怪獸靠邊閃

uni-app的web-view組件用于在應(yīng)用中打開網(wǎng)頁,并支持應(yīng)用和網(wǎng)頁之間的消息傳遞,這篇文章主要介紹了如何使用uniapp內(nèi)置組件webview消息傳遞的相關(guān)資料,需要的朋友可以參考下

前言

web-view是uni-app的一個(gè)內(nèi)置組件，可以在應(yīng)用里打開指定的網(wǎng)頁，應(yīng)用和網(wǎng)頁之間可以收發(fā)消息。

官方文檔地址：官網(wǎng)>文檔>組件>內(nèi)置組件>web-view

1.調(diào)用uni.postMessage被告知方法不存在（uni.postMessage is not a function）

官方文檔web-view有幾個(gè)相關(guān)方法，**uni.postMessage(OBJECT)**的描述是：網(wǎng)頁向應(yīng)用發(fā)送消息:

web-view是uniapp內(nèi)置組件，并有自帶的方法可以支持消息傳遞，考慮到uniapp本身可以發(fā)布成H5網(wǎng)頁，所以就直接創(chuàng)建了一個(gè)新的uniapp項(xiàng)目，用來做跳轉(zhuǎn)目標(biāo)網(wǎng)頁。

直接在新項(xiàng)目index頁面測試：

<template>
	<button type="button" @click="sendMess">發(fā)送</button>
</template>

<script setup>
	const sendMess = (e) => {
		uni.postMessage({
			data: {
				action: 'message'
			}
		});
	}
</script>

<style lang="scss" scoped>
</style>

然后在應(yīng)用里添加web-view，指向目標(biāo)網(wǎng)頁：

<web-view src="目標(biāo)網(wǎng)頁" @message="消息接收方法"></web-view>

在手機(jī)上測試可以正常打開網(wǎng)頁，但是點(diǎn)擊按鈕，調(diào)用uni.postMessage方法時(shí)報(bào)錯(cuò)：

TypeError: uni.postMessage is not a function

這里先試用了uniapp其他幾個(gè)常用的內(nèi)置API，比如uni.showToast(OBJECT)，來證明內(nèi)置的方法有正常加載，點(diǎn)擊按鈕，結(jié)果正常運(yùn)行：

	uni.showToast({
		title: '標(biāo)題',
		duration: 2000
	});

重新閱讀文檔，發(fā)現(xiàn)在web-view加載HTML網(wǎng)頁的示例中，引入了一個(gè)uni.webview.js文件，因?yàn)檫@個(gè)示例是個(gè)傳統(tǒng)的HTML頁面，之前以為用的是內(nèi)置方法就忽略了：

把文件下載下來，下載地址文檔上有提供，當(dāng)前最新是1.5.6：
https://gitcode.net/dcloud/uni-app/-/raw/dev/dist/uni.webview.1.5.6.js在網(wǎng)頁項(xiàng)目的main.js文件中對文件進(jìn)行引用：

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

重新點(diǎn)擊按鈕，問題仍然存在，但是把uni對象打印出來，前后對比發(fā)現(xiàn)多了一個(gè)webView，展開就看到了相關(guān)方法：

所以發(fā)送方法改成：

<script setup>
	const sendMess = (e) => {
		uni.webView.postMessage({
			data: {
				action: 'message'
			}
		});
	}
</script>

消息正常發(fā)送并接收。

2.H5無法接收消息

上邊用手機(jī)測試通過，但在瀏覽器中進(jìn)行訪問，就接收不到消息：

官方文檔中有標(biāo)示：

根據(jù)文檔需要用window.postMessage，這個(gè)方法之前使用，是在web網(wǎng)頁中嵌套iframe，父子頁面通信的時(shí)候，文檔上可以看到組件會被轉(zhuǎn)成iframe：

注意：這里只要修改應(yīng)用這邊（變成瀏覽器訪問之后就是父級頁面這里），需要以window.addEventListener監(jiān)聽消息，網(wǎng)頁端也就是子級不需要修改。

<template>
	<view>
		<web-view src="目標(biāo)網(wǎng)頁" @message="listenMess"></web-view>
	</view>
</template>

<script setup>
	import {
		onBeforeUnmount
	} from "vue";
	import {
		onLoad
	} from "@dcloudio/uni-app";
	const listenMess = (e) => {
		console.info(e);
	}
	onLoad(() => {
		// #ifdef H5
		window.addEventListener('message', listenMess, false);
		// #endif
	});
	onBeforeUnmount(() => {
		// #ifdef H5
		window.removeEventListener("message", listenMess);
		// #endif
	});
</script>

<style lang="scss" scoped>

</style>

使用方法window.addEventListener監(jiān)聽消息，添加window.removeEventListener防止監(jiān)聽重復(fù)執(zhí)行，需要注明只在H5情況下執(zhí)行，否則手機(jī)應(yīng)用會報(bào)錯(cuò)：

TypeError: Cannot read property 'addEventListener' of undefined

3.根據(jù)官方文檔中的示例編寫HTML頁面

官方文檔示例是一個(gè)傳統(tǒng)的HTML頁面，寫個(gè)簡單的頁面用nginx發(fā)布出來（web-view僅支持加載網(wǎng)絡(luò)網(wǎng)頁，不支持本地html），作為目標(biāo)網(wǎng)頁試一下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>測試</title>
  </head>
  <body>
    <button id="sendMess">發(fā)送</button>
    <script type="text/javascript" src="/uni.webview.1.5.6.js"></script>
    <script type="text/javascript">
      document.getElementById('sendMess').addEventListener('click', function() {
        uni.postMessage({
          data: {
            action: 'message'
          }
        });
      });
    </script>
  </body>
</html>

注意：這里是uni.postMessage，和uniapp項(xiàng)目中調(diào)用不同。

經(jīng)測試消息可以成功傳遞。

然后文檔上還寫到uniapp項(xiàng)目里也能加載html網(wǎng)頁，只要把文件放在/hybrid/html中：

寫個(gè)html放進(jìn)去，uni.webview.1.5.6.js放到j(luò)s路徑里：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>測試</title>
	</head>
	<body>
		<button onclick="sendMess()">發(fā)送</button>
		<script src="/hybrid/html/js/uni.webview.1.5.6.js"></script>
		<script type="text/javascript">
			function sendMess() {
				uni.postMessage({
					data: {
						action: 'message'
					}
				});
			}
		</script>
	</body>
</html>

經(jīng)測試消息可以成功傳遞。

4.VUE項(xiàng)目作為網(wǎng)頁端調(diào)用uni.postMessage方法

因?yàn)橹坝袀€(gè)vue2的項(xiàng)目里有相應(yīng)功能網(wǎng)頁，就拿來用做目標(biāo)，然后在依賴庫里搜到了@dcloudio/uni-webview-js，就沒用上邊的js，直接安裝引入之后，實(shí)測可以正常使用：

<template>
    <el-button type="primary" @click="sendMess">發(fā)送</el-button>
</template>
<script>
import uniWebview from '@dcloudio/uni-webview-js'
export default {
    components: {
        uniWebview
    },
    methods: {
        sendMess() {
            uniWebview.postMessage({
                data: { action: 'message' }
            });
        }
    }
}
</script>

<style></style>