webApp中H5和原生交互

开发webAPP的过程中，通常因为业务逻辑或兼容性问题，需要H5和原生APP之间互相调用，以下为具体的代码

• 操作系统判断

  通过浏览器提供的navigator.userAgent判断当前操作系统

function paltform() {
  var ua = navigator.userAgent.toLowerCase()
  //微信
  if (ua.indexOf('micromessenger') !== -1) return 'wechat'
  //ios (ipad/iphone)
  if (ua.indexOf('iphone') !== -1 || ua.indexOf('ipad') !== -1) return 'ios'
  //android
  if (ua.indexOf('android') !== -1) return 'android'
  //PC
  return 'desktop'
}

安卓和iOS通信方法是有区别的,iOS通过jsBriage来实现的

• H5中添加方法

//paltform可引用上面的判断方法
function () {
  window.$NATIVE = {}
  //iOS jsBriage
  function setupWebViewJavascriptBridge(callback) {
    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 = 'https://__bridge_loaded__'
    document.documentElement.appendChild(WVJBIframe)
    setTimeout(function () {
      document.documentElement.removeChild(WVJBIframe)
    }, 0)
  }
  
  return new Promise((resolve, reject) => {
    if (paltform === 'ios') {
      //iOS
      setupWebViewJavascriptBridge(function (bridge) {
        //注册给原生调用的方法
        bridge.registerHandler('NATIVE_XX', function () {
          //....相关操作
        })
        //注册原生提供的的方法
        window.$NATIVE.XXX_XX = (a,b = 0) =>
          new Promise((resolve, reject) => {
            bridge.callHandler('XXX_XX', [a, b], function responseCallback(
              value
            ) {
              resolve(value)
            })
          })
          //如果不需要返回promise格式，可以直接调用   
          //bridge.callHandler('XXX_XX', [a, b])
      })
    } else if (paltform === 'android') {
      //安卓
      //注册给原生调用的方法
      window.NATIVE_XX = function (value) {
        //....相关操作
      }
      //注册原生提供的的方法
      window.$NATIVE.XXX_XX = (a, b = 0) => {
        return new Promise((resolve, reject) => {
          resolve(window.APP.XXX_XX([a, b]))
        })
        //如果不需要返回promise格式，可以直接调用   
        //window.APP.XXX_XX([a, b])
      }
    }
    
  })
}

上述代码中的XXX_XX和window.NATIVE_XX中的XX都是和原生APP（安卓和iOS）约定好的方法名和，出入参也需要和APP约定好

• 调用方法（不区分安卓和iOS）

//promise格式调用
window.$NATIVE.XXX_XX(1,2).then(value => 
    // 获取有效值并添加相应操作
    console.log(value)
})

//普通格式调用
window.$NATIVE.XXX_XX(1,2)

H5提供给原生APP的方法，安卓和iOS开发分别在各自的代码中按照约定的方法名和参数调用即可，这样原生APP和h5之间就可以互相调用，双向通信了