从零学习 App 打包工具 Cordova

课程介绍

Cordova 是一个开源的移动开发框架。允许你用标准的 Web 技术——HTML5，CSS3 和 JavaScript 做跨平台开发。应用在每个平台的具体执行被封装了起来，并依靠符合标准的 API 绑定去访问每个设备的功能。

本课程是一个系列基础教程，目标是带领读者上手实战，你可以掌握和 Cordova 相关环境搭建，创建项目，添加插件等核心技能。随心随意打包自己的 App 应用。

作者简介

高武军，移动端架构师兼撸代码，喜欢钻研和技术分享。主要开发产品：MDN（适配 App 和微信移动端解决方案），PageUI（移动端 UI 组件库），formBuilder（让前端建表和操作表的表单设计器）。

课程内容

导读：混合开发 APP

近年来随着移动设备类型与操作系统的增多，用户需求也日益增长，因此在项目启动前，大家都会考虑到它的需求、成本、需要投入的时间，自己的团队成员与技术成熟度等一系列因素。在这种情况下，App 的开发方案也尽显多元。

曾经 Html5 有一段小浪潮，很多人看到或参与过这样一个讨论：是选择原生开发、混合开发，还是 Web 开发？究竟哪个才是最佳实践，笔者认为只有实践过的人才知道，尤其是在当今这个充满变数的移动互联网时代。

混合移动应用程序开发的流行

当涉及到移动应用程序开发时，目前还没有一种可以适合所有场景的方式。你可以选择开发本地应用程序、基于网络的移动应用程序或是混合移动应用程序，而在以上选项中，混合移动应用程序开发应该是最具优势的。

那么什么是混合应用程序开发呢？

App 混合开发，顾名思义是一个开发模式，它指的是开发 App 时一部分功能用 native 构建，另一部分功能用 Html5 构建。介于 web-app、native-app 这两者之间的 App，英文名叫：Hybrid App。

其实，早在几年前就已经出现了 App 混合开发模式，到2014年末才开始流行，2016年已经被广泛使用，而2017年甚至达到鼎盛期。

混合开发模式的流行离不开它自身的优势，因为 Hybrid App 总体特性更接近 Native App，但是和 Web App 区别较大，同时使用了网页语言编码，所以开发成本和难度比 Native App 要小很多。因此说，Hybrid App（混合模式移动应用）兼具“Native App 良好用户交互体验的优势”和“Web App 跨平台开发的优势”。目前有名的混合开发框架有 Cordova，React-Native，Weex，Ionic 等。

Cordova

Cordova 是 Apache 的一个开源项目。

Cordova 的体系架构从上往下分为，前端（html，js），Html 渲染引擎（各平台的浏览器组件），cordova plugin。Cordova Plugin 为 Cordova 重最核心的部分，扩展了 js 访问手机硬件和原生 API 的接口。

开发者可自定义 Cordova Plugin 扩展自己的原生接口，添加到 Cordova。总体来说 Cordova 即可以简单的部署到多平台，也支持单平台的深层定制。

ReactNative

Facebook 推出的跨平台框架。 使用 JS 和 React 就可以开发 App，React 是 Facebook 自己的 JS 库。用 react-native 开发的界面会完全转化为 native 界面。部署的时候不用重新编译，可以热加载而且可以植入原生代码。

react-native 是通过 JavaScript 将 native 中的方法映射到 JS 中，没有使用浏览器组件（除低版本 iOS），严格意义上来说开发出来的并不是 Hybrid App。所以，开发时比较依赖 react-native 暴露出来的接口，除此之外，初次学习成本比较高，需要学习 react 的使用（一套前端不能复用到 PC、手机浏览器、微信公众号网页）。

Weex

阿里推出的跨平台框架，Weex 的理念是write once run anywhere 也就是三端体验一致，让大家专注于业务，写一份代码 iOS、Android、H5 都能够适用。当然也有为企业节省开发成本的考虑。所以 Weex 技术方案的关键在于要拥有一个强大的解析渲染引擎。

Weex 所采用的技术架构方案：JS 引擎用 V8，JS 开发框架基于 vue.js。可以看出学习的成本也是非常高的。

Ionic

Ionic 是一个专注于用 Web 开发技术，基于 Html5 创建类似于手机平台原生应用的一个开发框架。绑定了 AngularJS 和 Sass。这个框架的目的是从 Web 的角度开发手机应用，基于 Cordova 的编译平台，可以实现编译成各个平台的应用程序。

Ionic 所采用的 JS 开发框架基于 AngularJS，并且还提供了很多 UI 组件，封装了 Cordova 常用的 Native API，但是看出学习的成本也是非常高的。

Cordova 的优势在于你熟悉了 Cordova 开发方式，熟悉了一套框架，把 Html5 开发手机 App 的坑大部分都踩过一遍之后，开发第二个 App 会极大的提高你的开发速度！

所以那些会 Html5 技术想更进一步掌握跨平台，高性能 App 开发技术，增加职场竞争力的前端人员。优秀的 Cordova 将是你的第一选择。

Cordova——混合型框架中的佼佼者

Cordova 主张一站式开发，简而言之，就是一个纯 Html5 的开发人员也可以开发和发布 Android 和 iOS 的 App了，而不需要专门的 Android 和 iOS 开发人员。

而在众多混合型框架中，Apache 作为幕后老大，背景强大，Cordova 可以说是佼佼者。Cordova 基于标准的 Web 技术——HTML、JavaScript 和 CSS，用 JavaScript 包装平台的 API 供开发者调用，具备强大的编译工具为不同平台生成应用，同时拥有丰富的第三方资源和产业链。

Cordova 的特点有以下：

• 插件丰富

Cordova 的插件是其生态系统的重要组成部分，能帮助你快速地抵达移动设备的原生 API 上面。它提供了Cordova 和原生组件相互通信的接口，将其绑定到了标准的设备 API 上。这使你能够通过 JavaScript 调用原生代码。

Apache Cordova 项目维护着一组插件叫做核心插件。这些核心插件可以让你的应用程序访问设备功能，比如：电源、相机、联系人、摄像头、麦克风、传感器、数据、网络状态等。除了核心插件，Cordova 还有一些第三方插件提供若干个附加功能。

• 可移植性

基于浏览器的移动 Web 可移植性和跨平台最突出表现为混合 App 也能节省跨平台的时间与成本，开发者只需编写一次核心代码就可部署到多个平台，而原生 App 的跨平台性能最差。

目前已有部分开发商采取了只编写一次应用程序，就可以在6个主要的移动平台和应用程序商店（App Store）里进行发布的方式，这些移动平台和应用程序商店包括：iOS、Android、BlackBerry、webOS、Bada 以及 Symbian 等。

当然这种方式也存在缺点，笔者认为其最主要的缺点有两个：一是性能不够好，二是兼容性较差。

但随着 Android 5.0+ 的普及以及 iOS 9.0+ 的普及，性能缺陷和兼容性问题都在减少，也就是说，如果未来某天 Android 最低支持版本从5.0开始，iOS 最低支持版本从9.0开始了，那么混合开发 App 的缺点就变得不那么明显了。很明显现在这都不是问题。

随着移动互联网的发展，现在基本是 App 满天飞，如果我去下载一个 App，那么基本都能看到有两种选择，一种是 Android 版本，一种是 iOS 版本。不管我的手机是哪种操作系统，安装完一个 App 之后，后续如果有新的版本发布的时候，我还必须去更新，才能享用新版本里的功能。比如我装了“京东”这个 App，前几天正好碰到“618”活动，那么之前一个月 App Store 就提醒我要去更新最新的 App 版本，以免错过“618”活动中新的功能使用。相对来说 iOS 系统更新 App 比起 Android 系统用户体验会好一点，但是还是稍显麻烦。

那么有没有一种方式，我只需要开发一个 App 版本，就能去适配通用的操作系统呢，不仅可以适配 Android、iOS，还可以适配其他系统，比如 Windows Phone、 Palm WebOS、Blackberry 等等。有，Cordova 就能提供这种能力，代码写一次，就能到处运行，跟我们日常开发网站效果一样，基于写 Web App，根据输出平台要求不同，就能提供不同类型的安装包。Cordova 其设计初衷是希望用户群体能够通过跨平台开发的方法降低原生开发的成本，为此，开发人员需要安装原生开发环境，配置工程，使用 HTML5、CSS3、JS 和原生 SDK 生成应用。

使用 Apache Cordova 的人群

• 移动应用开发者，想扩展一个应用的使用平台，而不通过每个平台的语言和工具集重新实现。
• Web 开发者，想包装部署自己的 Web App 将其分发到各个应用商店门户。
• 移动应用开发者，有兴趣混合原生应用组建和一个 WebView（一个特别的浏览器窗口）可以接触设备 A 级PI，或者你想开发一个原生和 WebView 组件之间的插件接口。

或许在未来几年，Android 和 iOS 开发人员需求量将会逐渐减少，而 Html5 开发人员需求量会与日俱增，那么，从 Android 或 iOS 转型为 Html5 的开发人员会更加地走俏。

第01课：一起搭建 Cordova 开发环境

第02课：Cordova 生命周期

第03课：Android 与 iOS 打包

第04课：JS 是如何和本地 API 进行通信

第05课：利用 Hooks 预处理打包流程

第06课：Cordova Plugin 的使用和自定义

第07课：手机按键与 Cordova

第08课：App 自动更新设计

第09课：Cordova 实战开发技巧（一）

第10课：Cordova 实战开发技巧（二）

第11课：Cordova 实战开发技巧（三）

阅读全文: http://gitbook.cn/gitchat/column/5a09096b7aaa792513c11ad4