uni-app与H5页面的数据传递

àì夳堔傛蜴生んèń 2022-11-25 10:05 600阅读 0赞

**最近用uni-app开发多端应用时候遇到这样一个问题：  
（1）uni-app需要向H5页面产地数据  
（2）H5页面也需要向uni-app传递数据**

## 这里我介绍的主要是H5页面向uni-app传递数据 ##

**话不多说，直接上代码**

**这里是`uni-app`里面代码**

**注意： `@message="getMessage"`是监听H5页面传递的数据**

[**官方有文档：https://uniapp.dcloud.io/component/web-view**][https_uniapp.dcloud.io_component_web-view]

<template>
    	<view class="redirect">
    		<web-view
    			v-if="userData"
    			@message="getMessage"
    			:src="
    				'https://ycttest.cms.diyibox.com/staffcenter/login.html?userData=' + JSON.stringify(userData)
    			"
    		>
    		</web-view>
    	</view>
    </template>
    
    <script>
    	export default { 
    		data () { 
    			return { 
    				userData: null
    			}
    		},
    		methods: { 
    			getMessage(message){ 
    				console.log('h5退出通知uni--->message', message.detail)
    				if (message.detail.data[0].action === 'logout') { 
    					const storageKey = message.detail.data[0].account
    					uni.removeStorageSync(storageKey)
    					this.$Router.replaceAll('pages/login/index')
    				}
    			}
    		},
    		created() { 
    			const query = this.$Route.query
    			console.log('路由参数', query)
    			const userData = JSON.parse(uni.getStorageSync(query.account))
    			this.userData = userData
    			console.log('用户信息1', userData)
    		}
    	}
    </script>

**然后是H5页面的代码**

<!DOCTYPE html>
    <html lang="zh">
    <head>
    	<meta charset="UTF-8">
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    	<meta http-equiv="X-UA-Compatible" content="ie=edge">
    	<title></title>
    </head>
    <body>
    	<div id="testdiv" style="display: none;text-align: center;">
    		触发了
    	</div>
    	<script type="text/javascript">
    	  var userAgent = navigator.userAgent;
    	  if (userAgent.indexOf('AlipayClient') > -1) { 
    	    // 支付宝小程序的 JS-SDK 防止 404 需要动态加载，如果不需要兼容支付宝小程序，则无需引用此 JS 文件。
    	    document.writeln('<script src="https://appx/web-view.min.js"' + '>' + '<' + '/' + 'script>');
    	  } else if (/QQ/i.test(userAgent) && /miniProgram/i.test(userAgent)) { 
    	    // QQ 小程序
    	    document.write('<script type="text/javascript" src="https://qqq.gtimg.cn/miniprogram/webview_jssdk/qqjssdk-1.0.0.js"><\/script>');
    	  } else if (/miniProgram/i.test(userAgent) || /MicroMessenger/i.test(userAgent)) { 
    	    // 微信小程序 JS-SDK 如果不需要兼容微信小程序，则无需引用此 JS 文件。
    	    document.write('<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"><\/script>');
    	  } else if (/toutiaomicroapp/i.test(userAgent)) { 
    	    // 字节跳动小程序 JS-SDK 如果不需要兼容字节跳动小程序，则无需引用此 JS 文件。
    	    document.write('<script type="text/javascript" src="https://s3.pstatp.com/toutiao/tmajssdk/jssdk-1.0.1.js"><\/script>');
    	  } else if (/swan/i.test(userAgent)) { 
    	    // 百度小程序 JS-SDK 如果不需要兼容百度小程序，则无需引用此 JS 文件。
    	    document.write('<script type="text/javascript" src="https://b.bdstatic.com/searchbox/icms/searchbox/js/swan-2.0.18.js"><\/script>');
    	  }
    	  if (!/toutiaomicroapp/i.test(userAgent)) { 
    	    // document.querySelector('.post-message-section').style.visibility = 'visible';
    	  }
    	</script>
    	
    	<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">
    		document.addEventListener('UniAppJSBridgeReady', function() { 
    			document.getElementById('testdiv').addEventListener('click', function() { 
    				uni.postMessage({ 
    					data: { 
    						action: '这是我传递的数据1',
    						account: '123456789'
    					}
    				});
    			})
    		});
    	</script>
    </body>
    </html>

[https_uniapp.dcloud.io_component_web-view]: https://uniapp.dcloud.io/component/web-view