uniapp开发使用 web-view APP 与 H5 (vue)通信

需求：这边是uniapp开发的APP  需要内嵌H5（vue），就得使用web-view跳转网页

H5端

 在vue的index,html文件引入web-view的插件
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.1.js"></script>

在vue界面当中

        // 通过事件使用uniapp的 方法

        postMsg(){

            // 重点 “uni.postMessage,像APP端发送消息”

            uni.postMessage({

                data: {

                action: '我是消息'

                }

            });

        },

 

uniapp端

 

<template>
	<view :style="'paddingTop:' + statusBarHeight + 'px;backgroundColor:' + warpperBgColor">
		<web-view ref="webview"  @message="getMessage" @onPostMessage="getPostMessage"   :src="url" :style="'height: ' + windowHeight + 'px;'" />
	</view>
</template>

设置内容宽高

methods: {

　设置内容宽高

nitializeUrl() {

            let info = uni.getSystemInfoSync();

            this.windowHeight = info.windowHeight - info.statusBarHeight;

            this.statusBarHeight = info.statusBarHeight;

        },

 

　　H5与APP通信    这里接收H5传递的参数，触发事件

        getMessage(e) {

            const val = e.detail.data[0].action || ''

            if(val) {

                uni.reLaunch({

                    url:'/pages/home'

                })

            }

           

        },

}