Hybrid App 开发快速指南[通俗易懂]

大家好，又见面了，我是你们的朋友全栈君。

课程背景

混合应用相对于原生应用而言，是原生应用和 Web 应用的结合体。过去几年，混合应用开发的各种利弊已得到充分的讨论和验证。关于混合应用是什么、为什么使用的问题，相信大家都有自己的答案，但如何开发混合应用，从现有资料中却很难找到一个系统、全面的回答。

刚上手或准备上手混合应用的开发者，经常苦于没有一套经过验证的最佳实践来指导开发，在开发的各个阶段往往遇到各种问题：

如何选型？
如何架构前端代码？
如何做好体验？
如何做好安全性？
如何正确使用原生能力？

如果对以上问题没有充分的理解，贸然开始一个混合项目就很容易掉进坑里。为了帮助大家解决这些问题，快速开展混合应用开发，特推出了本达人课。

课程介绍

本课程为混合应用开发入门课程，将带领读者快速掌握 Hybrid App 开发能力，内容涵盖混合应用原理、混合应用开发基础、混合应用开发进阶、混合应用开发最佳实践。

课程主要分为两大部分：

第一部分（第01-05课），理论篇，带大家明确了解混合应用开发与普通 Web 前端开发的差异，内容包括混合应用原理、混合应用界面开发、混合应用体验优化、性能优化、混合应用安全性等，属于混合应用开发基础理论内部。

第二部分（第06-13课），实战篇，从技术选型开始，讲解如何基于 APICloud 平台开发混合应用，内容包括平台特性、前端项目工程规划、界面交互、数据交互、数据缓存等开发中的各个方面，并将遇到的所有需求一一封装，最终将带你从零搭建一套混合应用开发框架。

课程以实战干货为主，在保证学习连贯性的前提下，尽量减少文档可查、引擎可搜的内容。通过认真学习本课程，读者将对混合应用开发有深入的理解，并有能力基于 APICloud 平台快速开发跨平台混合应用。

作者介绍

臧涛，五年前端从业者，从切图仔到架构师，练就一身丰富的踩坑经验。Flow-UI 组件化框架作者、HybridStart 混合应用框架作者。

课程内容

导读：七天开发一款 App 是怎样的体验？

引言

看到这个题目，很多人可能会下意识的想道：标题党！但我要说“七天开发 App”是我的亲身经历，严格来讲，前端开发实际所花费的时间可能还到不了七天。为什么可以做得这么快？首先，这是混合应用的魅力所在，投入一名前端，产出两个平台的 App，用 Web 技术做界面，比原生开发效率提升3-4倍已经是比较保守的估计了。

当然，仅仅这样还不够，提高开发速度最行之有效的方法莫过于“封装”，混合应用开发更是如此。做混合应用，实际上就是做 Mobile 页面+原生功能调用，这个自带“胶水”属性的架构，产生了比普通 Web 项目更多的可封装点，比如 UI、交互组件、页面方法、常用页面、常用模块等，有的是 Web 页面，而有的要借助原生能力，为了统一开发体验和接口风格，必须毫不犹豫的封装它们。

如果这些都做到位了，就可以很快完成项目界面开发，进入接口联调阶段。这时我们还需要一个封装良好的请求方法，为我们提供方便的调试、统一的异常处理、灵活的缓存能力、甚至加密传输能力。想让业务跑起来总少不了页面传参、数据存储、事件发布等能力，最后 App 还要能够在线升级，在线扩展。所有这些功能节点如果都封装到位，那开发速度想不快都难。

那这些封装可以通用吗？这些林林总总的东西看起来很杂，其实通用性很强，绝大多数混合应用项目都跳不出这个圈子，因此该系列课程在讲到各个开发环节的同时，也会介绍相应的封装思路及实现，最后大家除了可以获得必须掌握的理论知识，还会实战完成一套封装好的开发框架，可以说这是一套面向封装的混合应用开发课。

课程特色

“我为什么要为这套课程付费？”“这里有什么知识点是网上找不到的吗？”……在看到本达人课时，你心中可能会有些疑问。

严谨得说，没有哪个知识点是网上找不到的，所有的经验也都可以自己习得。但是，以下这些东西可能需要你付出很多时间才能自己摸索得到，而通过本课程，你可以轻松立即获得它们。

本课程的四大亮点：

1. 从务实的角度，为你选择一条干货最多的学习路线。无论什么样的课程都无法满足每一个人，不同知识背景的读者会有不同的困惑，本课程会假定您有一定的前端开发经验，尽量过滤掉太基础的纯前端问题，将更多篇幅集中在混合应用开发本身上，保证读者的学习效率不会因为低权重内容而降低。对于前端基础薄弱的读者，网上有足够多的高质量免费学习资源，当然，如果您能善用搜索引擎的话，相信这些问题都不在话下。

2. 大量的常见需求示例。初学者最常见的一种情况是，文档都看懂了，但还是写不出代码。简单得说，这是因为“键盘不会自己敲”，因此课程中的很多知识点会以实际需求的形式出现，通过一步一步的分析并实现这些需求，使读者对知识点的运用产生感性的认识，从而拉近知识与实践的距离，相信对初学者快速上手会有一定帮助。

3. 排坑。每个环节涉及的常见坑，都为你提前排好，我踩过的坑，希望你不要再踩。比如做全包加密可能导致无法运行的问题，这八成是因为某些文件的写法不规范，导致加密后无法运行；只要是 Web 就免不了兼容问题，考验你前端 Debug 经验的时候到了；iOS 上架被拒也比较常见，我遇到最多的两个原因分别是在线更新和权限问题。还有一些我自己踩过的坑，都会在课程对应章节里分享。

4. 一套非常好用的混合应用开发范式。混合应用从概念理解到上手实践可以说都非常简单，自己摸索文档三两个小时跑起来一个 Hello world 程序不是什么难事。做 Demo 不难但做实际项目却比较难，尤其是中型以上规模的项目。非难技术，而是很难找到一个好的开发范式。最开始，我从 Cordova 开始接触混合应用，后来转到国内 Appcan，再到 APICloud，截至目前已有四年以上混合应用开发经验，在开发和学习过程中逐渐提炼出一套做多页面混合应用的开发范式，相信对您一定有所帮助。

如果以上内容让你觉得有兴趣，那么就可以正式开始后面的课程了。

第01课：Hello Hybrid！

什么是混合应用

混合应用原理

混合应用是指同时使用前端技术与原生技术开发的 App。通常由前端负责大部分界面开发和业务逻辑，原生负责封装原生功能供前端调用，二者以 WebView 作为媒介建立通信，从而既拥有 Web 开发的速度优势，又能拥有强大的原生能力。

从前端开发者的角度，混合应用可以简单地理解为让前端页面跑在一个特殊的浏览器环境里，这个环境除了常规 Web API之外，还额外提供了很多可以直接调用手机原生能力的 API。

从原生开发者的角度，混合应用其实就是一个原生开发的 App 外壳，这个外壳将原生功能封装成很多 API 并注入到 WebView 里，然后将前端页面打包进 App，App 启动时用 WebView 加载前端页面，剩下的就全交给前端了。

混合应用原理

混合应用框架

混合应用框架的本质就是上面提到的那个原生 App 外壳，这个外壳重点实现三件事：

实现原生与前端（Javascript）的交互；
封装基本的原生功能，供前端调用；
实现原生插件机制，供原生开发者扩展功能。

只要做到这三件事，基本上就可以被称为混合开发通用框架。

混合应用框架

Cordova

最早出现也是最纯粹的混合应用方案是 Cordova/Phonegap，我们统称为 Cordova。Cordova 主要提供三种能力：

前端代码与原生代码通信的能力；
原生插件机制；
跨平台打包能力。

之所以说这是“最纯粹”的混合应用方案，是因为该方案只为前端提供了一个 WebView，除此之外完全不干预展现层。其 App 外壳也只内置了极少数几个 API，其他原生功能都要靠插件实现。可以说 Cordova 只实现了混合应用框架的最小功能集合，从框架设计的角度，这样可以最大限度得做到不干扰业务，提高定制性。

但 Cordova 的不足之处也非常明显。由于 Web 前端技术暂时还不足以开发出流畅的转场动画，而且可预见的未来手机操作系统恐怕都不会优化这一点，因此在前端只有一个 WebView 的情况下，转场动画将是绕不过去的一大问题。Cordova 的插件生态还算不错，但对于国内开发者来说难免有点水土不服，找插件经常要花不少时间，对于一些本土化服务的支持也没那么及时，遇到插件 Bug，就更是求助无门了。对于没有原生开发能力，英文水平又不是太好的国内开发者来说，Cordova只是一个“看上去很美”的方案。

混合应用开发平台

针对 Cordova 存在的问题，国内厂商给出了一种优化方案，那就是混合应用开发平台，平台的种类有很多，但他们的核心思路基本一致，都是在 Cordova 的基础上做了以下几点改进：

以云平台的方式管理项目，整个开发周期除了写代码以外都能在平台上实现；
丰富的内置原生能力，做到开箱可用；
打造本土化的插件生态；
多 WebView 机制，用原生转场解决流畅性问题，这是杀手级特性。

结合以上特性，混合应用开发平台实际上已经将 Hybrid App 开发完全变成了前端开发者“一个人的事”，普通原生需求都内置了，扩展原生需求可以借助插件生态实现，前端转场不流畅可以用原生效果代替，甚至还提供 App 开发的全生命周期管理功能，包括 App 配置、项目管理、更新、统计等。可以说，混合应用开发平台这种模式的出现，将 Hybrid App 开发的技术门槛降到了最低，真正实现了只要一名前端就能开发跨平台 App 的目标，而且整个开发过程只需要用到 Web 前端技术，因此开发速度可以非常块，一个熟练的前端开发者完全可以在几天之内完成一个中小规模的 App 开发。

混合应用开发平台

市面上可选择的混合应用开发框架还有很多，例如 Ionic，原生部分仍然是 Cordova，UI 层使用 Angular 做了封装，相当于混合应用界的 Bootstrap；NativeScript，这个框架在理念上比 Cordova 更进一步，它为视图层封装了一套语法，前端使用这个语法开发界面和逻辑，最终打包后的 App 将全部使用原生绘制 UI，理念其实跟 RN/Weex 差不多。每一种的开发框架都有自己的优缺点，我们将在后面章节中对它们做一次详细的横向对比。

为什么使用混合开发方式

优缺点

混合开发方式可以在只投入一名前端开发者的情况下，快速开发出兼容多个平台的 App，相比原生开发同时降低了开发的时间成本和人力成本，这是混合开发能够一直维持旺盛生命力的根源。

但有得必有失，我们也必须正视混合开发的弊端，受限于 HTML5 的表现力，混合应用在 UI 层面很难达到原生界面的细腻程度；界面的载入速度也很容易受到手机运行速度和页面大小的影响。如果前端开发做的不够细致，就很容易给用户带来“网页感”，使 App 的用户体验大打折扣。

应用场景

结合上述优缺点分析，混合开发方式比较适合以下类型的项目：

功能导向的项目，例如企业内部 App、面向特定用户的工具类 App；
需要快速开发迭代的项目，例如新产品试水、外包项目；
缺少原生开发团队的企业。

总而言之，对体验要求不苛刻，且工期预算有限的 App 项目，都非常适合做成混合应用，尤其在外包领域，混合应用占据绝对领先的市场份额。另外很多中小型公司，在发展初期为了节省人力成本，往往不配置原生开发团队，也会采用混合开发方案。

这里额外提醒一下，对于没有原生开发能力的团队，使用混合方案会有一个潜在的问题，就是原生需求完全受制于既定框架及其插件生态，因此在项目开始前，一定认真做技术选型，避免做到一半后无法继续做的情况。

小结

本文，我们简要讲解了混合应用开发的原理，并介绍了几种目前市面上常见的混合开发框架，及它们各自的特点。目的是让从未接触过混合应用开发的初学者，能够了解前端在混合开发中的分工和定位，有助于在后面的章节里快速进入角色。另外还简单分析了混合开发方式的优缺点，并结合优缺点列举了几种比较适合采用混合方案开发的项目类型，帮助读者更有针对性的选择学习方向。