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

最近用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

<!-- 这是重定向页面 -->
<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('
                    
                    

你可能感兴趣的:(vue)