1.1 Cordova概述

近几年移动智能设备快速普及,自从2007年Apple公司发布iPhone和Google公司推出Android后,移动终端的操作系统市场迅速被颠覆,iOS和Android平台已经占据了绝大部分的移动市场,此外还有Windows 10 Mobile、BlackBerry等小众系统存在。各平台开发技术都有所差别,如iOS使用Object-C语言或Swift语言开发,Android使用Java语言开发,Windows 10 Mobile则使用C#语言开发。这也意味着,要开发一个支持多平台的App,可能需要雇佣多个团队,成本较高,因此跨平台(Cross-Platform)移动开发技术应运而生。

在众多跨平台移动开发技术之中,Cordova(PhoneGap)是比较流行的一种,该框架可以让开发者使用HTML5+CSS+JavaScript这些常见的Web开发技术来开发支持多平台的移动App,开发者只需要掌握基本的Web开发知识,就可以开发出支持多平台的App,大大减轻了工作量和学习成本。

Cordova(PhoneGap)提供了一组与本地设备相关的API,使用JavaScript统一封装,开发者通过使用相应的JavaScript代码就可以调用平台的原生功能,如相机、GPS、加速计、联系人等等。Cordova(PhoneGap)出现后发展很快,大量开发者使用这种技术开发了数以千计的App并发布到各个商店。

需要注意的是,Cordova(PhoneGap)需要目标平台的SDK才能编译,如编译Android应用的话,必须安装Android SDK,编译iPhone应用的话必须安装iPhone SDK。Cordova(PhoneGap)本身并不包含这些特定平台的SDK,需要另外安装,才能针对不同的平台编译出不同的App。

了解更多信息请参阅以下网址:

1.1.1 Cordova与PhonGap的关系

PhoneGap经常与Cordova同时出现,很多人会问“PhoneGap和Cordova有什么区别呢?”

其实这两个框架本来是就是一家人。2011年Adobe公司收购了PhoneGap,并将其核心代码贡献给Apache软件基金会,改名为Apache Cordova并完全开源,但是Adobe公司保留了PhoneGap的商标所有权。也就是说,PhoneGap是Adobe公司的商业化产品,而Apache Cordova是一个开源项目,从技术路线上来说,可以理解为这是两个相同的技术。Apache Cordova是驱动PhoneGap的引擎,有点类似WebKit和Chrome的关系。因此在本书中这种框架简称Cordova。

目前Cordova支持的平台有:iOS,、Android、Windows Mobile 10、Ubuntu,、Blackberry 10,、Windows Phone 8等等。

支持平台 图1-1 Cordova支持的平台

1.1.2 Cordova API简介

Cordova提供了丰富的插件API来支持本地原生功能调用。用JavaScript代码调用本地原生功能看起来神秘,其实原理很简单。Cordova实质上是利用了移动设备内置的WebView组件提供的与设备本地API双向通信的能力,Cordova针对不同平台的WebView做了扩展和封装,从而使开发者能够通过JavaScript访问设备的各种原生功能。

这种技术使App开发变得更加方便,页面布局与普通的HTML+CSS网页类似,可以大大降低学习成本,普通的Web开发人员熟悉API后就可以调用原生功能了。各种API被封装成一个个的插件,调用哪个原生功能,就引入相应的插件即可。如果需要官方没有提供的功能,也可以开发自己的插件。

Cordova的架构如下图所示:

支持平台 图2-2 Cordova的架构图(来自Cordova官方网站)

目前Cordova最新版本为6.x,提供了以下API(具体信息请参考官方网站):

  • Accelerometer:提供访问设备加速计的功能,能够检测设备的运动状态,也就是俗称的重力感应。
    • tteryStatus:提供访问电池状态的功能,如检测电池电量低的* 等。
  • Camera:提供从系统图片库中选择图片的功能。
  • Capture:提供访问设备的音频、图像和视频捕获的功能。
  • Compass:提供访问设备罗盘的功能,罗盘是一个传感器,用于检测设备的方向。
  • Connection:能够访问设备的网络状态,检测蜂窝数据或WIFI连接情况,或设备是否连接到互联网。
  • Contacts:提供访问设备联系人的功能。
  • Device:提供设备的硬件和软件信息。
  • Events:监听设备的几种事件,如暂停、恢复、返回键、菜单键、音量键等。注意某些事件并不是所有的平台都支持。
  • File:用于操作文件的API,可以读取/写入设备上的文件。
  • File Transfer:提供上传、下载文件的功能。
  • Geolocation:访问设备的地理位置信息,如经纬度等。
  • Globalization:访问设备操作系统的区域、语言、时区等数据。
  • InAppBrowser:在App内显示其他链接、视频等其他网络资源,用户无需离开App。这个组件对Ionic2开发来说非常有用,可以用来处理OAuth登录等一些特殊情况。
  • Media:提供录音和回放音频文件的能力。
  • Notification:提供符合原生平台UI风格的对话框,如警告、确认、提示等。
  • Splashscreen:在App运行时显示启动页面。
  • Status Bar:提供定制iOS和Android等操作系统状态栏的功能。
  • Storage:有多种API可以用来存储文件,各有优势和劣势,需要根据应用场景选择合适的API。这些存储相关的API有LocalStorage、WebSQL、IndexedDB等。
  • Vibration:提供控制设备震动的功能。

可以看出,基本上原生App能做到的事情,Cordova都能做。但不可避免的是性能会有一定的损失。

1.1.3 Cordova的优势与不足

在众多移动开发技术之中,每种技术都有其优势和不足,需要针对不同的应用场景来选择合适的技术路线。

原生应用具有性能好、用户体验好的优点,针对不同的平台可以做出最适合平台特性的App,能够完整调用本地原生功能。但是如果想覆盖多种平台,则需要较大的开发成本。对一些复杂的应用开发需求来说,原生应用是最好的选择。

WebApp则最灵活,实用HTML5等Web开发技术,可以很容易的适配多种设备,而且开发、更新成本都比较低,无需安装,打开即用。但是调用本地功能的能力较弱,关闭页面后就相当于断开了与服务器的连接,无法及时收到消息推送。虽然HTML5提供了一些访问本地功能的API,但总体来说体验不如原生应用。

Cordova则是一个折中的方案。相比原生应用,Cordova具有开发成本低,上手快的优点,跨平台成本低;相比WebApp来说,能够调用本地原生功能,得到类似原生应用的体验。但Cordova也存在一定的不足,从性能上来说不如原生应用,从部署方式上不如WebApp。但Cordova类应用以较小的性能牺牲为代价,提供了较高的灵活性,能够有效提高开发效率,并同时兼顾多种平台。对于想入手移动开发的Web开发人员来说是较好的技术路线。

1.1.4 为什么还需要Ionic?

虽然Cordova提供了调用原生功能的API,但不提供任何UI组件或MV*框架。Cordova只提供了一个运行时,在UI层还需要开发者自行开发页面HTML、CSS等。不同的移动平台有不同的设计风格,如果分别针对不同平台设计HTML和CSS,开发者的工作量还是比较大。那么有没有一种方案可以简化开发者开发UI层的难度呢?答案当然是肯定的,就像Web开发中经常使用Bootstrap、JQuery UI等前端框架简化UI设计一样,在移动端当然也有众多针对移动浏览器优化的前端框架,如JQuery Mobile、Sencha Touch、Dojo Mobile等,Ionic就是其中的佼佼者。

Ionic是在Angular基础上构建的,而Angular是使用TypeScript开发的,所以我们有必要继续了解一下TypeScript和Angular。

results matching ""

    No results matching ""