创建应用

本指南向您展示如何创建 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 文件。任何初始化都应在 www/js/index.js 中定义的deviceready 事件处理程序中指定。

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

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 上，您可以在插件搜索页面上搜索它们。一些关键的 API 由 Apache Cordova 开源项目提供，这些 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，例如，该 CSS 覆盖 www/css/index.css 中指定的 12 点默认字体大小

    body { font-size:14px; }
  

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

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

更新 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