阅读(3432) (11)

在IntelliJ IDEA使用之PhoneGap/Cordova

2018-10-10 15:09:36 更新

PhoneGap/Cordova

此功能仅在Ultimate版本中受支持。

在IntelliJ IDEA中,您可以使用PhoneGap,Apache Cordova和Ionic框架开发旨在运行在各种移动平台(包括Android)上的应用程序。 

在你开始使用PhoneGap,Apache Cordova和Ionic之前,你需要:

  1. 如“插件管理”中所述, 在“插件”页面上安装并启用PhoneGap/Cordova存储库插件 。
  2. 安装Node.js。
  3. 根据目标平台和您使用的操作系统,下载并安装模拟器工具;您可以从Cordova官方网站了解更多信息。

安装PhoneGap/Cordova/Ionic

  • 打开内置的IntelliJ IDEA终端(Alt+F12)并在命令提示符下键入以下命令之一:
    npm install -- global phonegap
    npm install -- global cordova
    npm install -- global ionic

创建一个新的PhoneGap/Cordova/Ionic应用程序

如果您还没有应用程序,可以从样板模板生成具有PhoneGap/Cordova/Ionic特定结构的IntelliJ IDEA项目。或者,创建一个空的IntelliJ IDEA项目,并在其中配置PhoneGap/Cordova/Ionic支持,如下面的“开始使用现有的PhoneGap/Cordova/Ionic应用程序”所述。

从模板创建PhoneGap/Cordova/Ionic应用程序:

  1. 在主菜单上选择:文件|新建|项目,或单击欢迎屏幕上的单击“新建项目”按钮。
  2. 在“项目类别和选项”对话框(“新建项目”向导的第一页)中,在左侧窗格中选择“静态Web”。
  3. 在右侧窗格中,选择:PhoneGap/Cordova App,然后单击“下一步”。
  4. 在向导的第二页上,指定项目名称和要在其中创建的文件夹。指定可执行文件的位置:phonegap.cmd,cordova.cmd,或ionic.cmd (请参阅上文的“安装PhoneGap/Cordova/Ionic”)。
  5. 单击“完成”后,IntelliJ IDEA将生成具有特定于框架结构的PhoneGap/Cordova/Ionic应用程序的框架。

创建一个空的IntelliJ IDEA项目:

  1. 在主菜单上选择:文件|新建|项目,或单击欢迎屏幕上的“新建项目”按钮。
  2. 在“项目类别和选项”对话框(“新建项目”向导的第一页)中,在左侧窗格中选择“静态Web”。
  3. 在右侧窗格中,再次选择“静态Web”,然后单击“下一步”。
  4. 在向导的第二页上,指定项目文件夹和名称,然后单击“完成”。

开始使用现有的PhoneGap/Cordova/Ionic应用程序

  1. 通过在主菜单上选择:文件|打开,来在IntelliJ IDEA中打开所需的PhoneGap/Cordova/Ionic应用程序,或或单击欢迎屏幕上的“打开”。
  2. 在“设置/首选项”对话框(Ctrl+Alt+S)中,单击“语言和框架”下的“JavaScript” ,然后单击“Cordova”,将打开Cordova页面。
  3. 检查可执行文件的位置:phonegap.cmd,cordova.cmd,或者ionic.cmd,如果IntelliJ IDEA未自动检测到可执行文件,则指定其路径。

    IntelliJ IDEA检测已安装的版本并将其显示在PhoneGap/Cordova版本的只读字段中。

  4. 在Cordova工作目录字段中,指定存储要运行的PhoneGap/Cordova/Ionic应用程序文件的文件夹。
  5. 在“插件”区域中,通过安装所需的软件包来配置要在开发中使用的插件列表。该列表显示了您的计算机上当前安装的所有PhoneGap/Cordova/Ionic插件,包括全局和项目级别。
    • 要安装插件,请单击“安装”按钮图标一般添加svg。在打开的“可用包”对话框中,选择所需的包。

      要全局安装软件包,请选中“选项”复选框,然后在文本框中输入:--global。单击“安装包”。

    • 要删除插件,请在列表中选择它,然后单击“卸载”按钮图标一般删除svg
    • 要将插件升级到最新的可用版本,请在列表中选择插件,然后单击“升级”按钮图标动作previousOccurence svg

创建并启动PhoneGap/Cordova/Ionic运行配置

PhoneGap/Cordova/Ionic应用程序根据专用的运行/调试配置执行。

  1. 在主菜单上,选择:运行|编辑配置,在打开的“编辑配置”对话框中,单击“添加新配置”工具栏按钮图标一般添加svg,然后在上下文菜单中选择“PhoneGap/Cordova”。
  2. 在打开的“运行/调试配置:PhoneGap / Cordova”对话框中,指定以下内容:
    1. 配置的名称。
    2. 在PhoneGap/Cordova可执行文件路径字段中,指定可执行文件的位置:phonegap.cmd,cordova.cmd或ionic.cml。
    3. 在PhoneGap/Cordova工作目录字段中,指定存储要运行的PhoneGap/Cordova/Ionic应用程序文件的文件夹。
    4. 从“命令”下拉列表中,选择要运行的命令。下拉列表的内容取决于实际使用的框架,即PhoneGap/Cordova可执行路径字段中指定的可执行文件。可用选项包括:
      • 对于PhoneGap:
        • 模仿
        • 运行
        • 准备
        • 服务
        • 远程构建
        • 远程运行
      • 对于Cordova:
        • 模仿
        • 运行
        • 准备
        • 服务
      • 对于Ionic:
        • 模仿
        • 运行
        • 准备
        • 服务
    5. 从“平台”下拉列表中,选择应用程序所针对的平台。可用选项包括:
      • Android
      • ios:要模拟此平台,您需要全局安装ios-sim命令行工具。您可以通过节点包管理器(npm),或者运行sudo npm install ios-sim -g命令,具体取决于您的操作系统。
      • amazon-fireos
      • firefoxos
      • blackberry10
      • Ubuntu
      • WP8
      • windows8
      • 浏览器
    6. 对于Cordova和Ionic,请指定要在其上运行应用程序的目标虚拟或物理Android设备:选择“指定目标”复选框,然后从下拉列表中选择所需设备。该列表显示了我们计算机上当前配置的所有虚拟和物理设备。

      如果IntelliJ IDEA显示以下错误消息:无法检测路径中的ios-simios-sim,请确保已安装,确保在开始本节内容之前,你已经做了正确的配置。

  3. 要运行PhoneGap/Cordova/Ionic应用程序,请从主工具栏的列表中选择所需的运行配置,然后在主菜单上选择:运行|运行<配置名称>,或单击“运行” icons toolwindows toolWindowRun svg