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);
         
      })
    } 
  }