uniapp如何利用webview实现app向h5通信

FullStack - 【插件开发】【专治疑难杂症】【ios上架、马甲包、白包、过审、已成功上架过几百个】【多款插件已上架：https://ext.dcloud.net.cn/publisher?id=22130】【非诚勿扰】QQ：543610866

Diligent_UI - 【插件开发】【专治疑难杂症】【多款插件已上架：https://ext.dcloud.net.cn/publisher?id=193663(微信搜索飘逸科技UI小程序直接体验)】【骗子请绕道】问题咨询请加QQ群：120594820，代表作灵感实用工具小程序

昭昭L (作者) - 开心就好

xiaobai99 - 介绍

在uni-app中，你可以使用uni.createWebViewContext()方法获取webview实例的上下文对象来实现app向h5通信。通过调用实例的postMessage方法可以向webview发送消息，而通过在webview的window对象上添加message监听器即可接收来自app的消息。  

具体步骤如下：  

1. 在App.vue中创建一个webview组件  

```html  
<template>  
  <view>  
    <web-view src="https://www.example.com" id="webview"></web-view>  
  </view>  
</template>

mounted() {  
  this.webViewContext = uni.createWebViewContext('webview', this);  
}

this.webViewContext.postMessage({ type: 'hello', data: 'world' });

window.addEventListener('message', (event) => {  
  console.log(event.data);  
});

BoredApe - 有问题就会有答案。