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

标签：info uniapp vue web APP H5

需求：这边是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'                 })             }                     }, }

   

　　

标签：info,uniapp,vue,web,APP,H5
From： https://www.cnblogs.com/llive/p/16836531.html