使用PhoneGap CLI开发应用程序

注意

Adobe建议对需要基于单页应用程序框架的客户端渲染(例如,React)的项目使用SPA编辑器。 了解更多

在任何给定时间,作为开发人员,您都可以在设备或模拟器中运行应用程序,前提是您已配置开发环境。

要运行以下示例,您需要一个运行带Xcode的OSx(Mac)的系统,或安装Android SDK的Mac/Win/Linux系统。

Bootstrap开发环境

设置PhoneGap CLI

对于iOS:要为iPhone和iPad进行开发,您需要Apple的Xcode IDE。

对于Android:要为iPhone和iPad进行开发,您需要Google的Android Stuido IDE。

下载源

成功预装开发环境后,请从AEM App Build Tile下载源:

  • 单击PhoneGap Build拼贴下拉V形标记。

chlimage_1-45

  • 单击“下载源”。
  • 从“下载源”模式中选择所需的源。

chlimage_1-46

注意

开发源包含应用程序的最新状态,同时包含未暂存的更改。 使用暂存源构建要提交到应用商店供应商的发行版候选。

如果您从未暂存应用程序,选择暂存将触发暂存工作流(提示:这将在AppStore和Google PlayStore中提供的PhoneGap Enterprise Viewer应用程序中显示为分阶段应用程序)。

  • 单击“下载”并将ZIP保存到计算机。
  • 将下载的zip文件解压到您的工作区。

构建并加载应用程序(从源)

PhoneGap CLI可以通过单个命令创建平台项目、编译源和部署应用程序。

注意

您可以单独执行所有这些步骤,请参阅PhoneGap CLI文档

  1. 确保已安装PhoneGap CLI,请参阅上文。
  2. 在控制台(或终端)窗口中,导航到解压缩源的根目录。
  3. 输入以下命令:
phonegap run android

// -- or -- //

phonegap run ios
注意

如果此时出现问题,请回到故障拍摄的基础知识。

  1. 创建新文件夹(mkdir测试)
  2. 导览至此新文件夹(cd测试)
  3. 运行“phonegap create helloWorld”
  4. 导航到helloWorld(cd helloWorld)
  5. 运行“phonegap运行android”(或将android替换为上述ios)。
  6. 将打开模拟器,运行新创建的PhoneGap应用程序,如果到本机的JavaScript桥接器可以运行,则它会说“设备就绪”。

这将验证您的PhoneGap CLI开发环境是否已启动并正确运行。

使用Safari和IOS调试调试Javascript

您可以使用Safari的开发人员工具调试应用程序的JavaScript,方法与使用Web应用程序相同。

启用Safari开发人员工具

要启用开发人员工具,请执行以下操作:

  • 打开Safari首选项

    • 在菜单栏中单击Safari
    • 单击“首选项”
  • 在“首选项”窗口中单击“高级”

chlimage_1-47

  • 选中“在菜单栏中显示开发菜单”
  • 关闭首选项窗口

将Safari连接到iOS

可以将Safari连接到iOS设备或模拟器。

  • 在控制台窗口中,导航到解压缩源的根目录。
  • 输入以下命令,在您的设备或模拟器上启动您的应用程序。
phonegap run <platform> --device

// -- or -- //

phonegap run <platform> --emulator
  • 打开Safari
  • 在菜单栏中单击“开发”
  • 选择iOS模拟器子菜单
  • 单击home.html

chlimage_1-48

使用Safari的Web检查器调试JavaScript

您可以在源中的任意位置设置断点。 当您与模拟器或设备交互时,应用程序的执行将停止在这些断点处。 您可以遍历执行步骤并检查变量中的值。

  • 在“Web检查器”窗口中单击“资源”
  • 导览源树并单击所需的源文件
  • 单击旁边的行号以添加断点
  • 与设备或模拟器交互

chlimage_1-49

  • 使用控制按钮可继续执行、跳过、跳入和跳出方法:

注意

要查看变量值,请在当前方法中,悬停鼠标。

后续步骤

了解了使用PhoneGap CLI开发应用程序后,请参阅访问设备功能

On this page

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now