寫在 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(window.WebViewJavascriptBridge);
        } else {
            document.addEventListener(
                'WebViewJavascriptBridgeReady',
                () => {
                    callback(window.WebViewJavascriptBridge);
                },
                false
            );
        }
        console.log('tag', '安卓');
        sessionStorage.phoneType = 'android';
    }

    //iOS使用
    if (isiOS) {
        if (window.WebViewJavascriptBridge) {
            return callback(window.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(() => {
            document.documentElement.removeChild(WVJBIframe);
        }, 0);
        console.log('tag', 'ios');
        sessionStorage.phoneType = 'ios';
    }
}
//注冊回調函數，第一次連接時調用 初始化函數(android需要初始化,ios不用)
setupWebViewJavascriptBridge((bridge) => {
    if (isAndroid) {
        //初始化
        bridge.init((message, responseCallback) => {
            var data = {
                'Javascript Responds': 'Wee!'
            };
            responseCallback(data);
        });
    }
});

export default {
    // js調APP方法 （參數分別為:app提供的方法名  傳給app的數據  回調）
    callHandler(name, data, callback) {
        setupWebViewJavascriptBridge((bridge) => {
            bridge.callHandler(name, data, callback);
        });
    },
    // APP調js方法 （參數分別為:js提供的方法名  回調）
    registerHandler(name, callback) {
        setupWebViewJavascriptBridge((bridge) => {
            bridge.registerHandler(name, (data, responseCallback) => {
                callback(data, responseCallback);
            });
        });
    }
};

main.js中引入:

import Bridge from './config/JSbridge.js'
Vue.prototype.$bridge = Bridge

組件中使用:
方法名和app開發人員溝通好，這里js調app，app提供的方法是dataToAndroid；app調js，js提供的方法是dataToJs

注冊方法
  mounted(){
    this.getAPPDate()
  },

js調app
  sendMsg(){
    let msg = this.msg
    this.$bridge.callHandler('dataToAndroid',msg,(res)=>{
      alert('獲取app響應數據:'+res)
      this.test = res
    })
  },

app調js
  getAPPDate(){
    this.$bridge.registerHandler('dataToJs', (data, responseCallback) => {
      alert('app主動調用js方法，傳入數據:'+ data)
      responseCallback(data)
    })
  }