uniapp与webview通信

webview中html必须引入uni.webview.js文件。uniapp有提供的官方下载地址，去官网找一下。

<script type="text/javascript" src="js/webview.js"></script>

1、uniapp发消息给webview

uniapp发送代码如下：

<template><view class="container"><web-view :src="webSrc" ref="webview" @onPostMessage="handlePostMessage" @message="handlePostMessage"></web-view></view>
</template><script>onLoad() {/* #ifdef APP-PLUS */this.webSrc = plus.io.convertLocalFileSystemURL('_www/hybrid/html/camera.html');var currentWebview = this.$scope.$getAppWebview()setTimeout(()=>{this.wv = currentWebview.children()[0];},1000)/* #endif */},methods: {/*** TODO 发送消息到webview* @param event*/sendWebViewMessage(event){this.wv.evalJS("receiveAppMessage('" + JSON.stringify(event) + "')")},}
</script>

这里省略data中的数据。需要注意的是必须延时一秒再设定this.wv。

webview接收代码如下：

/*** 接收App的消息*/
function receiveAppMessage(event) {console.log("收到消息：" + event);event = JSON.parse(event);
}

2、webview发消息给uniapp

webview发送代码如下：

function sendAppMessage(event) {uni.postMessage({data: event});
}

uniapp接收代码如下：

<template><view class="container"><web-view :src="webSrc" ref="webview" @onPostMessage="handlePostMessage" @message="handlePostMessage"></web-view></view>
</template>handlePostMessage: function (event) {console.log('接收webview发送的消息:', JSON.stringify(event.detail.data));
},