uniapp的App端内嵌uniapp的H5端并实现通讯传参_uniapp和h5传值

实现方式：通过uniapp内置组件web-view实现App内嵌H5页面

/***
 url: 网页的链接
 message：网页向应用 postMessage 时，会在特定时机触发并收到消息方法
***/
<web-view :src="url" @message="message" ref="webview"></web-view>

App端向H5端传参（相对比较简单）：

1、路径传参：直接在url地址栏拼接参数

onLoad() {
	this.url = `http://192.168.15.108:7080/#/?TradeCode=${this.TradeCode}&openID=${this.openID}`
},

在H5端页面的onLoad生命周期拿到参数：

onLoad(e) {
	if (!e || !e.TradeCode || !e.openID) {
		this.$toast('参数解析有误！')
		setTimeout(() => {
			// uni.reLaunch({
			// 	url: '/pages/index/index'
			// })
		}, 800)
		return
	}
	this.query = e
	console.log('传参', this.query);
},

2. 通过postMessage方法向h5页面传参：

this.$refs.webview.postMessage({
    data: {
       TradeCode: this.TradeCode,
       openID: this.openID
    }
});

在H5端，通过监听window的message事件获取传递的参数：

window.addEventListener('message', function(e) {
    if (!e.data || !e.data.TradeCode || !e.data.openID) {
		this.$toast('参数解析有误！')
		setTimeout(() => {
			// uni.reLaunch({
			// 	url: '/pages/index/index'
			// })
		}, 800)
		return
	}
	this.query = e.data
	console.log('传参', this.query);
 });

H5端向App端传参（相对比较复杂）：

第一步：通过uniapp官网提供的网址下载uni.web-view.js 

 本案例将保存的js文件路径：/common/dist_uni.webview.1.5.4.js

 第二步：配置main.js文件：（全局挂载）

import '@/common/dist_uni.webview.1.5.4.js'
 
document.addEventListener("UniAppJSBridgeReady", function() {
	Vue.prototype.$myUni = uni
});

第三步：H5页面操作完之后要传参给App端：

console.log('1111111--------->', this.$myUni.webView);
this.$myUni.webView.postMessage({
	data: {//data值任意写
	    action: 'H5返回App',
		number: '123456'
	},
})

扩展：App端代码

<template>
	<view>
		<web-view :src="url" @message="message" ref="webview"></web-view>
	</view>
</template>
 
<script>
	export default {
		data() {
			return {
				url: '',
				TradeCode:'PreReg',
                openID:9976
			};
		},
		onLoad() {
            //this.$refs.webview.postMessage({
               // data: {
                 //  TradeCode: this.TradeCode,
                  // openID: this.openID
               // }
            //});
			this.url = `http://192.168.15.108:7080/#/?TradeCode=${this.TradeCode}&openID=${this.openID}`
		},
		methods:{
			message(e){
				console.log('H5传参',e);
			}
		}
	};
</script>
<style>
</style>