创建一个新的 PhoneGap 项目

2025年3月17日 | 阅读 3 分钟

在我们的计算机和移动设备上安装了 PhoneGap Desktop 应用程序 和 PhoneGap Developer 应用程序 之后，我们就可以开始创建我们的第一个 PhoneGap 项目了。我们的 PhoneGap 项目将能够在多个设备和操作系统上运行。以下是创建新 PhoneGap 项目的步骤。

1) 启动 PhoneGap Desktop 应用程序

第一步，我们只需点击计算机上的 PhoneGap Desktop 应用程序快捷方式，即可打开 PhoneGap Desktop 应用程序。点击快捷方式后，我们将看到如下视图

2) 点击加号 (+)

现在，我们将点击加号，它基本上是屏幕左上角的按钮。点击此按钮将打开两个选项，即 创建新的 PhoneGap 项目 和 打开现有的 PhoneGap 项目，位于该按钮的右侧。

3) 创建新的 PhoneGap 项目

在这两个选项中，我们将选择创建新的 PhoneGap 项目 来创建我们的第一个 PhoneGap 项目。点击此按钮将向我们显示一个新片段，显示我们项目的几个模板。

4) 选择 Hello World 模板。

我们将从 选择模板 屏幕中显示的模板中选择 Hello World 模板。选择 Hello World 后，我们将点击屏幕右下角的 下一步 按钮。点击此按钮将打开一个新屏幕，用于填写我们项目的详细信息。

5) 填写项目详细信息。

我们将选择项目将存储在计算机上的本地路径，提供项目的名称，并为我们的项目提供一个 ID。此 ID 字段是可选的。填写完所有项目详细信息后，我们将点击屏幕右下角的 创建项目 按钮。

点击 创建项目 按钮后，我们将看到如下视图。此视图包含我们的项目，该项目用左侧绿色边框标记。它还包含一个绿色的播放按钮和底部的绿色条。我们还将看到一个服务器地址，该地址指示其活动和运行状态。一次只有一个项目将运行并且是活动的。

预览我们的 App

我们将 PhoneGap Developer 应用程序 与 PhoneGap Desktop 应用程序 配对。通过这样做，我们可以在移动设备上预览我们的应用程序，而无需注册设备、编译代码或安装平台 SDK。

为了托管我们的项目并返回一个服务器地址，PhoneGap Desktop 启动了一个小型 Web 服务器。我们将进入在我们的桌面浏览器和移动设备上运行的应用程序。

在桌面浏览器中预览

我们可以利用我们的桌面浏览器来预览和测试我们的应用程序。为此，我们首先需要加速我们的初始开发过程。例如，如果我们使用 React 或 Angular 等框架，就有可用于专门调试浏览器中那些框架的工具，这在转移到设备之前可能会非常有帮助。最近，PhoneGap 开始自动支持浏览器平台，目标是帮助我们更轻松地在熟悉的开发环境中测试 Apache Cordova 核心插件和 device ready 事件。

在设备上预览

我们可以通过以下步骤在设备上预览 PhoneGap 应用程序

1) 启动 PhoneGap Developer 应用程序

在第一步中，我们将点击或轻触 PhoneGap Developer 应用程序 图标。点击此按钮将启动该应用程序，我们将看到如下视图

2) 输入服务器地址

我们将在主屏幕上输入服务器地址，然后点击连接。点击连接后，我们将看到一条成功消息，它将告诉我们连接已成功发生。我们必须确保我们的计算机和我们的设备应连接到同一网络。否则，我们可能会在连接建立过程中遇到任何类型的问题。我们将检查 PhoneGap Google Groups 和 问题跟踪器 列表以获取进一步的帮助。