uniapp H5内嵌webview 调用plus对象和H5向APP进行通信

在项目开发碰到这样一个需求：在H5商城分享商品至群聊中和在商城中保存海报到手机，因为APP和H5都是用uniapp开发，H5是通过webview的形式嵌入到APP中。

在H5调用plus对象

两个端都是uniapp开发，只需要在H5端添加plusready事件

// #ifdef H5
//封装一个加载plusready事件的函数
let plusReady = function(callback) {
	if (window.plus) {
		callback();
	} else {
		document.addEventListener('plusready', callback);
	}
};
// #endif

然后再App.vue的onLaunch生命周期调用该函数后就可以全局使用window.plus对象，此对象可以使用plus的大部分属性和方法。

这样就可以调用plus对象的保存图片方法进行保存

H5端向APP端进行通信

App端是用过函数式的方法创建的webview,当我调用uni.postMessage函数时，H5端出现了"TypeError: uni.postMessage is not a function"的错误。所以引入了UniAppJSBridgeReady来搭建两端的桥梁。

H5端得新建一个html的模板，在该模板的body标签下引入。(在模板需要在manifest.json的web配置index.html模板路径引入)

       ```
      <!-- uni 的 SDK -->
      <!-- 需要把 uni.webview.1.5.4.js 下载到自己的服务器 -->
	<script type="text/javascript" src="http://xxx/uni-webview.js"></script>
	<script>
		document.addEventListener('UniAppJSBridgeReady', function() {});
	</script>

引入完毕后 H5端调用uni.webView.postMessage 可向APP端发起通信

				uni.webView.postMessage({
					data: {
						action: 'share',
						type: 'share',
						data: "分享群聊",
						path:window.location.href,
					}
				});

APP端接收H5端发送的信息 plus.globalEvent.addEventListener('plusMessage',callBack)

			createWebView() {
				let link = "http://192.168.124.104:8080/#/";
				
				var w = plus.webview.create(link, 'id', {
					top: sys.statusBarHeight, //放置在titleNView下方。如果还想在webview上方加个地址栏的什么的，可以继续降低TOP值
					//因为设置top之后 webview的高度依然不变会往下移 底部会被遮住  所以设置一下高度
					height: sys.windowHeight - sys.statusBarHeight - sys.safeAreaInsets.bottom,
				}, {
					preload: 'preload webview'
				}); // 可直接通过以下方法获取preload值

				var currentWebview = this.$mp.page.$getAppWebview() //获取当前页面的webview对象
                                //监听H5端发送的消息
				plus.globalEvent.addEventListener('plusMessage', (e) => {
					if (w && w['__uuid__'] === e.originId) {
						console.log("网页消息", e);
					}
				})
				currentWebview.append(w); //一定要append到当前的页面里！！！才能跟随当前页面一起做动画，一起关闭

			}

希望本文章对你有所帮助