h5调用native

341 阅读1分钟

native加载h5页面时,通过window.navigator.userAgent来判断是ios还是android

//获取native类型
function getNativeType() {
  const u = window.navigator.userAgent// 当前浏览器的用户代理
  // alert(u)
  // const app = navigator.appVersion
  const isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1 // android终端或者uc浏览器
  const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) // ios终端
  return [isAndroid, isiOS]
}

当调用android方法时,需要参数需要严格匹配,否则将调用失败

// 调用原生接口
export function callNative(funName, str) {
  const [isAndroid, isiOS] = getNativeType()
  if (isAndroid) {
    //android方法无参数时将不能传递参数
    const result = str ? window.android[funName](str) : window.android[funName]()
  } else if (isiOS) {
   //
    window.webkit.messageHandlers[funName].postMessage({
      'str': str
    })
  }
}

HTML5和原生app交互