uniapp 与H5通信实操

在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来了'
					},  
				});

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