uniapp app端 和webview页面前后端沟通

app里嵌入一个webview 前后端通信

在我的环境里面 不清楚原因是什么，似乎和通用的不一致

uniapp 里有个web-view用于嵌入h5页面

<web-view ref="webview":key="subUrl":src="subUrl":update-title="false"@message="handlePostMessage"@load="innerHeight"></web-view>

handlePostMessage(event){// 二维码扫码if(event.detail.data&&event.detail.data[0].action==='scanQRCode'){this.handleScanCode()}},

这里用的event.detail.data[0]

h5页面里向外抛出信息

注意这里需要引入uni.webview.1.5.2.js
这个方法 小程序里用不了, 只有app端能使用

uni.webView.postMessage({data:{action:'',data:{}}});

这里说明一下，似乎和文档的不一致 ，不需要销毁返回等事件就可以操作

webview向h5页面发送消息使用的是 evalJS方法

uniapp

// 获取webview元素constcurrentWebview1=this.$scope.$getAppWebview().children()[0]if(currentWebview1){currentWebview1.evalJS(`getWebviewData(${JSON.stringify(res)})`)}

h5页面接收webview的信息

mounted(){window.getWebviewData=this.getData}

methods里面就可以用getData获取壳子向里面发送的信息

this.getData里面获取的是一个字符串, 需要用JSON.parse来解析一下