uniapp的nvue与webview的交互

最新推荐文章于 2025-06-13 11:28:29 发布

d吃

最新推荐文章于 2025-06-13 11:28:29 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

文章标签： uni-app 交互

本文链接：https://blog.youkuaiyun.com/dream_wx/article/details/132802539

本文介绍了如何在uni-app中使用web-view组件实现H5页面与原生应用之间的双向通信，通过uniAppJSBridge进行数据交换，展示了从nvue向H5传递数据以及H5接收并处理nvue发送数据的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

web-view | uni-app官网

html页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>本地网页</title>
		<style type="text/css">
			.btn {
				display: block;
				margin: 20px auto;
				padding: 5px;
				background-color: #007aff;
				border: 0;
				color: #ffffff;
				height: 40px;
				width: 200px;
			}

			.btn-red {
				background-color: #dd524d;
			}


			.desc {
				padding: 10px;
				color: #999999;
			}
		</style>
	</head>
	<body>

		<div id="app">

			<div class="btn-red">
				nvue传过来的值：{{name}}
			</div>
		</div>


		<p class="desc">网页向应用发送消息。注意：小程序端应用会在此页面后退时接收到消息。</p>
		<div class="btn-list">
			<button class="btn btn-red" type="button" id="postMessage">postMessage</button>
		</div>
		<!-- uni 的 SDK -->
		<script type="text/javascript" src="https://unpkg.com/@dcloudio/uni-webview-js@0.0.1/index.js"></script>
        <!--引入vue -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script type="text/javascript">
			var app = new Vue({
				el: '#app',
				data: {
					
					name: ''
				},
				mounted() {

				},
				onLoad() {

				},
				onShow() {

				},
				methods: {}
			})


              <!--接收nvue发送的数据 -->
			function uniEvent(data) {
				console.log(JSON.stringify(data), 'HTML 接受APP发送过来的消息 (APP端)');
				app.name = data.name // 赋值
			};

            <!--向nvue发送数据 -->
			document.addEventListener('UniAppJSBridgeReady', function() {
		
				document.querySelector("#postMessage").addEventListener('click', function() {
					console.log("点击了------")
					uni.postMessage({
						data: {
							action: 'message'
						}
					});
				})
			});
		</script>
	</body>
</html>

nvue页面

<template>
	<view class="flex">
		<web-view src="/hybrid/html/local.html" style="flex: 1;" @message="getMessage"></web-view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				wv: null, // 定义(app)webview对象节点
				webV: {}, // 定义(H5)webview对象节点
				sendData: [], // 发送数据对象
			}
		},
		onLoad() {
			// #ifdef APP-PLUS
			const currentWebview = this.$scope
				.$getAppWebview(); //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效
			//动态重设bounce效果
			// #endif
			console.log("currentWebview==>", currentWebview)
			let info = {
				name: 'hello'
			}

			setTimeout(() => {
				this.wv = currentWebview.children()[0]
			}, 1000)

			setTimeout(() => {
				console.log("this.wv==>", this.wv)
				this.wv.evalJS(`uniEvent(${JSON.stringify(info)})`);
				//currentWebview.evalJS(`uniEvent(${JSON.stringify(info)})`);
			}, 1100)
		},
		methods: {
			getMessage(e) {
				uni.showModal({
					content: JSON.stringify(e.detail),
					showCancel: false
				})
			}
		}
	}
</script>

<style>

</style>

运行截图