uniapp使用web-view跳转vue单页面通信，互发消息

1、背景：uniapp使用web-view跳转网页，互发消息，APP向h5发消息好处理，但是h5往APP发消息就很难，官方给的例子很简单，且基于传统js页面，并没有vue写的h5页面的例子，自己也是踩了一堆坑，现在分享我的处理过程，

首先，在vue的index,html文件引入web-view的插件

（1）、APP向h5传值，这个比较简单，直接上代码

（2）、vue做的h5向APP发消息

a、h5页面设置第一步

 // 在使用到的页面 添加如下代码
 mounted () {
    this.$nextTick(()=>{
      document.addEventListener('UniAppJSBridgeReady', function() {  
        // alert("jsbridge")
        uni.getEnv(function(res) {  
          console.log('当前环境：' + JSON.stringify(res));  
        });  
      });
    })
  },

b、h5页面设置第二步

   // function 调用uniapp的 方法
   postMsg(){
      console.log("调用uni.postMessage，开始发送")
      uni.postMessage({
        data: {
          action: 'postMessage hh'
        }
      });
    },

c、uniapp设置第三步

如下图所示

最终效果如下

2、相关文档

官方文档：https://uniapp.dcloud.io/component/web-view?id=web-view

参考文档：https://ask.dcloud.net.cn/article/id-35083__page-2