webview中html必须引入uni.webview.js
文件。uniapp有提供的官方下载地址,去官网找一下。
html
<script type="text/javascript" src="js/webview.js"></script>
1、uniapp发消息给webview
uniapp发送代码如下:
html
<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发送代码如下:
js
function sendAppMessage(event) {
uni.postMessage({
data: event
});
}
uniapp接收代码如下:
vue
<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));
},