uniapp中使用webview并与原页面通信_uniapp webview 通信

uniapp中使用webview并与原页面通信

1.接收数据

主要使用@message与@onPostMessage接收原页面数据，且两个方法只能在APP中使用，其他平台均不支持。

<web-view style=\"z-index: 1;\" :src=\"webViewUrl+\'appview\'\" @onPostMessage=\"htmlMessage\" @message=\"htmlMessage\"></web-view>

/** * 接收页面返回参数 * @param {Object} item */htmlMessage(item) {console.log(\'收到的消息\', item)let data = item.detail...},

2.发送数据（调用原页面方法）

发送数据时，主要使用evalJS()方法，且注意需要要页面渲染完毕后 执行，否则会报错。

/** * 向目标页面发送参数(调用原页面数据) */handleSendData() {// 当使用$parent未获取到节点数据时，直接使用$scope// let currentWebview = this.$parent.$scope.$getAppWebview()// let wv = currentWebview.children()[0];let currentWebview = this.$scope.$getAppWebview()let wv = currentWebview.children()[0]// 参数let data = {id: [所需参数],selectType: [所需参数],}//getWebviewData()方法必须存在webview引用的页面中，否则无法调用wv.evalJS((`getWebviewData(${JSON.stringify(data)})`));},

3.动态修改webview样式

/** * 修改样式 */handleChangeStyle(){let currentWebview = this.$scope.$getAppWebview()let wv = currentWebview.children()[0]wv.setStyle({ //设置web-view距离顶部的距离以及自己的高度，单位为pxtop: 170, //此处是距离顶部的高度，应该是你页面的头部height: 500, //webview的高度})},