65.9K
CodeProject 正在变化。 阅读更多。
Home

Apache Cordova： 混合移动应用开发的强大框架

Jitendra_Jain04
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.14/5 (8投票s)

2016年1月14日

CPOL

3分钟阅读

viewsIcon

29746

downloadIcon

239

本文的目的是使用一个最强大的开源框架：Apache Cordova，为移动平台提供混合移动应用程序开发方法。

目标

本文的目的是使用一个最强大的开源框架“Apache Cordova”，为移动平台提供混合移动应用程序开发方法。它将为我们提供一个现成的平台，用于在 Android、iOS、Windows、BlackBerry 等主要平台上创建和托管移动应用程序。

Apache Cordova – 历史

简史：PhoneGap 是由 Nitobi 公司启动的一个开源项目。一段时间后，Adobe 收购了 Nitobi，因为 PhoneGap 项目有来自 IBM、Salesforce 等顶级公司的许多主要贡献者，因此 Adobe 将 PhoneGap 的代码库捐赠给了 Apache 软件基金会 (ASF) 进行孵化。在 Apache 软件基金会 (ASF) 中，它被重新命名为 Apache Cordova。因此，目前 Apache Cordova 是进行开发和贡献的核心开源项目。Apache Cordova 现在是那些有兴趣为这个开源项目做出贡献的开发者的目的地。下图解释了它的历史。

Apache Cordova History

 

什么是混合应用？

混合移动应用程序通常使用 HTML5、CSS3 和 JavaScript 等核心 Web 技术构建。混合应用始终托管在利用移动平台 WebView 的原生应用内部（**WebView 可以被视为一个无边框的浏览器窗口，配置为全屏显示**。）。混合应用可以将 HTML5 应用嵌入到轻量级原生容器中，结合了原生应用和 HTML5 应用的最佳（和最差）元素。Apache Cordova 帮助 Web 和移动开发者为多个平台构建世界一流的混合移动应用程序。

顶级混合应用：Amazon Appstore、Twitter、Apple App store、Instagram、Gmail、Uber、Linked-In 等。

什么是原生应用？

原生应用是专为目标移动操作系统开发的智能手机应用程序。

  • 为 iOS 平台使用 Objective-C 或 Swift
  • 为 Android 平台使用 Java
  • 为 Windows 平台使用 .NET

顶级原生应用：Facebook、愤怒的小鸟等。

混合应用“或”原生应用？

我们可以根据以下标准功能比较混合应用和原生应用。此比较表将帮助 Web/移动开发者快速决定是为客户开发原生应用还是混合应用。

Gartner 对混合移动应用的看法

根据 Gartner, Inc. 的数据：

  • Gartner 表示，到 2016 年，超过 50% 的移动应用将被部署为混合应用。
  • 到 2017 年，25% 的企业将拥有企业应用商店来管理 PC 和移动设备上的公司批准的应用。

Gartner 的《2013 年魔力象限》

根据 Gartner《2013 年移动应用开发平台魔力象限》，Adobe 的 PhoneGap API 或 Apache Cordova 是该领域的市场领导者之一。

Gartner《2013 年移动应用开发平台魔力象限》如下图所示

来源

什么是 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       (The directory that contains the Cordova project)

|      |      +-- ...       (Cordova directories and files                    )

|      |      +-- www       (The directory of our application.                )

|      |                    (It's a classical web directory.                  )

|      +-- node_modules     (The Nodejs directory for modules                 )

|      +-- src              (The directory for our source code                )

|      |    +-- html        (HTML files                                       )

|      |    +-- js          (Javascript program                               )

|      +-- Gruntfile.js     (The build file for Grunt                         )

|      +-- packages.json    (The file that allow NodeJS to install all we need)

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

下面是为 Android 和 iOS 平台创建第一个混合移动应用程序的步骤。

Create the Hybrid App

    Go to the directory where you want to create your project, and run this command :
    $ cordova create myApp com.test.app.myApp HelloWorld

Add the required Platforms ( **Android/iOS/Windows etc.**)

    $ cd myApp
    $ cordova platform add ios ( to add ios platform)
    $ cordova platform add android ( to add android platform)

Compile and Build the hybrid App

     $ cordova build ( default option, it will build all available platforms)
     $ cordova build ios/android (choose any specific platform to build)
     $ cordova prepare ios/android (choose any specific platform to prepare 
     $ cordova compile ios/android (choose any specific platform to compile)

Test or Run the App on an Emulator or Device

    $ cordova emulate android (to emulate on android default emulator)
    $ cordova emulate ios (to emulate on ios default emulator)

    $ cordova run android (to run on default connected android device)
    $ cordova run ios (to run on ios default connected ios device)

Apache Cordova 如何工作？

Step#1 : Include web code in a native app project:

         - assets/www/js/, css/, images/, etc.

Step#2: Native code loads a URL to the web code through the device’s internal browser:

          - Extend a CordovaWebViewClient

          super.loadUrl( “file:///android_asset/www/LoginPage.html” );

Step#3: Apache Cordova exposes native device APIs through JavaScript:

         - navigator.device.capture.captureImage( captureSuccess(), captureError(), [options] );

开始使用混合移动应用开发

我们需要以下工具才能使用 Apache Cordova 为移动平台开始混合应用开发。

集成开发环境 (IDE)

  • 适用于 Android 的 IntelliJ 等 Java IDE 或 Jboss Developer Studio 或 Eclipse Mars
  • 适用于 iOS 的 Xcode

移动平台 SDK

  • Android SDK 23
  • iOS SDK

Apache Cordova：Cordova 模块和插件可在以下网址找到：https://cordova.net.cn/plugins/

移动设备

  • 推荐用于部署/测试
  • 模拟器是替代方案，但并非 100% 真实的测试

入门指南

指南可在以下网址找到： https://cordova.net.cn/docs/en/5.4.0/index.html

参考文献

© . All rights reserved.