在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来了'
},
});
实现通信之后,我们就可以进行其他的编码工作了