H5与Android和ios原生交互

判断是Android还是ios

isIos() {
  // 判断是否是Ios
  return /(iPhone|iPad|iPod|iOS|Mac|Mac)/i.test(navigator.userAgent)
}
isAndroid() {
  // 判断是否是Android
  return /(Android)/i.test(navigator.userAgent)
}

H5调用原生方法的方式

原生需要写方法来让H5调用，H5在window中获取方法。

/**
* ios壳中方法全部放在webkit.messageHandlers对象中
* funcName 为原生方法名 
* postMessage(null) 跨源传递数据，没有数据，一定要写null 
*/
webkit.messageHandlers.funcName.postMessage(null)

/**
* android 为原生对象名
* funcName 为android对象中的方法 
*/
window.android.funcName ('')

封装H5调用原生方法的方式

//不带参数的方法
proceed(params) {
    // 继续下载
    if (this.isIos()) {
      window.webkit.messageHandlers.proceed.postMessage({
        params
      })
    } else if (this.isAndroid()) {
      window.android.proceed(JSON.stringify(params))
    }
  }
//带参数
giveOrgId(params) {
    // 传输数据
    if (this.isIos()) {
      window.webkit.messageHandlers.giveOrgId.postMessage({
        params
      })
    } else if (this.isAndroid()) {
      const { orgId, orgName } = params
      window.android.giveOrgId(orgId, orgName)
    }
  }

原生调用H5的方法

H5把方法挂载到window给原生调用就可以了

componentDidMount() {
  // funcitonName 是原生回调使用的方法名
  window.funcitonName = this.funcitonName;
  ...
}
/**
* 原生调用后， H5做的事情...
* 注意， 如果这里用了this， 那么一定要注意这里的this，可能不是你想要的this
*/
funcitonName = (args) => {
  ... // something
}