工具:WebStorm插件

概述

让HTML5前端开发者使用WebStorm快速开发原生苹果与安卓APP。 WebStorm APICloud Plugins是APICloud为开发者提供的一套开源的WebStorm扩展插件。包括:应用管理、应用框架、页面模板、代码提示、代码管理、Widget打包、真机同步、日志输出、管理自定义AppLoader等功能,其他的功能插件也在不断增加;所有插件都已开源,开发者可以下载这些插件在自己的WebStorm中安装后使用,开发者也可以在此基础上按需求扩展自己的插件。

WebStorm APICloud 插件的安装和使用说明

依赖环境

  • java

当前支持环境


  • Windows 或 Mac
  • Android 和 ios手机

首先下载插件

1、通过APICloud官方网站下载webStorm-APICloud.zip文件。

2、把webStorm-APICloud.zip解压到WebStorm的工作空间中。

图片说明

打开WebStorm 的 'External Tools'选项

Mac
点击 状态栏中WebStorm ,在下拉菜单中,点击 Preferences

图片说明

图片说明 Windows

图片说明

图片说明

安装"创建新应用"插件

1.新建空白应用。在 'External Tools'选项中,点击 '+' 。在Create Tool中,填写如下内容:

name : 新建空白应用
Program : java
Parameters : -jar $ProjectFileDir$/webStorm-APICloud/webStorm_app.jar $ProjectFileDir$ $Prompt$ default

图片说明

2.新建底部导航应用。在 'External Tools'选项中,点击 '+' 。在Create Tool中,填写如下内容:

name : 新建底部导航应用
Program : java
Parameters : -jar $ProjectFileDir$/webStorm-APICloud/webStorm_app.jar $ProjectFileDir$ $Prompt$ bottom

3.新建首页导航应用。在 'External Tools'选项中,点击 '+' 。在Create Tool中,填写如下内容:

name : 新建首页导航应用
Program : java
Parameters : -jar $ProjectFileDir$/webStorm-APICloud/webStorm_app.jar $ProjectFileDir$ $Prompt$ home

4.新建侧边导航应用。在 'External Tools'选项中,点击 '+' 。在Create Tool中,填写如下内容:

name : 新建侧边导航应用
Program : java
Parameters : -jar $ProjectFileDir$/webStorm-APICloud/webStorm_app.jar $ProjectFileDir$ $Prompt$ slide

安装"创建APICloud文件"插件

在 'External Tools'选项中,点击 '+' 。在Create Tool中,填写如下内容:

name : 创建APICloud文件
Program : java
Parameters : -jar $ProjectFileDir$/webStorm-APICloud/webStorm_app.jar $ProjectFileDir$ $Prompt$ new $FileDir$

安装"android真机同步"插件

在 'External Tools'选项中,点击 '+' 。在Create Tool中,填写如下内容:

name : android真机同步
Program : java
Parameters : -jar $ProjectFileDir$/webStorm-APICloud/webStorm_loader.jar $ProjectFileDir$/webStorm-APICloud/ $FileDir$/

图片说明

安装"Android本地打包"插件

在 'External Tools'选项中,点击 '+' 。在Create Tool中,填写如下内容:

name : android本地打包
Program : java
Parameters : -jar $ProjectFileDir$/webStorm-APICloud/webStorm_pkg.jar $ProjectFileDir$/webStorm-APICloud $FileDir$ $ProjectFileDir$ android

图片说明

安装"Android日志输出"插件

在 'External Tools'选项中,点击 '+' 。在Create Tool中,填写如下内容:

name : Android 日志输出
Program : java
Parameters : -jar $ProjectFileDir$/webStorm-APICloud/webStorm_log.jar $ProjectFileDir$/webStorm-APICloud

安装"ios真机同步"插件

在 'External Tools'选项中,点击 '+' 。在Create Tool中,填写如下内容:

name : ios真机同步
Program : java
Parameters : -jar $ProjectFileDir$/webStorm-APICloud/webStorm_loader.jar $ProjectFileDir$/webStorm-APICloud/ $FileDir$ ios

图片说明

安装"ios本地打包"插件

在 'External Tools'选项中,点击 '+' 。在Create Tool中,填写如下内容:

name : ios本地打包
Program : java
Parameters : -jar $ProjectFileDir$/webStorm-APICloud/webStorm_pkg.jar $ProjectFileDir$/webStorm-APICloud $FileDir$ $ProjectFileDir$ ios

图片说明

插件的使用

右键点击 工作空间(文件夹) -> 弹出菜中选择 'External Tools' -> 根据需要选择相应的插件。

图片说明

如果有弹出的输入框,请输入对应的项目名称或者文件名称。

图片说明

插件的快捷键设置

打开WebStorm 的 'Keymap' 中'External Tools'选项

图片说明

选中要设置快捷键的插件,点击右键 -> Add Keyboard Shortcut。在第一个输入框中,输入快捷键。

图片说明

官方 Loader 真机同步

Android设备真机同步

1、启动Android模拟器,例如:海马玩模拟器下载,或通过 USB 线连接 Android 手机,保证 'USB 调试' 已打开,等待手机与电脑连接成功

2、真机同步快捷键。在widget项目的任意编辑页面通过快捷键可直接进行真机同步。

IOS设备真机同步

IOS设备在 MAC 系统和Windows 系统下真机同步需要的环境略有不同,Windows系统需要安装配置iTunes 和 iTools;MAC系统只需安装JDK即可。 1、Windows 下 IOS 真机同步安装 iTunes 和 iTools (MAC 下无需此步骤)。 下载地址分别为 iTunes 下载。iTools 下载。 安装成功后需要把相关目录放到系统环境变量中。环境变量设置如下:

注意:MAC系统无需此配置,只需要安装JDK即可。 右键我的电脑->属性 将弹出 "系统" 界面 图片说明 图片说明 图片说明

Path 变量的设置 为iTools和iTunes安装位置,如 C:\ProgramData\ThinkSky\iTools\Driver\;C:\Program Files (x86)\Common Files\Apple\Apple Application Support\ 图片说明

2、设置好相关环境后通过 USB 线连接 IOS 手机,等待手机与电脑连接成功

3、右键点击 APICloud 应用文件夹 -> External -> 'IOS真机同步..'

4、由于 IOS 不会自动启动应用,需要等待 WebStorm 提示同步成功代表同步完成。

图片说明

注意事项

工作空间的全路径中,不要有空格。

官方 Loader 如何更新

1、到文档的 Download 页面下载最新的官方 AppLoader

2、替换已安装的真机同步插件里的官方 AppLoader(\插件安装目录\webStorm-APICloud\appLoader\apicloud-loader\),需要重命名为 'load.apk'。

3、IOS的官方loader替换已安装的真机同步插件里的官方 AppLoader(\插件安装目录\webStorm-APICloud\appLoader\apicloud-loader-ios\),需要重命名为 'load.ipa'。

自定义 Loader 真机同步

1、在 APICloud 云平台先创建一个应用,比如叫:moduleTest

2、用 WebStorm 在本地也创建一个应用(方法同创建新应用),名字自定义,比如也叫:moduleTest

图片说明

3、打开本地创建的 moduleTest 应用的 config.xml 文件,把其中的 id 修改成云平台创建的应用 ID

图片说明

4、进入 APICloud 云平台的代码页面 -> 点击'上传代码'按钮 -> 点击'选择zip'按钮 -> 选择moduleTest的压缩包 -> 等待上传成功

图片说明

5、在 APICloud 控制台中,配置好应用的端设置、证书、包名等,再进入 -> 模块页面 -> 添加自己需要的模块

6、到 APICloud 平台 -> 模块页面 -> 选择'自定义Loader'标签

图片说明

7、点击自定义 Loader 编译按钮 -> 等待编译完成 -> 下载成功

图片说明 图片说明

8、Android 应用的真机同步: 找到 webStorm-APICloud 安装目录 -> \安装目录\webStorm-APICloud\appLoader\custom-loader

IOS 应用的真机同步: 找到 webStorm-APICloud 安装目录 -> \安装目录\webStorm-APICloud\appLoader\custom-loader-ios

新建一个文件夹,以云端应用 ID 命名,把刚下载的自定义 Loader 放入此目录,重命名为 'load.apk'

图片说明

9、新建一个 'load.conf' 文件(version - 自定义 Loader 版本号,packageName - 应用包名),格式如图:

图片说明

**注意,ios 如果使用官方默认的证书,没有上传自己的ios证书,则自定义Loader的包名统一为:com.api.customloader

10、右键点击本地应用 moduleTest 文件夹 -> 弹出菜中选择 'External Tools' -> Android真机同步 或者 ios真机同步。

11、等待 Android 手机自动打开刚同步的应用,代表同步成功,IOS不会自动打开应用,需要手动打开同步完的应用

WiFi真机同步和WiFi真机预览

请看 WebStorm WiFi真机同步和WiFi真机预览专题文档( http://docs.apicloud.com/Dev-Tools/webStorm-wifi-sync

WiFi日志输出插件安装,使用

windows 版插件安装、使用

把插件包中 wifilog.jar 放到目录C:\APICloud\workspace 下。

在 Settings-Tools-Terminal 面板配置如图所示内容:

cmd.exe /K "chcp 936 && java -jar C:/APICloud/workspace/wifilog.jar C:/APICloud/workspace/log_info" 图片说明

按快捷键 Alt+F12启动WiFi日志输出。有些键盘可能需要同时按fn键。

Mac 版插件安装、使用

在 'External Tools'选项中,点击 '+' 。在Create Tool中,填写如下内容,填完后点击ok。如图:

-jar $ProjectFileDir$/webStorm-APICloud/wifilog.jar $ProjectFileDir$/webStorm-APICloud/wifisync_tools/log_info 图片说明

本地打包应用

右键点击应用文件夹 -> 弹出菜中选择 'External Tools' -> ...本地打包,打好的apk包在应用文件夹的同级目录,可以直接用于安装。

图片说明

安装 APICloud 代码提示插件

1、点击顶部菜单 'file' ,选择 'Import Settings'。

图片说明

2、弹出的对话框输入插件路径,点击OK即可。

图片说明

3、弹出的对话框如图选择'Live templates',点击OK即可,等待重启 'webstorm',即可使用。

图片说明

代码提示功能

确保 APICloud 代码提示插件安装成功,无需额外配置即可使用,在 JS 文件或 <script> 标签内部可以触发提示。

  • api 对象上面的属性及方法,在输入 api. 时触发提示,按 '↑ ↓方向键' 选择需要的 API,选中后按回车键完成代码补全。

图片说明

  • $api 对象上面的方法,在输入 $api. 时触发提示,按 '↑ ↓方向键' 选择需要的 API,选中后按回车键完成代码补全。

图片说明

  • 模块代码提示:以 fs 模块为例,先输入 'api.req' 触发代码提示,require 相应的模块,然后输入'模块名.'时可以触发模块代码提示,按 '↑ ↓方向键' 选择需要的 API,选中后按回车键完成代码补全。

图片说明 图片说明

注意: 如果想新增自定义的模块代码提示,可以参照webStorm APICloud代码提示插件编写文档。

使用 subversion

图片说明

图片说明

图片说明

图片说明

图片说明

选择svn项目名称的路径 ,如图

图片说明

图片说明

可能需要输入svn的账户和密码

选择按钮 No

图片说明

图片说明

开源地址

开源地址:https://github.com/apicloudcom/WebStorm-APICloud-Plugins