通俗易懂

准备步骤

首先 在uniapp 官网 组件 webView 组件页面 （https://uniapp.dcloud.net.cn/component/web-view.html#postmessage）

找到这个网络js文件 （https://unpkg.com/@dcloudio/uni-webview-js@0.0.3/index.js ） 下载到本地

如果是单纯 html 请看 uniapp 官网操作

如果是 vue 框架 或者 uniapp 代码 需要 下载本地文件 也就是准备步骤中的 js文件

接下来进入通信步骤 1 webView —> uniapp 发送消息

1. 在 main.js 中引入 下载的文件 挂载到 Vue propeType 对象上
   
   
2. 然后直接使用 对应的方法即可

   		 this.$webUni.postMessage({
   			data: {
   				action: 'pay'
   			}
   		})

![在这里插入图片描述](https://img-blog.csdnimg.cn/5053c704f33c4f518d6a5a1590a31044.png)

3. 在 uniapp 中接收 则直接使用 uniapp的api即可 （@message）
   
   取值 直接使用

 icon.detail.data[0]['action']    即可取到对应值  

接下来进入通信步骤 2 uniapp —> webView 发送消息

这个就比较麻烦了 需要使用到 js的一个方法 也就是 evalJS() 方法

 webview 的 dom上的 方法  evalJS()  参数 字符串   可以把字符串 变为 js函数执行

具体操作如下

1. 获取 webView dom
   因为 this.$scope.$getAppWebview() 方法获取到的 webView 不止一个 所需需要获取子元素
   
   currentWebview.children()[0] 也就是当前页面的 webView 方法
   
   然后使用 evalJS() 调用 webView 中 js 的方法即可！！！

2. 使用 evalJS() 方法即可

3. 在webView中填写对应方法

坑来了！！！

首先这个dom 获取 需要放在 vue 的生命周期中 也就是 mounted 中 防止webview 没有对应的方法 这里就不需要去用到uniapp的生命周周期