仿淘宝电商项目实战|18.1Native与HTML5交互

本文为菜鸟窝作者刘婷的连载。菜
菜鸟窝-程序员的黄埔军校

当看到这个标题的时候，很多人都觉得很熟悉啊，现在市场上面大多数的 App 都使用到了这个，使用原生 Native 嵌套 Html5，而这种模式的出现，也出现了一个新的词叫做 Hybrid App ，也就是混合 App，这篇的文章主要就是来分享下 Hybrid App 的相关知识以及下如何实现 Native 和 Html5 的交互。

App 的三种主要类别

目前主流 App 应用程序主要分为三类，分别为 Web App、Native App 和 Hybrid App，也就是网页 App、原生 App 和混合 App。其中网页 App 主要是借助于浏览器就可以直接运行使用，原生 App 是原生的应用程序，混合 App 就是前面两者的结合体。

1. Web App 的详细介绍

Web App 指采用 Html5 语言写出的 App，不需要下载安装。类似于现在所说的轻应用。生存在浏览器中的应用，基本上可以说是触屏版的网页应用。

1.1 Web App 的优点

（1）轻应用，借助于浏览器，不需要太高的成本，所以开发成本相对较低。
（2）直接可以在后台服务器上面更新，更新方便而且快。
（3）更新无需通知用户，不需要手动升级。
（4）在 IOS 、Android 和 Windows 等平台和终端都可以使用，能够跨多个平台和终端。

1.2 Web App 的缺点

（1）网页的加载，只是临时性的入口。
（2）无法获取系统级别的通知，提醒，动效等等，缺少原生的一些功能。
（3）用户留存率低。
（4）设计受限制诸多。
（5）受制于网速等，体验较差。

2. Native App 的详细介绍

Native App 指的是原生程序，一般依托于操作系统，有很强的交互，是一个完整的 App，可拓展性强，但是需要用户下载安装使用。

2.1 Native App 的优点

（1）打造完美的用户体验。
（2）原生的应用程序，性能稳定。
（3）操作速度快，上手流畅。
（4）访问本地资源（通讯录，相册）方便。
（5）设计出色的动效，转场。
（6）拥有系统级别的贴心通知或提醒。
（7）用户留存率高。

2.2 Native App 的缺点

（1）开发成本高（不同平台有不同的开发语言和界面适配）。
（2）维护成本高（例如一款App已更新至V5版本，但仍有用户在使用 V2， V3， V4 版本，需要更多的开发人员维护之前的版本）。
（3）更新缓慢，根据不同平台，提交–审核–上线 等等不同的流程，需要经过的流程较复杂。

3. Hybrid App 的详细介绍

Hybrid App 指的是半原生半Web的混合类 App，需要下载安装，看上去类似 Native App，但只有很少的 UI Web View，访问的内容是 Web，比如淘宝、京东等 App 都是这种类型的。

3.1 Hybrid App 的优点

（1）极力去打造类似于 Native App 的体验。
（2）可以简单更新 APP 内部的局部内容，拥有 Web App 的优势。
（3）结合了 Native App 和 Web App 的优点，性能也相对稳定。

3.2 Hybrid App 的缺点

（1）受制于技术、网速等条件，跨平台要求较高。
（2）原生和网页的融合向不完善，技术不是很成熟，还在不断更新中。
（3）还是需要较高的开发和维护成本。

4. 三种类别的对比

上面详细介绍了三种类别的概念和优缺点，对于这三种类型的 App 也有了一定的认识了，最后总结下这三种类型，看图说话。