博客

需求：vue的h5项目，向uniapp嵌入的webview里面传值，调uniapp的页面切换路由方法，uni.navigateTo
(注：uniapp的webview组件地址，https://uniapp.dcloud.net.cn/component/web-view.html#web-view)
思路：
1、在vue项目的index.html中引入<script type="text/javascript" src="https://unpkg.com/@dcloudio/uni-webview-js@0.0.3/index.js"></script>，必须引，才能使用uniapp的内部方法
2、通过注册UniAppJSBridgeReady事件，在里面调用uniapp提供的相关方法，实现数据通信(注：也是在index.html中)
<script>
    document.addEventListener('UniAppJSBridgeReady', function() {
      uni.webView.getEnv(function(res) {
        console.log('当前环境：' + JSON.stringify(res));
      });
      // uni.webView.navigateTo(...)
    });
  </script>
  注：支持的uniapp方法有如下：
  uni.navigateTo，uni.redirectTo，uni.reLaunch，uni.switchTab，uni.navigateBack，uni.postMessage(h5端向app端发送消息)，uni.getEnv(获取当前环境)
  
3、当前的问题是如何实现index.html与操作的vue页面之间进行通信，解决方法如下：
    1>在main.js为window绑定一个全局变量，eventBus,通过vue兄弟组件传值的形式($emit,$on)
    window.eventBus=new Vue();
    window.isShowMap=false;
    2>在vue页面发出一个事件，传递相应参数(Home.vue)
    goMap() {
      window.eventBus.$emit("goMapExtend",true);
    },
    3>在index.html接收这个发出的变量，然后注册UniAppJSBridgeReady事件，在里面监听dom事件，因为UniAppJSBridgeReady在$on里面无法触发，所以必须给它一个触发的条件，
    所以创建了一个span标签，在$on里面触发标签的点击事件，在UniAppJSBridgeReady中监听标签的点击事件，在里面执行相应的操作
    <script>
    //注：window.eventBus必须用setTimeout包一下，否则会出现undefined的情况，导致报错
      setTimeout(function(){
        if(window.eventBus) {
          window.eventBus.$on("goMapExtend",(info)=>{
            window.isShowMap=info;
            if(window.isShowMap){
              let spanItem=document.getElementById('changeMsg');
              spanItem.click()
            };
          });
        };
      },1000);
      document.addEventListener("UniAppJSBridgeReady", function () {
        // uni.getEnv(function(res) {  
        //   console.log('当前环境：' + JSON.stringify(res));  
        // }); 
        // 传参
        // uni.postMessage({
        //   data: {
        //     local: '测试哈哈哈',
        //   },
        // });
        document.getElementById('changeMsg').addEventListener('click', function() {
          uni.navigateTo({
            url: '/pages/map/map'
          })
        });
      });
    </script>
    <span id="changeMsg"></span>