H5页面与vue的客户端交互

小咪咪 2022-11-22 10:24 219阅读 0赞

工作中经常遇到一些奇怪的东西，我有个这样的需求，就是我写的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>