使用Apache Cordova创建手机应用

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

• 初步考虑
• Apache Cordova入门
• 创建应用模板
• 创建Android应用
• 创建iOS应用
• 美化
  • 修改应用名称和图标
  • Cordova专属事件
  • 创建原生UI对话框
  • 更多功能
• 发布您的应用

#

初步考虑

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

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

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

#

Apache Cordova入门

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

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

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

在macOS/Linux上：

在Windows上：

#

创建应用模板

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

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

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

#

创建Android应用

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

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

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

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

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

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

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

要建立您的应用，请执行：

要在Android模拟器中运行应用，请执行：

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

#

创建iOS应用

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

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

首先，您需要安装 Xcode ，请从Mac应用商店下载安装。

接下来，请安装 HomeBrew 软件包管理器：

之后，您需要 ios-deploy 工具。

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

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

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

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

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

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

#

美化

#

修改应用名称和图标

请参阅 Cordova官方指南 了解如何为应用指定自定义图标。

#

Cordova专属事件

有3个针对 Cordova的事件可以通过JavaScript或拼图来实现，您可以用它来使应用更适合移动端。

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

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

#

创建原生UI对话框

使用 cordova-plugin-dialogs 插件。

#

更多功能

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

#

发布您的应用

请查阅 这里 的指引。

遇到问题？

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