创建应用程序

本指南介绍如何创建 JS/HTML Cordova 应用程序，并使用 cordova 命令行界面 (CLI) 将其部署到各种原生移动平台。有关 Cordova 命令行的详细参考，请查看 CLI 参考

创建 Cordova 项目空间

在终端中，转到您要创建 Cordova 项目的目录。

请注意，下一个命令将创建一个新的项目目录，您的源代码、资源文件、配置和构建工件将驻留在该目录中。

cordova create hello com.example.hello HelloWorld

上面的命令将创建一个名为“hello”的项目目录，其中包含 Cordova 应用程序所需的目录结构。

默认情况下，cordova create 脚本会生成一个简单的基于 Web 的应用程序，其中应用程序的登录页面是项目的 www/index.html 文件。

另请参阅

• Cordova create 命令参考文档
• Cordova 项目目录结构
• Cordova 项目模板

添加平台

所有后续命令都需要在项目的目录或任何子目录中运行

cd hello

添加您要将应用程序定位到的平台。我们将添加“ios”和“android”平台，并确保它们被保存到 config.xml 和 package.json 中

cordova platform add ios
cordova platform add android

要检查您当前的平台集

cordova platform ls

运行添加或删除平台的命令会影响项目 platforms 目录的内容，其中每个指定的平台都作为子目录出现。

注意：使用 CLI 构建应用程序时，不要编辑 /platforms/ 目录中的任何文件。该目录中的文件在准备应用程序进行构建或重新安装插件时会定期被覆盖。

另请参阅

• Cordova platform 命令参考文档

安装构建的先决条件

要构建和运行应用程序，您需要为要定位的每个平台安装 SDK。或者，如果您使用浏览器进行开发，您可以使用 browser 平台，该平台不需要任何平台 SDK。

要检查您是否满足构建平台的要求

$ cordova requirements
Requirements check results for android:
Java JDK: installed .
Android SDK: installed
Android target: installed android-19,android-21,android-22,android-23,Google Inc.:Google APIs:19,Google Inc.:Google APIs (x86 System Image):19,Google Inc.:Google APIs:23
Gradle: installed

Requirements check results for ios:
Apple macOS: not installed
Cordova tooling for iOS requires Apple macOS
Error: Some of requirements check failed

另请参阅

• Android 平台要求
• iOS 平台要求

构建应用程序

默认情况下，cordova create 脚本会生成一个简单的基于 Web 的应用程序，其起始页面是项目的 www/index.html 文件。任何初始化都应作为 deviceready 事件处理程序的一部分指定，该事件处理程序在 www/js/index.js 中定义。

运行以下命令以构建所有平台的项目

cordova build

您可以选择将每个构建的范围限制为特定平台 - 本例中为“ios”

cordova build ios

另请参阅

• Cordova build 命令参考文档

测试应用程序

移动平台的 SDK 通常捆绑了执行设备映像的模拟器，这样您就可以从主屏幕启动应用程序，并查看它如何与许多平台功能交互。运行以下命令以重新构建应用程序并在特定平台的模拟器中查看它

cordova emulate android

运行 cordova emulate 还会准备、重新构建并将最新的应用程序重新部署到模拟器。

或者，您可以将手机插入计算机并直接测试应用程序

cordova run android

在运行此命令之前，您需要按照每个平台不同的步骤设置设备以进行测试。

另请参阅

• 设置 Android 模拟器
• Cordova run 命令参考文档
• Cordova emulate 命令参考文档

添加插件

您可以修改默认生成的应用程序以利用标准 Web 技术，但要使应用程序访问设备级功能，您需要添加插件。

插件公开原生 SDK 功能的 Javascript API。插件通常托管在 npm 上，您可以在 插件搜索页面 上搜索它们。Apache Cordova 开源项目提供了一些关键的 API，这些 API 被称为 核心插件 API。

要将相机插件添加到 package.json 并保存它，我们将指定相机插件的 npm 包名称

$ cordova plugin add cordova-plugin-camera
Fetching plugin "cordova-plugin-camera@~2.1.0" via npm
Installing "cordova-plugin-camera" for android
Installing "cordova-plugin-camera" for ios

插件也可以使用目录或 git 仓库添加。

注意：CLI 会根据每个平台的需要添加插件代码。如果您想使用 概述 中讨论的较低级别 shell 工具或平台 SDK 进行开发，您需要运行 Plugman 实用程序以分别为每个平台添加插件。（有关更多信息，请参阅 使用 Plugman 管理插件。）

使用 plugin ls（或 plugin list，或 plugin 本身）查看当前安装的插件。每个插件都按其标识符显示

$ cordova plugin ls
cordova-plugin-camera 2.1.0 "Camera"

另请参阅

• Cordova plugin 命令参考文档
• Cordova 插件搜索页面
• 核心插件 API

使用合并自定义每个平台

虽然 Cordova 允许您轻松地将应用程序部署到许多不同的平台，但有时您需要添加自定义项。在这种情况下，您不希望修改顶级 platforms 目录中各个 www 目录中的源文件，因为它们会定期被顶级 www 目录的跨平台源替换。

相反，顶级 merges 目录提供了一个位置来指定要部署到特定平台的资产。merges 中的每个特定于平台的子目录都镜像了 www 源树的目录结构，允许您根据需要覆盖或添加文件。例如，以下是如何使用 merges 为 Android 设备提高默认字体大小

• 编辑 www/index.html 文件，添加指向附加 CSS 文件的链接，在本例中为 overrides.css

    <link rel="stylesheet" type="text/css" href="css/overrides.css" />
  

• 可选地创建一个空的 www/css/overrides.css 文件，该文件将适用于所有非 Android 构建，防止出现缺少文件错误。

• 在 merges/android 中创建一个 css 子目录，然后添加相应的 overrides.css 文件。指定 CSS 来覆盖 www/css/index.css 中指定的 12 点默认字体大小，例如

    body { font-size:14px; }
  

当您重新构建项目时，Android 版本将具有自定义字体大小，而其他版本保持不变。

您还可以使用 merges 添加原始 www 目录中不存在的文件。例如，应用程序可以将后退按钮图形合并到 iOS 界面中，存储在 merges/ios/img/back_button.png 中，而 Android 版本可以改为从相应的硬件按钮捕获 backbutton 事件。

更新 Cordova 和您的项目

安装 cordova 实用程序后，您可以始终通过运行以下命令将其更新到最新版本

npm update -g cordova

使用此语法安装特定版本

npm install -g [email protected]

运行 cordova -v 查看当前运行的版本。要查找最新的发布的 cordova 版本，您可以运行

npm info cordova version

要更新您要定位的平台

cordova platform update android --save
cordova platform update ios --save