Cordova + Ionic + AngularJS

本文是一篇关于我本人在使用 Cordova + Ionic 以及 AngularJS 开发移动App的过程中的经验的总结，它不是一篇基础入门教程，而是和大家探讨一下关于如何更好的使用这些技术开发一个更好的App，文章会每天抽一点时间完成，如果您有什么问题或者想与我交流的经验，欢迎随时在本文下方评论或者邮件给我：54778899 [at] qq.com。

声明：这是一篇中立的文章，我无意于挑起孰好孰坏的争论，这只是一篇经验分享文，至于为什么选择这种技术，因为我会这个，感觉还不错。

Cordova, Ionic, AngularJS 都是什么？

Cordova

Cordova是一款开放源代码的App开发框架，旨在让开发者使用HTML、Javascript、CSS等Web APIs开发跨平台的移动平台应用程序，其原名称之为 PhoneGap，Adobe 收购Nitobi 公司后，PhoneGap 商标保留，代码贡献给了 Apache 基金会，而Apache 将其命名为 Apache Callback，其后发布新版本时，定名为 Apache Cordova。

Cordova是一个行动设备的API接口集，利用JavaScript存取这些接口可以调用诸如摄影机、罗盘等硬件系统资源。配合上一些基于HTML5、CSS3技术的UI框架，如jQuery Mobile、Dojo Mobile或Sencha Touch，开发者得以快速地开发跨平台App而不需要编写任何的原生代码。

注意到因为Cordova本身仍是一个原生程式，为App打包时依然需要用到这些系统平台的SDK。

本文将结合 Ionic 前端框架进行开发

Ionic

Ionic是一个新的、可以使用HTML5构建混合移动应用的用户界面框架，它自称为是“本地与HTML5的结合”。该框架提供了很多基本的移动用户界面范例，例如像列表（lists）、标签页栏（tab bars）和触发开关（toggle switches）这样的简单条目。它还提供了更加复杂的可视化布局示例，例如在下面显示内容的滑出式菜单。

Ionic宣称他们极度强调性能，并且通过限制DOM交互、完全移除jQuery以及使用像translate(z)这种特定的硬件加速的CSS滤镜触发移动设备上GPU——与由动力不足的移动浏览器提供的交互相比这种方式提供了硬件加速的交互——等方式使速度最大化。

AngularJS

AngularJS是建立在这样的信念上的：即声明式编程应该用于构建用户界面以及编写软件构建，而指令式编程非常适合来表示业务逻辑。[1]框架采用并扩展了传统HTML，通过双向的数据绑定来适应动态内容，双向的数据绑定允许模型和视图之间的自动同步。因此，AngularJS使得对DOM的操作不再重要并提升了可测试性。

设计目标：

• 将应用逻辑与对DOM的操作解耦。这会提高代码的可测试性。
• 将应用程序的测试看的跟应用程序的编写一样重要。代码的构成方式对测试的难度有巨大的影响。
• 将应用程序的客户端与服务器端解耦。这允许客户端和服务器端的开发可以齐头并进，并且让双方的复用成为可能。
• 指导开发者完成构建应用程序的整个历程：从用户界面的设计，到编写业务逻辑，再到测试。

Angular遵循软件工程的MVC模式，并鼓励展现，数据，和逻辑组件之间的松耦合。通过 依赖注入（dependency injection） ，Angular为客户端的Web应用带来了传统服务端的服务，例如独立于视图的控制。因此，后端减少了许多负担，产生了更轻的Web应用。

开发环境

我所使用的开发环境包括下面这些：

工作站：一台13寸的 MacBook Pro Retina + iPad Mini

使用Mac开发前端有很多优势，对于我来讲，最大的优势就在于我还是一个Linux用户，很多的Linux习惯在Windows下面总是会有一些不适应，再者，OS X的系统稳定性以及各种各样优秀的App，也让它一直都成为我的工作利器。

我没有像很多牛逼的大神们购买多块屏幕，我只有一台iPad Mini，然后还有一个叫作 Duet 的App，它可以让我把 iPad 作为我的 Mac 的第二块屏幕，一般不需要，但是它真的能提高我的工作效率，而且可以直接使用到 iPad 的触摸屏，这对于移动开发来讲，很好。

我还有一台 Lenovo 的 Yoga 3，装了 Ubuntu，不过很少用，显示有点儿别扭，但是，比起其它的PC机，这台还是很不错了，大家也可以试试。

开发工具

以前是Notepad++ 的忠实用户，然后还有 Coda、TextMate、BBEdit、SublimeText 等等的，现在用的（而且可能以后会一直使用的）——WebStorm，软件是收费的，我用的是盗版的，实在是没有钱买，等以后有钱了一定补上。

当然了，WebStorm只是主开发工具，有的时候临时需要修改某个文件的时候，我还会使用 BBEdit，因为启动会比 WebStorm 快得多。

FTP 工具

有的时候会需要将文件发布至服务器上面去，我也没有安装FTP工具，直接使用的就是 SFTP，软件使用的是 Transmit，从用苹果的那一天开始就一直使用这个，没有改变过，和Coda是同一家公司（个人？）出的。

构建工具

打包工具是自己写的一个Python脚本，里面用到了三个第三方包：

• bs4
• jsmin
• csscompressor

分别用于压缩清理 HTML、JS以及 CSS，NB的Grunt、Gulp之类的一直没用，也深深的感觉，我没有必要用，最主要是我完全不懂啊，所以，一直没有使用，就自己用Python写，也很快，十几分钟就可以把一个构建或者说清理打包脚本写好。

版本管理

Git + GitLab ，我使用的是Git进行版本管理，然后自己有一台 Git 服务器，装有 GitLab 进行包管理，有兴趣也可以看看我公开的 Git 库，地址：http://git.osnuts.com。

有时候朋友问我是做什么的？我说以前是用PHP写后台，最近是用H5写前台APP(俗称的Hybrid App); 
在公司做了几个H5的项目之后，有时候也想抽空研究下H5写一些APP；总觉得写APP的开发更加有底气。尽管我偶尔有空也会研究下android，swift（Objective-C实在是难懂，没兴趣深入研究），也希望H5能开发一些不错的APP； 
国内有包括APPCan等公司慢慢在发力，是很不错的趋势；由于mac上面无法使用APPCAN，所以我就没继续研究了，就看国外是怎么的一个过程；偶尔的机会发现了有人用ionic+angularjs+phonegap，很不错的尝试；于是我也想摸索下；

结论：使用上述的方法开发app，是可行的，至少我再android+IOS上面打包是成功了，体验还可以，开发比较方便，基于一些现成的组件；能在1~2天开发一个简单的demo；效率比较高，不过你需要对angularjs有一定的熟悉和了解；H5也一样；所以我也是慢慢学习慢慢研究；

入门必须： 
(1) 看一遍ionic的文档， http://ionicframework.com/ ； 
Ionic 是一个用HTML, CSS 跟JS 开发的一个用于移动设备的web app 开发框架,采用 Sass与AngularJS 开发。

(2) 看一遍phonegap的文档；目前phonegap又取名为cordova；有些常用的命令总结如下：

项目例子：http://my.oschina.net/nosand/blog/294011 
ionic： 
Create hybrid mobile apps with the web technologies you love. 
Free and open source, Ionic offers a library of mobile-optimized HTML, 
CSS and JS components, gestures, and tools for building highly interactive apps. 
Built with Sass and optimized for AngularJS.

Qunee有一个上海地铁图的例子，有客户希望转成mobile app，考察过android的webview，以及PhoneGap等多种Hybrid App方案后，最后选择使用ionic，准确的说是ionic + PhoneGap + Qunee ionic是一种基于HTML5创建Hybrid应用的前端框架，借助phoneGap + angularJS实现一套跨平台，轻量的移动UI方案，本文将介绍借助ionic实现移动版Qunee上海地图的示例 
背景知识

安装ionic所需软件环境 – java, android sdk等

ionic实际上是集大成者，借助了多种技术，自身是一套UI框架，结合PhoneGap实现跨平台移动APP，需要先安装好依赖的程序，比如nodejs, java, ADT, ant, xcode等，并设置好java_home, 添加android sdk tool到环境变量

mac os x下安装ant

brew update 
brew install ant 
#mac osx 下，打开.bash_profile文件 
cd ~ 
open .bash_profile 
#设置相关的Path，mac os x下增加类似下面的内容 
export JAVA_HOME= /usr/libexec/java_home -v 1.8

# android 
export PATH=${PATH}:/Users/macbook/WorkSpace/android-sdk-macosx/platform-tools:/Users/macbook/WorkSpace/android-sdk-macosx/tools

安装ionic和cordova

需要首先安装好nodejs，然后通过npm来安装

npm install -g cordova ionic 
更多请参考官方文档+google http://ionicframework.com/getting-started/ 
创建ionic项目q-metro

使用下面的命令创建一个新的项目 
ionic start q-metro 
初始目录结构如下

<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">    <title></title>    <link href="http://www.webdoes.com/archives/lib/ionic/css/ionic.css" rel="stylesheet">    <link href="http://www.webdoes.com/archives/css/style.css" rel="stylesheet">    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above    <link href="http://www.webdoes.com/archives/css/ionic.app.css" rel="stylesheet">    -->    <!-- ionic/angularjs js -->    <script src="http://www.webdoes.com/archives/lib/ionic/js/ionic.bundle.js"></script>    <!-- cordova script (this will be a 404 during development) -->    <script src="http://www.webdoes.com/archives/cordova.js"></script>    <!-- your app's js -->    <script src="http://www.webdoes.com/archives/js/app.js"></script>  </head>  <body ng-app="app" ng-controller="Metro" animation="slide-left-right-ios7">    <ion-header-bar class="bar-dark">      <h1 class="title">{{title}}</h1>    </ion-header-bar>    <ion-content scroll="false">      <div id="canvas" style="width: 100%; height: 100%;"></div>    </ion-content>  </body>  <script src="http://www.webdoes.com/archives/lib/qunee/qunee-min.js"></script></html>

index.html结构

首先看index.html，是主页面，里面引入了angularjs， cordova等js支持，此外还有app.js, controllers.js, services.js三个文件，这三个文件构建了app的应用逻辑，app是主程序，包含一些设置和启动脚本，services是数据支持部分，也就是model部分，用于提供数据的增删改查操作，controllers用于控制，包含业务逻辑控制代码

先在桌面环境下测试，Chrome运行正常，然后编译成各种移动平台版本，这里以android版本为例 
ionic start q-metro 
cd q-metro 
ionic platform add android 
ionic build android 
ionic run android 
如果要在虚拟机中测试，可以改用 
ionic emulate android 
ionic支持多种移动平台，如果希望创建ios可以将”android”改成”ios” 下面是android设备上真机运行界面如下：

给大家看看一个简单的demo的效果：

PhoneGap的发展虽然放缓了，但其他产品技术却成熟了。2014年的iWeb大会上，众多厂商的产品提供了面向开发者免费或开源的HTML5性工能障碍的解决方案。

(注：编者作为从业人员，也会在分析各种方案时提到我们公司的方案，但编者会客观不夸张的陈述方案，而且该方案是纯免费的，没有商业销售嫌疑。)

DCloud公司在iWeb大会上发布了系统的HTML5“性工能缺失”的解决方案，包括：

a) 性能：提升HTML5性能的手机端引擎，让侧滑菜单、下拉刷新等动态交互卡顿的问题得以解决;

b) 工具：HTML5开发IDE产品HBuilder, 超快的编程利器;

c) 能力：把40万原生API封装成JavaScript对象，以解决HTML5能力不足问题的Native.js技术;

d) 最接近原生体验的高性能框架：MUI框架，体积只有几十K，加载、运行远快于一般框架。

基于该方案开发的HTML5应用完全可以达到原生App的功能和体验。

使用HBuilder开发HTML5应用

英特尔公司发布了Crosswalk引擎，可以让Android 4.0-4.3的手机上的应用打包Chromium引擎而不是Android WebKit。毕竟目前市场上存在大量Android 4.0-4.3的手机，同时统一的webview也避免了兼容性的烦恼。

在专业方向上很多公司也做出了不错的成绩。触控的Cocos2d-html5、Egret runtime和Ludei CocoonJS强化了Canvas的表现，让HTML5游戏体验更好;UC、猎豹等手机浏览器都强化了音视频播放的表现。

不管是硬件升级、软件成熟，还是操作系统厂商策略变化，都在强力推动HTML5的爆发。

不过要注意，我说的HTML5爆发，不是指手机浏览器会替代桌面成为应用入口。有人说HTML5不好，因为用户讨厌打开浏览器输入URL的过程。我想说这种想法是对HTML5的片面理解。HTML5!=传统浏览器，虽然编程语言还是HTML、Javascript、CSS，但发行方式绝不是传统网站那么简单。HTML5应用的入口，反而很少是启动浏览器输入URL，它可以是存在于手机桌面的图标、也可以来自超级App(如微信朋友圈)、以及搜索引擎、应用市场、广告联盟。。。到处都是它的入口。它的入口，比原生App更多。

五、 原生App的颠覆

HTML5的“性工能”障碍得到解决，可以接近原生App的效果，所以它就可以替代原生App吗?很多人认为，即使HTML5会发展的比现在好，也将是与原生App各占一部分市场的格局，要求不高的长尾应用会使用HTML5，而主流应用仍是原生App的天下。

但我认为这样的想法很危险，就像Apple成立前，HP的高层告诉沃兹：谁会在家里摆一台电脑呢?未来HTML5肯定会颠覆原生App。“性工能”障碍的消除，只是HTML5的劣势被削弱，但劣势被消除后，它的优势就会大放异彩，HTML5的优势是什么?我们分别就开发者和最终用户来看。

■HTML5对开发者的7大优势

● 跨平台：

在多屏年代，开发者的痛苦指数非常高，人人都期盼HTML5能扮演救星。多套代码、不同技术工种、业务逻辑同步，这是折磨人的过程。有点类似个人电脑早期世界，那个时候的每家电脑都有自己的操作系统和编程语言，开发者疲于做不同版本，其实DOS的盛行也很大程度是因为开发者实在没精力给其他电脑写程序。跨平台技术在早期大多因为性能问题夭折，但中后期硬件能力增强后又会占据主流，因为跨平台确实是刚需。

●快速迭代：

移动互联网是一个快鱼吃慢鱼的时代，谁对用户的需求满足的更快，谁的试错成本更低，谁就拥有巨大的优势。互联网产品大多免费、且有网络效应，后入者抢夺用户的难度非常大。使用原生开发，从招聘、开发、上线各个环节的效率都慢一倍以上，而且参与的人越多，沟通效率往往拖慢不止一倍。

●持续交付：

很多人有这样的体会，一个原生应用上线Appstore，突然有一个大bug，只好连夜加班修复，然后静静等待2周或更长时间的Apple审核，这2个星期被用户的涂抹淹死，市场上一片差评，用户大量流失。等新应用被审核上线了，用户已经卸载了。但是，HTML5没有这些问题，你可以实时更新，有问题立即响应。

●大幅下降成本：

创业者融资并不容易，如何花钱更高效非常重要。如果你使用原生开发的App和竞争对手使用HTML5开发的App没什么区别，但你的开发成本高出一倍，我相信没有投资人会喜欢给你投钱。

●开源生态系统发达：

HTML5前端是开放的正反馈循环生态系统，大量的开源库可以使用，开发应用变得更轻松、更敏捷，当然这也体现在了快速迭代和成本下降上。不过更重要的是，这种开放的正反馈循环生态系统未来的生命力是比原生生态系统更强劲的。

●开放的数据交换：

HTML是以page为单元开放代码的，它无需专门开发SDK，只要不混淆，就能与其他应用交互数据。开发者可以让手机搜索引擎很容易检索到自己的数据， 也更容易通过跨应用协作来满足最终用户需求。

●更容易推广、更容易爆发：

导流入口多：HTML5应用导流非常容易，超级App(如微信朋友圈)、搜索引擎、应用市场、浏览器，到处都是HTML5的流量入口。而原生App的流量入口只有应用市场。聪明的HTML5开发者当然会玩转各种流量入口从而取得更强的优势。

流量大：前段时间微信朋友圈风靡一时《神经猫》，这个游戏如果放到Appstore，绝对没有那么多流量，超级App带来的流量，远大于原生应用市场。假如微信允许游戏在桌面创建快捷方式、假如游戏后续升级解决持续娱乐问题，未来不可想象。

导流效率高：除了入口多、流量大，导流效率高也不可忽视，谁都知道：页游和端游打同样的广告，广告变用户的转化率，页游远远高于端游。

可精准导流到二级页：我们都知道搜索引擎可以直接进入到

■HTML5对最终用户的3大优势

●大幅降低使用门槛

为什么流媒体会替代下载视频成为主流?为什么页游会如此火爆?只因用户太“懒”。让用户更方便的满足需求，有时效果好于更多的满足需求。

用户眼睛看到一个兴趣点，点击后，就应该立即开始满足用户需求。比如流媒体可以立即看，页游可以立即玩。而目前的原生应用市场，用户需要这样操作：选一个应用、等待下载、确认权限、等待安装，然后点击打开。这样糟糕的体验迟早要被颠覆。

不管是App、游戏还是音视频，未来都将即点即用。谁先满足用户这个需求，谁就制胜。

●实时更新、差量更新的优秀体验

HTML5应用可以绕开应用市场的限制进行自主实时更新，用户可以快速享受新服务。

而且这种更新完全可以是差量更新，比如某个HTML页面或某个js文件有问题，只更新这个几k的小文件就可以了，这比原生应用的更新体验好太多。

●跨应用的使用体验

目前手机应用切换是以桌面或任务管理器为中心的，但事实上这些中心很影响效率和体验。用户想出差三亚，先打开去哪App订票，然后切回桌面，再找到并打开天气App，搜索输入三亚，再切到桌面，找到并打开航旅纵横App，输入航班号值机，哦对了，航班号多少来着，再切到桌面，找到并打开去哪App看航班号，最后找到并打开租车App，输入租车地点，然后再切回桌面。。。

在原生应用体系下，用户只能这样。但在HTML5体系下，他不需要切回桌面，他可以在App间方便的直接跳来跳去，而不是使用一个一个孤岛App;他更不用重复录入数据，应用间可以方便的互相传递数据。

这种模式需要一点想象力，但未来迟早会来。

分析至此，我们可以明显的看出，不管是站在最终用户角度、还是站在开发者角度，HTML5必将取代原生应用当前的位置。并由此引发一系列颠覆。

六、 还有什么会被改变?

HTML5的爆发，原生App生态系统的颠覆，是一场产业革命，很多角色都会受到影响，我们来预测一番。

■新型HTML5引擎战火将烧起

标准的HTML5引擎并不能解决HTML5的所有问题，拥有大流量入口的互联网巨头，莫不在思考内嵌更优秀的增强引擎。腾讯推出了X5浏览器引擎，就是看中这个机会。目前各路浏览器厂商、应用市场厂商、甚至rom厂商，都在努力整合更优质的浏览器引擎。假使微信内嵌的Webview可以运行更优秀的canvas游戏、假使360手机助手可以发行即点即用的HTML5应用并且能力体验与原生一致、假使小米rom内置更强大的webview使得所有HTML5应用在小米手机上运行的更流畅。。。

一个巨头开始行动，所有巨头都会闻风而动，没错，这场战役会是移动互联网世界的二次世界大战。

■应用发行市场将洗牌

由于超级App的巨大流量能轻易成为HTML5应用的入口，并且会形成大者更大的效应，传统的应用商店、甚至线下预装，这些流量不足和效率偏低的发行模式将被挤出市场主流。本身也是超级App的大流量应用商店，如果转型得当，也将以发行HTML5应用为主。

■广告和统计市场

原生的广告和统计SDK提供商会面临尬尴，Google、百度等基于网页的广告和统计服务会取得更大的优势。开发者不再需要打包SDK，引入一个Script即可。

■开源技术将在移动互联网领域更加流行

HTML的开放性造就了大量的开源产品，也反向促进了HTML的繁荣。在Github上有大量的JS框架，而原生的开源代码数量相比甚少。而未来移动互联网世界将因为开源而发展的更迅速，这里也同样存在类Github厂商的机遇。

■开发工具的变化

早期HTML只需要记事本写几个Tag，中期的HTML、JS、CSS比较复杂，需要更高级的文本编辑器，但HTML5到来后，它的代码量、复杂度、开发模型将与原生开发看齐，需要类似XCode、Eclipse等专业的IDE工具来解决开发、调试的问题。一些以会使用记事本写代码为荣的开发者，将面临思路转换甚至被更高效的开发者淘汰。

■性能分析调优

目前很多针对原生应用的性能分析调优工具或服务，未来也面临转型，HTML5应用的性能分析调优是另一个世界。

■混淆与产权保护

HTML5是开放代码的，好处也带来弊端，有些东西开发者希望暴露，但有些东西开发者希望保护。混淆技术就变得更有商业机会。PC Web上Gmail的混淆就做的不错。除了JS混淆，离线数据加密相信也有不少空间。

■安全厂商的新机会

HTML5的强大会引发很多安全问题，并且解决思路与原生不一样，业内有可能会出现新的安全厂商领导者。

七、 结语

写到结尾，感觉话题有点大了。其实未来如何发展是没人能准确预测的，变量非常多。但我想让用户和开发者都更方便的趋势是不会错的。

我在这里抛砖引玉，欢迎大家一起讨论，但我希望我们能理智的分析，在争议中提炼真知，而不是未经思考或验证仅因为害怕被颠覆而无谓的乱喷。我的微博，weibo.com/wangan2000。

也祝愿大家在HTML5的浪潮中，把握住机遇，享受下坐在风口当猪的感觉:)