uniapp 与H5通信实操

在App开发中,经常需要在app内嵌入H5页面并实现两者之间的通信。通过WebView组件,可以监听message事件来接收H5通过postMessage发送的信息。H5端需要引入uni.webview.js库,并在合适时机调用postMessage方法传递数据。通过在main.js中注册全局变量,可以简化uni-app中对uni对象的调用,便于后续编码工作。
摘要由CSDN通过智能技术生成

在app项目中,经常会遇到app 嵌套H5页面的需求,进而app与H5之间需要进行通信。

在app中是通过webview来实现,app中与H5交互的页面中html中代码如下:

<web-view :src="webviewSrc" :webview-styles="webviewStyles" @message='getMessage'></web-view>

通过绑定message方法来接收H5发送给App的信息

getMessage(mes){
	console.log('-------message-----:',JSON.stringify(mes))
}

在相应的H5页面通过postMessage来发送信息

document.addEventListener("UniAppJSBridgeReady", function() {
	uni.postMessage({
		data: {
			action: 'H5来了'
		},
	})
});

但是需要做一些准备公共,首先,要在相应的H5包中引入uni.webview.1.5.4,此处只说通过引入该js文件的方式引入。下载该js文件,放在项目中,在main.js文件中引入该js文件即可

import * as uni from './js_sdk/uni.webview.1.5.4.js'  

为了方便使用,可以在引入之后注册全局变量

document.addEventListener("UniAppJSBridgeReady", function() {  
    Vue.prototype.myUni = uni  
});

后续使用的时候会简化代码

this.myUni.webView.postMessage({
					data: {
					  action: 'H5来了'
					},  
				});

实现通信之后,我们就可以进行其他的编码工作了

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值