uniapp实现和webview中的H5进行通讯，返回跳出webview页面到app页面中

最新推荐文章于 2023-06-07 11:21:02 发布

zyxczyf123

最新推荐文章于 2023-06-07 11:21:02 发布

阅读量3.6k

点赞数

文章标签： es6 vue.js html5 html javascript

本文链接：https://blog.csdn.net/zyxczyf123/article/details/118164902

版权

uniapp向webview中发送数据，通过打开的src在src后面拼接上想要的传送的数据，类似于前端的query的传值方式

 <web-view @message="message"  src="/hybrid/html/index.html?userId=335656"></web-view>

在webview也就H5页面中，通过window.location.herf可以获取到url，通过window.location.search可以获取到？后面的数据，进行处理。

webview向uniapp端发送数据，一定在H5页面先引入uni的js文件，这样才可以使用uni的部分api，通过postMessage，方法，向uniapp端发送数据，webview上使用 @message进行监听

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
		titiifdfss
		<button type="button" onclick="test()">test</button>
	</body>
	//在H5页面中需要引用下面的js才能在使用uni的api
	<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
	<script type="text/javascript">
		//监听js是否加载完毕，在页面加载完成 并且uni的集成方法加载完成后调用
		document.addEventListener('UniAppJSBridgeReady', function() {
		      uni.postMessage({
		              data: {
		                   action: '这是我传送的消息'
		              }
		        });//传递的消息信息，必须写在 data 对象中。
		 });
		function test(){
		//或者返回出页面重定向到uni项目其他的页面中
		 //      uni.redirectTo({
		             // url:'/pages/login/login'
			   // })
		//通过点击像webview的页面传送数据
			        uni.postMessage({
			            data: {
			                action: '相册'
			            }
			        });
		}
	</script>
</html>

webview页面监听的方法

<template>
	<view>
		  <web-view @message="message"  src="/hybrid/html/index.html?userId=335656"></web-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			 message(event){
			        console.log('接收到消息',event.detail.data)
					if(event.detail.data[0].action=='相册'){
					//写一些调用uni的api的方法，或者逻辑
						uni.chooseImage({
						    count: 6, //默认9
						    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						    sourceType: ['album'], //从相册选择
						    success: function (res) {
						        console.log(JSON.stringify(res.tempFilePaths));
						    }
						});
					}
			    }
		}
	}
</script>
<style>
</style>

uniapp中webviwe官方介绍地址：https://uniapp.dcloud.io/component/web-view

zyxczyf123

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
uniapp实现和webview中的H5进行通讯，返回跳出webview页面到app页面中

uniapp向webview中发送数据，通过打开的src在src后面拼接上想要的传送的数据，类似于前端的query的传值方式 <web-view @message="message" src="/hybrid/html/index.html?userId=335656"></web-view>在webview也就H5页面中，通过window.location.herf可以获取到url，通过window.location.search可以获取到？后面的数据，进行处理。webv
复制链接

扫一扫