uniapp内嵌网页调用app中的方法_uniapp中app使用了web-view,嵌入网页,app怎么获取网页的值

作者：weixin_40725706 | 2024-05-28 09:57:08

踩

uniapp中app使用了web-view,嵌入网页,app怎么获取网页的值

h5页面

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>h5网页</title>
	</head>
	<style>
		.btn {
			margin-top: 400px;
		}
	</style>
	<body>
		<button class="btn" type="button" id="postMessage">网页向应用发送消息</button>
	</body>
	<script src="./uni.webview.1.5.3.js"></script>
	<script>
		// 待触发 `UniAppJSBridgeReady` 事件后，即可调用 uni 的 API。
		document.addEventListener('UniAppJSBridgeReady', function() {
			uni.postMessage({
				data: {
					action: 'message'
				}
			});
			uni.getEnv(function(res) {
				console.log('当前环境：' + JSON.stringify(res));
			});

			document.getElementById('postMessage').addEventListener('click', function() {
				console.log('点击')
				uni.postMessage({
					data: {
						action: 'message'
					}
				});
			});
		});
	</script>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

uniapp页面

<template>
	<view>
		<web-view @message="handlePostMessage" src="/hybrid/html/index.html"></web-view>
	</view>
</template>
<script>
	var wv; //计划创建的webview
	export default {
		data() {
			return {
				
			}
		},
		onReady() {
			// #ifdef APP-PLUS
			// var currentWebview = this.$scope
			// .$getAppWebview() //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效
			// setTimeout(function() {
			// 	wv = currentWebview.children()[0]
			// 	wv.setStyle({
			// 		top: 150,
			// 		height: 300
			// 	})
			// }, 1000); //如果是页面初始化调用时，需要延时一下
			// #endif
		},
		methods: {
			handlePostMessage(data) {
				console.log("接收到消息：" + JSON.stringify(data.detail));
				//实时接收消息，通过判断接收到的消息内容执行不同方法
			}
		}
	};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

备注

h5页面如果引用本地的页面需要放在根目录（如图位置），
在这里插入图片描述
uni.webview.1.5.3.js在uniapp官网下载官方网址

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/636935