vue和原生组件的交互jsBridge.js

vue和原生组件的交互jsBridge.js

jsBridge.js

let isAndroid = navigator.userAgent.indexOf('Android') > -1 || navigator.userAgent.indexOf('Adr') > -1;
let isiOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
 
//这是必须要写的，用来创建一些设置
function setupWebViewJavascriptBridge(callback) {
    //Android使用
    if (isAndroid) {
        if (window.WebViewJavascriptBridge) {
            callback(WebViewJavascriptBridge)
        } else {
            document.addEventListener(
                'WebViewJavascriptBridgeReady',
                function () {
                    callback(WebViewJavascriptBridge)
                },
                false
            );
        }
        console.log('tag', '安卓')
        sessionStorage.phoneType = 'android'
    }
 
    //iOS使用
    if (isiOS) {
        if (window.WKWebViewJavascriptBridge) {
            return callback(WKWebViewJavascriptBridge);
        }
        if (window.WKWVJBCallbacks) {
            return window.WKWVJBCallbacks.push(callback);
        }
        window.WKWVJBCallbacks = [callback];
        window.webkit.messageHandlers.iOS_Native_InjectJavaScript.postMessage(null)
        sessionStorage.phoneType = 'ios'
    }
}
//注册回调函数，第一次连接时调用 初始化函数(android需要初始化,ios不用)
setupWebViewJavascriptBridge(function (bridge) {
    if (isAndroid) {
        //初始化
        bridge.init(function (message, responseCallback) {
            var data = {
                'Javascript Responds': 'Wee!'
            };
            responseCallback(data);
        })
    }
})
 
export default {
    // js调APP方法 （参数分别为:app提供的方法名  传给app的数据  回调）
    callHandler(name, data, callback) {
        setupWebViewJavascriptBridge(function (bridge) {
            bridge.callHandler(name, data, callback)
        })
    },
    // APP调js方法 （参数分别为:js提供的方法名  回调）
    registerHandler(name, callback) {
        setupWebViewJavascriptBridge(function (bridge) {
            bridge.registerHandler(name, function (data, responseCallback) {
                callback(data, responseCallback)
            })
        })
    }
}

vue代码：
main.js

import Bridge from './common/jsBridge.js'
Vue.prototype.$bridge=Bridge

组件调用：

  created(){ 
       this.openScanFun() 
  },
  mounted(){ 
      this.scanCodeFun() 
  },
  methods:{
    //扫码
    openScanFun(){
      let param={};
      //调用原生的方法，callOnQRCodeAct：原生方法名
      this.$bridge.callHandler('callOnQRCodeAct',null,res=>{
         alert(res)
      })
    },
    scanCodeFun(){
     //原生调用js的方法，scanCodeReturnDataFun：js方法名
      this.$bridge.registerHandler("scanCodeReturnDataFun",        (data,responseCallback)=>{
          alert(data);
         
      })
    } 
  }