使用Apache Cordova创建手机应用 | Creating Mobile Applications with Apache Cordova

Apache Cordova是一个将网页应用转换为跨平台手机应用的工具。Cordova主要用于为Android和iOS平台创建应用程序，但也可以开发Windows、macOS和Linux应用程序。该工具完全免费，易于使用，并允许通过拼图或JavaScript进行高级定制（如果需要）。

要查看Cordova的实际效果，请从 App Store 下载Farmer's Journey游戏。

• Preliminary Considerations
• Getting Started with Apache Cordova
• Creating Application Template
• Creating Android App
• Creating iOS App
• Beautifying Things
  • Modifying App Icon
  • Cordova-Specific Events
  • Creating Native UI Dialogs
  • More Features
• Publishing your App

#

Preliminary Considerations

在开始使用Cordova之前，请确保具备以下条件：

• 硬件。您可以在任何运行Windows、macOS或Linux的电脑上开发Android应用程序，而为苹果设备开发应用则需要一台像样的Mac系统。
• 基本的Windows/macOS/Linux控制台（命令提示符）使用技能。如果您不会，请在互联网上搜索相关的新手教程。
• 时间。通过遵循本指南，您可以非常快速地构建您的第一个应用。但要获得开发者帐户的批准，可能需要数小时甚至几天，在这之后，您才能在App Store / Google Play中发布应用。
• 资金。在自己的设备上创建和运行应用是完全免费的。但要在Google Play上发布，需要支付25美元（一次性付费），而在App Store，则需要每年支付99美元。

好的一点是，您不需要成为Android或iOS开发者，就可以为这些平台创建应用。一旦您的开发系统启动并运行，创建Verge3D应用的移动版本将是非常容易的！

另一种在各种移动和桌面平台上分发应用的方法是使用可安装的 渐进式Web应用。

#

Getting Started with Apache Cordova

要使用Cordova，您需要 npm 实用程序，它是 Node.js 运行时的一部分。您可以参照 这些说明 安装。

对于Linux，推荐您通过软件包管理器获取npm。参见 这里 了解详情。

安装npm后，可使用以下命令来安装Cordova二进制文件。

在macOS/Linux上：

在Windows上：

#

Creating Application Template

您可以手动或使用Cordova命令行工具创建您的移动应用。为简化操作，我们在应用管理器中集成了Cordova模板构建器。

通过它您可以从Verge3D应用中直接创建一个Cordova应用模板。

模板准备就绪后，请下载并将zip文件解压到某个目录中。

#

Creating Android App

转到Cordova应用模板所在目录，然后添加Android平台：

现在到了最难的部分。为了能够在Android模拟器或真实设备中构建和测试应用，您需要安装和配置额外的软件。

首先，您需要安装Android Studio，从 这里 下载。

安装Android Studio后，您需要在 ANDROID_HOME 环境变量中指定路径。在Windows上，您还需要用Java目录的路径设置 JAVA_HOME 变量。

查看 这里 了解如何设置这些变量。

您需要的最后一件事是 Gradle 构建工具。请查阅 这里 的指引。

要检查您是否满足构建要求，请在应用目录中执行以下命令：

如果某些依赖缺失，此命令会告知您，例如：

这里说您需要安装（或升级）Android SDK平台，在Android Studio中操作：

如果一切就绪，输出将如下所示：

要构建应用，请执行：

要在Android模拟器中运行应用，请确保您已在Android Studio的 Device Manager 中添加了虚拟设备（它应与之前安装的SDK平台版本匹配）：

然后执行以下命令：

要在连接到系统的真实手机上运行应用（例如通过USB线），请运行：

#

Creating iOS App

转到Cordova应用模板所在目录，然后添加iOS平台：

现在到了最难的部分。为了能够在iOS模拟器或真实设备中构建和测试应用，您需要安装和配置额外的软件。

首先，您需要安装 Xcode，请从Mac App Store下载安装。

然后安装 Homebrew 软件包管理器：

之后您需要 ios-deploy 工具。

然后您将需要 CocoaPods 依赖项管理器：

要检查您是否满足构建要求，请在应用目录中执行以下命令：

是时候运行您的应用了，请执行：

在iOS模拟器中构建并运行。

要在连接到系统的真实手机上运行应用，请执行：

要在真实设备上运行，您的应用必须通过Xcode签名。请查阅 这里 的说明。

#

Beautifying Things

#

Modifying App Icon

为了能够为您的手机应用生成合适的图标，首先在 应用设置 中指定512x512的图片：

每次创建Cordova模板时，此图片将作为源来创建Android/iOS所需的一组图标。实际的调整大小由ImageMagick工具执行。

对于Verge3D的Windows安装，ImageMagick已包含在发行版中，因此转换将自动进行。

对于macOS，请使用Homebrew安装ImageMagick：

对于Ubuntu Linux，请使用APT软件包管理器：

#

Cordova-Specific Events

有3个Cordova特定的事件可以通过JavaScript或拼图使用，您可以用它们使应用更适合移动端：

• deviceready — 在应用完全初始化时触发。您也可以用它来检测应用何时在Cordova上运行。
• pause — 当应用进入后台或被另一个应用切换时触发。可以使用它来暂停应用渲染/声音播放/视频等。
• resume — 当应用被激活时触发。此事件与 pause 相反。

确保您在 document 元素上注册了这些事件。此外，如果您的应用运行在iframe中，请使用 in parent doc 选项（请在 这里 阅读有关此设置的更多信息）。

#

Creating Native UI Dialogs

使用 cordova-plugin-dialogs 插件。

#

More Features

您可以创建功能齐全的应用，包括访问相机、电池信息、设备文件系统、地理位置等。请参阅 Cordova文档 中的相应插件。

#

Publishing your App

请查阅 这里 的指引。

Got Questions?

欢迎在 论坛 上提问！您还可以加入中文用户社区QQ群(171678760)，在线寻求帮助。