需求:app 和H5混合开发,在H5页面返回app页面时,不用通信,uni.navigiteTO等跳转方法不好用。当需要H5与APP通信时,用下面此方法:

在app  A.vue页面中的代码

<template>
	<view>
//H5页面,注意:@message事件方法不可以改名字,或者用 @postMessage,具体区别可以百度一下,都是监听h5消息的
		<web-view :src="path" @message="message"></web-view>
	</view>
</template>
<script>
export default {
		data() {
			return {
				path: '',
				userInfo: ''
			} 
		},
		onLoad(option) {
			this.userInfo = uni.getStorageSync('userInfo') 
			console.log(data)
			// 将从缓存中拿到的用户信息处理传递给我webview的页面	
	        this.userInfo = encodeURIComponent(JSON.stringify(this.userInfo))
//config.baseWebViewUrl  h5的路径
		    this.path = config.baseWebViewUrl + 'pages/qualityControl/qualityControl?    userInfo='+ this.userInfo
		},
		methods: {
			// 接收webview传递回来的参数
				message(event){
					console.log(event,'hahah')
					let type = uni.getStorageSync('comeback')
					uni.switchTab({
						url:type == 'home' ? '/pages/home/home':'/pages/backlog/index'
					})
		    }
		}
	}
</script>

在h5  页面中的方法,因为我这里h5也是用vue开发的,并不是html

我们在uniapp 官方查找app 与h5通信可以知道,想要用 uni.postMessage () ,就要引入uniapp 官方封装好的sdk,有js 连接  :https://gitee.com/dcloud/uni-app/raw/dev/dist/uni.webview.1.5.4.js

我找了一个js下载到本地了。直接本地引入js 

 

//h5的页面 mounted生命周期中
mounted() {
			// 待触发 `UniAppJSBridgeReady` 事件后,即可调用 uni 的 API。
			document.addEventListener('UniAppJSBridgeReady', function() {
//监听了点击事件
				document.querySelector('.backBtn').addEventListener('click', function() {
					// eslint-disable-next-line no-undef 
//执行消息通信的方法
					webUni.postMessage({
						data: {
							action: 'message'
						}
					});
				})
			});
		},

以上就是解决app 与H5互相通信的方法了,如果需要js可以私我

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐