H5页面与vue的客户端交互

工作中经常遇到一些奇怪的东西，我有个这样的需求，就是我写的vue项目被嵌套在别的h5项目页面下，so进入我的页面前需要判断他的h5页面有没有登录，这时候就需要我的客户端页面调用h5页面的登录方法。客户端页面(ios、安卓)两种都得交互h5页面，，，借助JavascriptBridge工具，前端对应的js代码
 因为我的项目是vue的，我一般把函数都转为箭头函数了。

<template>
 <div class="tel">
  <p>{{message}}aaasss</p>
  <button @click="callBackH5">与h5页面交互</button>
 </div>
</template>
<script>
/*判断客户端手机为ios还是安卓，放在Script中*/
let u = navigator.userAgent, app = navigator.appVersion;
let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //安卓
let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
export default {
    data(){
      return{
        message:'',
        dataCall:''
      }
    },
    mounted(){
      //$on给当前事件绑定一些事件监听
      this.$bus.$on('on-click',mes=>{
        this.message=mes
      })
    },
    created(){

    },
    methods:{
      /*这段代码是固定的，必须要放到js中，vue的就放在method */
      setupWebViewJavascriptBridge(callback) {
        if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
        if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
        window.WVJBCallbacks = [callback];
        var WVJBIframe = document.createElement('iframe');
        WVJBIframe.style.display = 'none';
        WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
        document.documentElement.appendChild(WVJBIframe);
        setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
      },
      callBackH5(){
        if(isIOS){
           this.setupWebViewJavascriptBridge((bridge) =>{
              //注册一个方法（方法名是“toLogin”），客户端进行调用（方法名也是“JS Echo”），responseCallback是回调函数
              // bridge.registerHandler('toLogin', function(data, responseCallback) {
              //     console.log("JS Echo called with:", data)
              //     responseCallback(data)
              // })
              //调用原生的方法toLogin
              bridge.callHandler('toLogin', this.dataCall,  (response)=> {
                  console.log("response:", response)
              })
          })
        }else if(isAndroid){
          window.WebViewJavascriptBridge.callHandler('toLogin', this.dataCall,  (response)=> {
                  console.log("response:", response)
              })

        }
      }

    }


}
</script>
<style scoped>
.tel{
  border: 1px solid rebeccapurple
}
</style>