Apache Cordova与混合应用开发

移动应用开发领域,Apache Cordova是一个强大的开源框架,它允许开发者使用HTML5、CSS3和JavaScript等核心技术来创建可在多个平台上运行的移动应用。本文将探讨Apache Cordova的历史、混合应用与原生应用的区别,并指导如何使用Apache Cordova创建跨平台的混合移动应用。

Apache Cordova的前身名为PhoneGap,最初由Nitobi公司发起的开源项目。随着该项目吸引了IBM、Salesforce等大公司的众多贡献者,Adobe公司收购了Nitobi,并将PhoneGap代码捐赠给了Apache软件基金会进行孵化。在Apache软件基金会的孵化下,PhoneGap被重新命名为Apache Cordova,成为当前开发者贡献代码和参与开发的核心开源项目。

什么是混合应用

混合应用通常结合了HTML5、CSS3和JavaScript等核心Web技术构建。它们被嵌入在原生应用中,利用移动平台的WebView(可以理解为一个无边框的浏览器窗口,配置为全屏显示)。混合应用将HTML5应用嵌入到一个轻薄的原生容器中,结合了原生应用和HTML5应用的最佳(和最差)元素。Apache Cordova帮助Web和移动开发者为多个平台构建世界级的混合移动应用。

什么是原生应用

原生应用是专为目标移动操作系统开发的智能手机应用。例如,iOS平台使用Objective-C或Swift,Android平台使用Java,Windows平台使用.NET。一些知名的原生应用包括Facebook和Angry Birds。

混合应用与原生应用的比较

根据以下标准特性,可以比较混合应用和原生应用。这个比较表将帮助Web/移动开发者快速决定是为他们的客户端选择原生应用还是混合应用。

Gartner对混合移动应用的看法

根据Gartner的预测,到2016年,超过50%的部署移动应用将是混合应用。到2017年,25%的企业将拥有企业应用商店,用于管理PC和移动设备上的企业授权应用。Gartner的2013年移动应用开发平台魔力象限显示,Adobe的PhoneGap API或Apache Cordova是该领域的市场领导者。

Apache Cordova是什么

Apache Cordova可以通过以下工作流程图来概念化。Apache Cordova应用使用与原生操作系统相同的WebView。以下是WebView类与相应平台的映射关系:

  • iOS平台:Objective-C UIWebView
  • Android平台:android.webkit.WebView
  • WP7平台:WebBrowser
  • WP8平台:WebBrowser控件(Internet Explorer 10)
  • BlackBerry平台:WebWorks框架

Apache Cordova的目录结构模板

Apache Cordova项目的基本目录结构如下:

+ HelloWorld +-- HelloWorld (包含Cordova项目的目录) | +-- ... (Cordova目录和文件) | +-- www (应用程序的目录。它是一个经典的Web目录。) +-- node_modules (Nodejs模块目录) +-- src (源代码目录) | +-- html (HTML文件) | +-- js (JavaScript程序) +-- Gruntfile.js (Grunt的构建文件) +-- packages.json (NodeJS安装所需文件)

如何创建第一个混合移动应用

以下是创建第一个混合移动应用的步骤,适用于Android和iOS平台。

  1. 创建混合应用
  2. $ cordova create myApp com.test.app.myApp HelloWorld
  3. 添加所需平台(Android/iOS/Windows等)
  4. $ cd myApp $ cordova platform add ios (添加iOS平台) $ cordova platform add android (添加Android平台)
  5. 编译和构建混合应用
  6. $ cordova build (默认选项,将构建所有可用平台) $ cordova build ios/android (选择特定平台构建) $ cordova prepare ios/android (选择特定平台准备) $ cordova compile ios/android (选择特定平台编译)
  7. 在模拟器或设备上测试或运行应用
  8. $ cordova emulate android (在Android默认模拟器上模拟) $ cordova emulate ios (在iOS默认模拟器上模拟) $ cordova run android (在默认连接的Android设备上运行) $ cordova run ios (在默认连接的iOS设备上运行)

Apache Cordova如何工作

Apache Cordova的工作流程如下:

  1. 在原生应用项目中包含Web代码:
  2. assets/www/js/, css/, images/, 等等。
  3. 原生代码通过设备的内部浏览器加载Web代码的URL:
  4. Extend a CordovaWebViewClient super.loadUrl("file:///android_asset/www/LoginPage.html");
  5. Apache Cordova通过JavaScript暴露原生设备API:
  6. navigator.device.capture.captureImage(captureSuccess(), captureError(), [options]);

开始混合移动应用开发

  • 集成开发环境(IDE)
  • Java IDE,如IntelliJ用于Android,或Jboss Developer Studio或Eclipse Mars
  • Xcode用于iOS
  • 移动平台SDK
  • Android SDK 23
  • iOS SDK
  • Apache Cordova:Cordova模块和插件可在以下网址找到
  • 移动设备
  • 推荐用于部署/测试
  • 模拟器是替代品,但不是100%真实的测试
沪ICP备2024098111号-1
上海秋旦网络科技中心:上海市奉贤区金大公路8218号1幢 联系电话:17898875485