uniapp web-view組件雙向通信的問(wèn)題記錄

更新時(shí)間：2024年07月17日 11:05:11 作者：L·S·P

本文主要介紹在uniapp中頁(yè)面與webview組件內(nèi)頁(yè)面的雙向通信問(wèn)題,本文通過(guò)圖文實(shí)例代碼相結(jié)合給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧

前言

本文主要介紹在uniapp中頁(yè)面與webview組件內(nèi)頁(yè)面的雙向通信問(wèn)題。

準(zhǔn)備

uniapp項(xiàng)目

調(diào)用webview組件

<web-view src="/hybrid/html/index.html"></web-view>

Web項(xiàng)目

項(xiàng)目目錄

在uniapp項(xiàng)目根目錄下新建hybrid/html目錄，web項(xiàng)目文件放在hybrid/html目錄下，否則web-view無(wú)法調(diào)用項(xiàng)目文件。

引入官方庫(kù)

在web項(xiàng)目中引入官方庫(kù)uni.webview.js，可以從uniapp官方示例庫(kù)中下載，下載后放入web項(xiàng)目目錄下即可，本文放在js文件夾中，然后在web項(xiàng)目頁(yè)面中引入。

<script type="text/javascript" src="js/uni.webview.1.5.2.js"></script>

通信

uniapp傳webview

接收消息（webview）

uniapp發(fā)送消息實(shí)際上就是調(diào)用webview組件內(nèi)頁(yè)面方法實(shí)現(xiàn)通信，所以我們需要現(xiàn)在webview組件內(nèi)頁(yè)面index.html中定義一個(gè)接收消息的方法：

function webReceiveData (data) {
    var parseData = JSON.parse(data)
	document.getElementById('msg').innerText = `接收到的消息：${parseData.msg}`
}

發(fā)送消息（uniapp）

要向webview中傳遞消息，首先需要獲取到當(dāng)前頁(yè)面中的webview組件，然后調(diào)用webview頁(yè)面中定義的接收方法就好；如下代碼，獲取到當(dāng)前頁(yè)面中的webview保存在wv中，并在獲取成功后調(diào)用sendData方法向webview發(fā)送消息，在sendData方法中實(shí)現(xiàn)了webview組件內(nèi)方法的調(diào)用。

onLoad() {
	let that = this;
	// #ifdef APP-PLUS
	var currentWebview = that.$scope.$getAppWebview();
	let num = 0;
	let wv_time = setInterval(function() {
		num++;
		that.wv = currentWebview.children()[0];
		if (that.wv) {
			// 獲取到當(dāng)前頁(yè)面的webview子頁(yè)面然后下發(fā)消息
			that.sendData({
				type: 'init',
				msg: 'addd'
			})
			clearInterval(wv_time)
		}
	}, 100);
	// #endif
},
methods: {
	sendData (data) {
		let that = this
		that.wv.evalJS("webReceiveData('" + JSON.stringify(data) + "')");
	},
}

webview傳uniapp

接收消息（uniapp）

在uniapp中為web-view組件添加上@message事件

<web-view src="/hybrid/html/index.html" @message="receiveData"></web-view>

處理@message事件的方法receiveData方法

receiveData (data) {
    console.log("收到來(lái)自webview的消息：", data.detail)
}

發(fā)送消息（webview）

在webview頁(yè)面中調(diào)用uni.postMessage 方法實(shí)現(xiàn)消息發(fā)送。

function webSendData () {
	document.getElementById('send').innerText = `已發(fā)送的消息：啊對(duì)對(duì)對(duì)`
	uni.postMessage({
		data: {
			msg: '啊對(duì)對(duì)對(duì)'
		}
	});
}

完整代碼

uniapp端

<template>
	<view class="content">
		<web-view src="/hybrid/html/index.html" @message="receiveData"></web-view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				wv: null,
			}
		},
		onLoad() {
			let that = this;
			// #ifdef APP-PLUS
			var currentWebview = that.$scope.$getAppWebview();
			let num = 0;
			let wv_time = setInterval(function() {
				num++;
				that.wv = currentWebview.children()[0];
				if (that.wv) {
					// 獲取到當(dāng)前頁(yè)面的webview子頁(yè)面然后下發(fā)消息
					that.sendData({
						type: 'init',
						msg: 'addd'
					})
					clearInterval(wv_time)
				}
			}, 100);
			// #endif
		},
		methods: {
			sendData (data) {
				let that = this
				that.wv.evalJS("webReceiveData('" + JSON.stringify(data) + "')");
			},
			receiveData (data) {
				console.log("收到來(lái)自webview的消息：", data)
			},
		}
	}
</script>
<style>
</style>

Web端

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>通信實(shí)例</title>
	<style type="text/css">
		.container {
			display: flex;
			flex-direction: column;
		}
		.content {
			text-align: center;
			margin: 15px 0;
		}
		#msg {
			font-size: 1.2rem;
			font-weight: bold;
			color: #ff7d00;
		}
		.text {
			text-align: center;
			color: #c5c8ce;
		}
		.btn-box {
			text-align: center;
			margin: 15px 0;
		}
		.btn-box button {
			width: 125px;
			height: 45px;
			font-size: 18px;
			color: white;
			background-color: #1989fa;
			border-color: #2b85e4;
			border-radius: 5px;
		}
		.btn-box button:active {
			background-color: #88c1fa;
			border-color: #5cadff;
		}
	</style>
</head>
<body>
	<div class="container" id="lauwen">
		<div class="content" id="msg"></div>
		<div class="content" id="send"></div>
		<div class="text">?https://blog.csdn.net/Douz_lungfish</div>
		<div class="btn-box">
			<button type="button" onclick="webSendData()">發(fā)送消息</button>
		</div>
	</div>
	<script type="text/javascript" src="js/uni.webview.1.5.2.js"></script>
	<script type="text/javascript">
		function webReceiveData (data) {
			var parseData = JSON.parse(data)
			document.getElementById('msg').innerText = `接收到的消息：${parseData.msg}`
		}
		function webSendData () {
			document.getElementById('send').innerText = `已發(fā)送的消息：啊對(duì)對(duì)對(duì)`
			uni.postMessage({
				data: {
					msg: '啊對(duì)對(duì)對(duì)'
				}
			});
		}
	</script>
</body>
</html>

到此這篇關(guān)于uniapp web-view組件雙向通信的文章就介紹到這了,更多相關(guān)uniapp web-view組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: