app與h5混合開發(fā)h5需要調(diào)原生的方法實(shí)現(xiàn)具體功能
1.新建JSbridge.js文件

//用于和APP的原生方法交互（在H5的項目中主要調(diào)用isapp的方法判定是否在APP中來判斷是否顯示導(dǎo)航欄）
let isAndroid = navigator.userAgent.indexOf('Android') > -1 || navigator.userAgent.indexOf('Adr') > -1;
let isiOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);

//這是必須要寫的，用來創(chuàng)建一些設(shè)置
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.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);
    console.log('tag', 'ios');
    sessionStorage.phoneType = 'ios'
  }
}
//注冊回調(diào)函數(shù)，第一次連接時調(diào)用 初始化函數(shù)(android需要初始化,ios不用)
setupWebViewJavascriptBridge(function (bridge) {
  if (isAndroid) {
    //初始化
    bridge.init(function (message, responseCallback) {
      var data = {
        'Javascript Responds': 'Wee!'
      };
      responseCallback(data);
    })
  }
})

export default {
  // js調(diào)APP方法 （參數(shù)分別為:app提供的方法名  傳給app的數(shù)據(jù)  回調(diào)）
  callHandler(name, data, callback) {
    setupWebViewJavascriptBridge(function (bridge) {
      bridge.callHandler(name, data, callback)
    })
  },
  // APP調(diào)js方法 （參數(shù)分別為:js提供的方法名  回調(diào)）
  registerHandler(name, callback) {
    setupWebViewJavascriptBridge(function (bridge) {
      bridge.registerHandler(name, function (data, responseCallback) {
        callback(data, responseCallback)
      })
    })
  }
}

二、在main.js中加入

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

三、在需要調(diào)原生方法的頁面中調(diào)用

//判斷是否是APP
    isapp() {
      this.$bridge.callHandler("isapp", {}, (res) => {
        this.APP = res;
      });
    },
    //拉起APP登錄
    jslogin() {
      this.$bridge.callHandler("jslogin", {}, (res) => {});
    }
//isapp 、jslogin為app原生提供的方法名