实现方式:通过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>

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐