Tutorialspoint Cordova 教程

来源：易百教程

Cordova教程™

Cordova一种使用HTML，CSS和JavaScript混合创建移动应用的平台。Cordova提供了一组设备相关的API，通过这组API，移动应用能够以JavaScript访问原生的设备功能，如摄像头、麦克风等。Cordova还提供了一组统一的JavaScript类库，以及为这些类库所用的设备相关的原生后台代码。官方给我们定义Cordova如下：

"Apache Cordova是一个开源移动开发框架。它可以让你使用标准的Web技术，比如HTML5，CSS3和JavaScript跨平台开发，避免每个移动平台的原生开发语言。应用程序执行针对每个平台封装在包内，并依靠符合标准的API绑定来访问每个设备的传感器，数据和网络状态。"

Cordova特点

• 命令行界面 (Cordova CLI)

这是一个可用于启动工程，构建对不同的平台上的处理，安装插件和很多其他有用的东西，是一种使得开发过程更容易的工具。我们将在接下来的章节中学习如何使用。

• Cordova核心组件

Cordova为每一个移动应用程序提供所需的核心组件集。这些组件将被用于创建应用程序的基础，所以我们要花费更多的时间来实现我们自己的逻辑。

• Cordova插件

Cordova提供一些API将用于实现原生移动函数在我们JavaScript程序。

• 许可证

Cordova 是在Apache许可证2.0版本授权。 Apache和Apache的羽毛标识是Apache软件基金会的注册商标。

Cordova优势

• Cordova提供了一个平台用于构建混合移动应用，使我们能够开发一个应用，这将使用在不同的移动平台上，如IOS，Android，Windows手机，Amazon-fireos，黑莓，火狐OS，Ubuntu和tizen。
• 这将快速地开发不同于原始应用程序，Cordova可以节省大量的开发时间
• 我们用Cordova时使用的是JavaScript，所以我们并不需要学习平台特定的编程语言。
• 有社区的大量补充，可以使用Cordova大量组件。对象和类库的许多工作都进行了优化。

Cordova劣势

• 混合型应用程序是不同于原始程序，混合型应用程序要慢些，对于Cordova，如果需要大量的数据和功能的大型应用，它不是最佳的选择。
• 跨浏览器的兼容性可以解决很多的问题。大多数的我们构建针对不同平台的应用，因此我们需要大量的设备和操作系统的测试，优化也要使用很多的时间。
• 还有一些插件在不同的设备和平台有兼容性问题。还有一些尚未被Cordova支持一些原生API。

Cordova环境安装设置 - Cordova教程™

我们在使用Cordova之前，需要先设置一些东西以及安装一些组件。

安装Cordova

在我们开始之前，需要知道，在教程我们将使用 Windows 命令提示符。

步骤 1 - 安装git

即使你不使用git，Cordova安装也要使用它的一些后台进程。下载git 点击这里。安装 git 后，打开环境变量，操作如下：

• 右键单击我的电脑
• 属性
• 高级系统设置
• 环境变量
• 系统变量
• 编辑

在复制变量值字段放到末尾如下。这是 git 的安装的默认路径。如果安装在其它路径上，你应该使用你的安装路径，而不是我们下面的示例代码。

;C:\Program Files (x86)\Git\bin;C:\Program Files (x86)\Git\cmd

现在，在命令提示符处输入 git 来测试是否安装成功。

步骤2 - 安装Cordova

这一步将下载并安装Cordova全局模块。打开命令提示符，运行以下命令 −

D:\worksp>cordova>npm install -g cordova 

通过运行以下命令检查安装的版本 −

D:\worksp>cordova>cordova -v 

这里我们是在Windows操作系统上开发Cordova 应用程序。在我们的下一个教程中，将向你展示如何创建第一个应用程序。

Cordova第一个应用 - Cordova教程™

在上一个教程中，我们学习了如何安装Cordova 并设置了环境。在这一个节中我们创建第一个混合Cordova应用程序。

第1步 - 创建App

在命令提示符下打开要安装应用程序的目录。我们将在桌面上创建它。

D:\worksp\cordova>cordova create CordovaProject io.cordova.hellocordova CordovaApp

• CordovaProject 是创建应用程序的目录名。
• io.cordova.hellocordova 是默认的反向域名值(类似Java包的命名)。如果可能使用自己的域名的值。
• CordovaApp 是应用程序的标题。

第2步 - 添加平台

你需要在命令提示符下，打开您的项目目录。在我们的例子是CordovaProject。您应该只选择您需要的平台。为了能够使用指定的平台，你需要安装特定的平台SDK。由于我们使用的是Windows开发，我们可以使用下面的平台。我们还安装了Android SDK中，所以我们将只针对安装Android平台来讲解本教程。

D:\worksp\cordova\CordovaProject
> cordova platform add android

有时候也可以在Windows操作系统中使用其他平台。

D:\worksp\cordova\CordovaProject
\CordovaProject>cordova platform add wp8

D:\worksp\cordova\CordovaProject
\CordovaProject>cordova platform add amazon-fireos

D:\worksp\cordova\CordovaProject
\CordovaProject>cordova platform add windows

D:\worksp\cordova\CordovaProject
\CordovaProject>cordova platform add blackberry10

D:\worksp\cordova\CordovaProject
\CordovaProject>cordova platform add firefoxos 

如果您在Mac上开发，可以使用 −

$ cordova platform add IOS

$ cordova platform add amazon-fireos

$ cordova platform add android

$ cordova platform add blackberry10

$ cordova platform add firefoxos 

您也可以从项目中删除使用的平台 −

D:\worksp\cordova\CordovaProject>cordova platform rm android

第3步 - 构建和运行

在这一步中，我们正在为应用程序指定平台，所以我们可以在移动设备或模拟器中运行它。

D:\worksp\cordova\CordovaProject> cordova build android

执行上面的命令后，它会自动下载相关依赖包，需要等一段时间(根据你的网络带宽决定时间)。注：每次修改HMTL代码最好重新构建过代码。

现在我们可以运行应用程序。如果使用的是默认的模拟器，应该使用 -

D:\worksp\cordova\CordovaProject> cordova emulate android

如上提示，需要更新模拟器到最新的 android-23 版本，在 Android Studio 中配置并更新对应的 SDK 版本后再次执行，它将启动模拟器(比较慢，需要点耐心)。如下图：

当仿真器启动后，可使用仿真器或真实设备应调试使用 -

D:\worksp\cordova\CordovaProject> cordova run android 

注 - 可以考虑使用 genymotion Android 模拟器，因为它比默认的速度更快，反应更迅速。可以从这里下载。也可以通过启用选项从USB调试，并通过USB连接线将其连接到您的电脑使用真实的设备进行测试。 对于某些特定设备还需要安装USB驱动程序。

打开 Android Studio 导入上面创建成功的工程，运行这个工程，得到结果如下：

当我们运行应用程序，将在我们指定平台上安装它。如果一切都没有错误并执行完成后，输出显示的默认启动应用程序的屏幕如下所示。

可能出错信息：

D:\worksp\cordova\CordovaProject>cordova build android
ERROR building one of the platforms: Failed to find 'ANDROID_HOME' environment v
ariable. Try setting setting it manually.
Failed to find 'android' command in your 'PATH'. Try update your 'PATH' to inclu
de path to valid SDK directory.
You may not have the required environment or OS to build this project
Error: Failed to find 'ANDROID_HOME' environment variable. Try setting setting i
t manually.
Failed to find 'android' command in your 'PATH'. Try update your 'PATH' to inclu
de path to valid SDK directory.

解决参考：配置环境变量

ANDROID_HOME=E:\Program Files\adt-bundle-windows-x86_64-
20131030
\sdk
PATH=
%PATH
%;
%ANDROID_HOME
%\
tools;
%ANDROID_HOME
%\
platform-tools

附上cordova常用命令列表

在我们接下来的教程中，我们将告诉你如何配置Cordova应用。