H5与原生ios、安卓APP合并开发，兼容IOS与安卓

1.文件名：isCheckDevice.js ，判断是安卓或者ios设备的方法

//isCheckDevice.js 
const checkDevice = {
    // js判断是否是苹果设备
    checkIsAppleDevice() {
        var u = navigator.userAgent;
          //  app = navigator.appVersion;
        var ios = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
        var iPad = u.indexOf("iPad") > -1;
        var iPhone = u.indexOf("iPhone") > -1 || u.indexOf("Mac") > -1;
        if (ios || iPad || iPhone) {
            return true;
        } else {
            return false;
        }
    },
    //js判断是否为Android设备
    checkIsAndroidDevice() {
        var u = navigator.userAgent;
        if (u.indexOf("Android") > -1 || u.indexOf("Adr") > -1) {
            return true;
        } else {
            return false;
        }
    },

    isCheck() {
      if(this.checkIsAppleDevice()) {
          return 'ios'
      } else if (this.checkIsAndroidDevice()) {
          return 'android'
      } else {
          return 'h5'
      }
    }
}

2.监听安卓或者ios键盘弹起事件

 var isIos = checkDevice.isCheck();
 var originalHeight = document.documentElement.clientHeight || document.body.clientHeight;
 if (isIos == 'android') {
        const innerHeight = window.innerHeight;
        window.addEventListener('resize', () => {
            const newInnerHeight = window.innerHeight;
            if (innerHeight > newInnerHeight) {
                // 键盘弹出事件处理
                console.log("android 键盘弹窗事件");
            } else {
                // 键盘收起事件处理
                console.log("android 键盘收起事件处理")
            }
        });
    } 
    if (isIos == 'ios') {
        window.addEventListener('focusin', () => {
            // 键盘弹出事件处理
            console.log("iphone 弹出");
    });
        window.addEventListener('focusout', () => {
            // 键盘收起事件处理
            // console.log("iphone 收起")
    });
   }

3. H5中与ios\安卓通讯的桥接

function setupWebViewJavascriptBridge (check ,callback){
  if (check == 'android') {
    if (window.WebViewJavascriptBridge) {
      callback(window.WebViewJavascriptBridge)
    } else {
      // console.log("sdkfjdks",window.WebViewJavascriptBridge);
      document.addEventListener('WebViewJavascriptBridgeReady', function () {
        if (window.onWebViewJavascriptBridgeReady) window.onWebViewJavascriptBridgeReady(window.__bridge = window.WebViewJavascriptBridge);
        callback(window.WebViewJavascriptBridge)
      }, false)
    }
  }

  if (check == 'ios') {
    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(function () {
      document.documentElement.removeChild(WVJBIframe)
    }, 0)
  }
}

  function callhandler(check, name, data, callback) {
      setupWebViewJavascriptBridge(check,function (bridge){
        bridge.callHandler( name , data , function (data) {
              callback(data)
            }
        )
      })
  }

  function registerhandler(check , name, callback) {
    // console.log('check', check);
    // console.log('name', callback);
    if (check == 'android') {
      setupWebViewJavascriptBridge(check, function (bridge) {
        bridge.init(function (message, responseCallback) {
          responseCallback(message);
        });
        bridge.registerHandler(name, function (data, responseCallback) {
          if (responseCallback) {
            callback(data)
          }
        })
      })
    }

    if(check == 'ios') {
      setupWebViewJavascriptBridge(check, function (bridge){
        bridge.registerHandler(name, function (data, responseCallback) {
          if (responseCallback) {
            callback(data)
          }
        })
      })
    }
  }

4. H5使用桥接的方式

created: function () {
            /**获取token*/
            let isCheck = checkDevice.isCheck(),
                _self = this;
            if (isCheck == 'ios' || isCheck == 'android') {
                /*
                 * registerhandler 方法中参数描述
                 * 参数1; 设备类型
                 * 参数2：约束名称（提供给 app 或 ios 调用js 方法的方法名，作用：将数据传入到前端）
                 * 参数3：回调:responseCallback(data)
                 * */
                registerhandler(isCheck, "bridegeDemo", function (data, responseCallback) {
                    console.log('data',JSON.parse(data).token);
                    _self.tokenID = JSON.parse(data).token;
                    //这里判断是编辑还是保存草稿箱，
                    // _self.getEdit();
                });
            }
        },

/**调用 app 或 ios 中的方法*/
            bakClick: function () {
                let _self = this;
                let isCheck = checkDevice.isCheck();
                /*
                 * callhandler 方法中参数描述
                 * 参数1：设备类型
                 * 参数2：约束名称（及app 或ios中定义的方法名）
                 * 参数3：传参给ios、安卓
                 * 参数4：回调、接受值
                 * */
                callhandler(isCheck, 'back', '中文测试', data => {
                    console.log('调用app或ios中的方法',data);
            })
            },