android na对比h5_【第1633期】Hybrid 应用中 H5 与 NA 通信的那点事儿

前言

今日早读文章由百度@董华磊投稿分享

@董华磊，百度高级研发工程师，毕业于大连理工大学，毕业后一直在百度工作，目前在百度前端技术部负责装馨家项目.

正文从这开始～～

APP 开发技术对比

• Native App

  • 一般是指本地化应用，后续简称 NA；

  • 优点：体验好，可以做一些比较好的交互效果，可作为独立软件出售；

  • 缺点：更新较差，需要靠发版本解决；且历史版本无法同步更新，开发成本比较大，需要两波开发人员：Android 和 IOS，分别使用 Object-c 和 Java；

• Web App

  • 一般是指我们开发的Html5网站，后续简称 H5；

  • 优点：开发成本较低，前端开发人员开发一套同时适配 IOS 和 Android；更新好，可随时上线，上线后版本能普及到所有使用的用户；

  • 缺点：体验没有 NA 好，没有独立的软件作为入口(当然后续如果 PWA 能普及并支持下载，这也不再是缺点了)；

• Hybird App

  • 一般是指混合型 App，一部分是 NA 开发人员开发，一部分是 H5 页面；

  • 优点：跨平台开发周期短、成本低，又能发挥Native App体验和性能的优势

  • 缺点：涉及到 H5 与 NA 通信，需要客户端开发和前端开发协同合作；

• 其他 App

  • js + 原生渲染，框架代表：RN、Weex；自绘 UI + 原生，框架代表：Flutter，对此的介绍可参考移动开发技术简介

Hybrid App 应用简介

Hybrid App 是半原生半 web 的开发模式，部分界面或者功能是原生的，其余部分是 html 和 js 来完成，最终 webview 加载 H5 页面；入职百度后第一个做的成型的产品是 Hybrid App，在开发过程中研究了 H5 与 NA 通信机制，特对通信机制进行介绍。

举例

在安卓中可以通过开启”设置“->”开发者选项“->”显示布局边界“，所有 NA 部分都会被框选出来，例如百度 App 中的首页，所有部分都有框选，整个页面都为 NA 实现；如下图所示；