高德打车对接loader.js文件的实现

一、因为我们接入高德打车h5功能，所以就需要实现js交互，对于js交互我们选择了使用第三方框架WebViewJavascriptBridge（这个框架两端引入方式不同）。

二、高德对接时候给了一个loader.js文件，里面的功能有待于我们自己去完善。

三、废话不多说了，直接（loader.js）代码实现部分

const u = navigator.userAgent;
const isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

//iOS端异步引入WebViewJavascriptBridge

function getIOSBridge(callback) {

  return new Promise(resolve => {
    if (window.WebViewJavascriptBridge) { return resolve(WebViewJavascriptBridge); }
    if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(resolve); }
    window.WVJBCallbacks = [resolve];
    var WVJBIframe = document.createElement('iframe');
    WVJBIframe.style.display = 'none';
    WVJBIframe.src = 'https://__bridge_loaded__';
    document.documentElement.appendChild(WVJBIframe);
    setTimeout(function () { document.documentElement.removeChild(WVJBIframe) }, 0)
  }).then(callback)
}
 //安卓端异步引入WebViewJavascriptBridge

function getAndroidBridge(callback) {
  return new Promise(resolve => {
    function initBridge() {
      window.WebViewJavascriptBridge.init(function (message, responseCallback) {
        console.log('JS got a message', message);
        var datas = {
          'Javascript Responds': '测试中文!'
        };
        console.log('JS responding with', datas);
        responseCallback(datas);
      });
    }
    if (window.WebViewJavascriptBridge) {
        initBridge()
        resolve()
    } else {
      document.addEventListener('WebViewJavascriptBridgeReady', function () {
          initBridge()
          resolve()
      }, false);
    }
      
  }).then(callback)
}
//iOS和安卓端异步引入WebViewJavascriptBridge框架方法整合

async function getBridge(callback) {
  if (isAndroid) {
    await getAndroidBridge(callback)
  } else if (isiOS) {
    await getIOSBridge(callback)
  }
}

;(function (window) {
  function loadJSBridge(main) {
    class JSBridge {
      constructor() {
        const self = this;
        return function JSBFn(opts, cb) {
          if (self[this]) {
            self[this](opts, cb);
          }
        }
      }

      /**
       * 获取当前定位
       * @param  {Object}   opts
       *   - [String] bizType 标识当前应用类型，目前值为 'amap'，如无需使用请忽略
       * @param  {Function} cb   回调函数
       * @回调函数参数 {Object}
       *   - [String | null] error 标识异常信息，获取定位成功时应为 null
       *   - [Number] longitude 经度，保留小数点后 6 位
       *   - [Number] latitude 纬度，保留小数点后 6 位
       */
      getCurrentLocation(opts, cb) {
        // @todo
        WebViewJavascriptBridge.callHandler('getCurrentLocation', "", function (response) {
          if (isAndroid) {
            response = JSON.parse(response);
          }
          // logger.info(LogTag.loader, 'getCurrentLocation result', response)
          cb(response);
        });
      }

      /**
       * 开启持续定位
       * @param  {Object}   opts
       *   - {Number} callbackInterval 获取定位的时间间隔
       * @param  {Function} cb 回调函数，开启持续定位后，应定时回调此方法
       * @回调函数参数 {Object}
       *   - [String | null] error 标识异常信息，获取定位成功时应为 null
       *   - [Number] longitude 经度，保留小数点后 6 位
       *   - [Number] latitude 纬度，保留小数点后 6 位
       */
      startContinuousLocation(opts, cb) {
        // @todo
        const { callbackInterval = 5000 } = opts;
        this.continuousLocationTimr = window.setInterval(() => {
          this.getCurrentLocation({}, cb);
        }, callbackInterval);
      }

      /**
       * 停止持续定位
       * @param  {Function} cb 回调函数，无需参数
       */
      stopContinuousLocation(cb) {
        // @todo
        clearInterval(this.continuousLocationTimr);
        this.continuousLocationTimr = null;

      }
      /**
       * 获取设备号，安卓手机提供IMEI MEID，苹果手机提供IDFA，如果部分机型获取不到一律传空字符串，
       * 不可以是 invalid 等标识字符串
       * @param  {Function} cb 回调函数
       * @回调函数参数 {String} 设备号
       */
      getDeviceId(cb) {
        // @todo
        WebViewJavascriptBridge.callHandler('getDeviceId', "", function (response) {
          cb(response);
        });
      }

      /**
       * 设置导航栏标题
       * @param {Object} opts
       *   - {String} title 导航栏标题
       */
      setTitle(opts) {
        // @todo
        WebViewJavascriptBridge.callHandler('setTitle', opts['title'], function (response) {
          cb(response);
        });
      }

      /**
       * 复制到剪切板
       * @param {Object} opts
       *   - {String} text 需要复制的文本内容
       */
      setClipboard(param) {
        console.log(param)
        // @todo
        WebViewJavascriptBridge.callHandler('copyclipboard', param, function (response) {

        });

      }

      /**
       * 关闭当前 webview
       */
      popWindow() {
        // @todo
        WebViewJavascriptBridge.callHandler('popWindow', '', function (response) {

        });

      }

      /**
       * 打开新的 webview
       * @param  {Object} opts
       *   - {String} url 新页面链接
       *   - {Object} param 参数
       *     - {String} defaultTitle: 新页面标题
       */
      pushWindow(opts) {
        // @todo
        WebViewJavascriptBridge.callHandler('pushWindow', opts, function (response) {

        });

      }

      /**
       * 获取系统信息
       * @param  {Function} cb 回调函数
       */
      getSystemInfo(cb) {
        // @todo
        WebViewJavascriptBridge.callHandler('getSystemInfo', "", function (response) {
          if (isAndroid) {
            response = JSON.parse(response);
          }
          cb(response);
        });
      }

      /**
       * 禁止手势返回
       * @param {Object} opts
       *   - {Boolean} val 手势返回开启状态 true 为允许返回，false 为禁止返回
       */
      setGestureBack(opts) {
        // @todo
        WebViewJavascriptBridge.callHandler('setGestureBack', opts['val'], function (response) {

        });
      }

      /**
       * 隐藏导航栏
       */
      hideTopBar() {
        // @todo
        WebViewJavascriptBridge.callHandler('hideTopBar', '', function (response) {

        });
      }

      /**
       * 调起支付收银台
       * @param  {Object}   opts
       *   - {String} orderStr 支付宝支付交易字符串
       * @param  {Function} cb 回调函数
       * @回调函数参数 {Object}
       *   - {Number|String} resultCode 支付宝返回的 code
       *   - {String} memo   错误描述
       */
      tradePay(opts, cb) {
        // @todo
        WebViewJavascriptBridge.callHandler('alipay', opts['orderStr'], function (response) {
          if (isAndroid) {
            response = JSON.parse(response);
          }
          cb(response);
        });
      }
    }
    window.JSBridge = new JSBridge();
    getBridge(main)
  }

  window.loadJSBridge = loadJSBridge;
  loadJSBridge(()=>{
    console.log('加载成功')
  })
})(window);