h5与原生app交互的方法

很多 app 都会采用混合开发的模式，也就是原生 app 与 webview 相结合的方式。混合开发的 app 被成为 Hybrid App（混合app）。

混合开发的优点：

1、开发成本低、效率高、代码复用性强 app 内嵌的 h5 页面可以在微信、浏览器、各种小程序 webview 中复用，一套代码，多端运行。

2、降低用户升级 app 成本 h5 随时发版，随时完成升级迭代，无需用户手动升级 app

混合开发的缺点：

用户体验比原生稍差

项目中要不要使用过混合开发？

app 内嵌 h5 有利有弊，我们要做的就是扬长避短，充分发挥其长处，规避其短处。 对于项目中更新迭代频率较高、用户体验不会受到很大影响的页面交易使用 webview，减少原生 app 更新迭代次数。

webview 与原生 app 通信的方法

对 webview 与原生 app 的通信方法封装一下：

const userAgent = navigator.userAgent.toLowerCase()
export const isAndroid = /android|adr/.test(userAgent)
export const isIos = !!userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)

/**
 * 调用 app 函数
 * @param {string} methodName
 * app 定义的函数的参数可以跟在 methodName 后面传过去
 * 示例：callAppFn('jsGoAppBack')、callAppFn('jsGoAppContractStatus', {
 *    status: 1,
 *    isReset: false
 *  })
 */
export const callAppFn = (methodName, params = {}) => {
  const paramsStr = JSON.stringify({
    params
  })
  // android app
  if (isAndroid) {
    window[methodName] && window[methodName].postMessage(paramsStr)
  } else {
    /**
     * ios app or h5 兼容新老版本 ios webview
     */
    if (typeof window[methodName] === 'function') {
      window[methodName](paramsStr)
    } else {
        window.webkit &&
        window.webkit.messageHandlers &&
        window.webkit.messageHandlers[methodName].postMessage(paramsStr)
    }
  }
}

webview h5 页面调用原生 app 暴露的方法进行通信，以 fnFromApp 为例

callAppFn('fnFromApp', {
  hello: 'world'
})

小结

混合开发有利有弊，我们要充分发挥其长处。项目中更新迭代频次较高的页面可以酌情考虑使用 webview 开发，较低开发和维护成本。

本文地址：https://www.tides.cn/p_js-h5-communicate-with-native-app