WebStorm WiFi真机同步和WiFi真机预览使用说明

概述

WiFi真机同步,通过在WebStorm中建立调试服务,接收真机设备主动连接调试的方式,配合apploader及自定义loader,为开发者提供在局域网内通过WiFi实现应用快速真机同步和实时预览的服务,摆脱应用开发调试过程中,真机同步时必须依赖USB数据线的困扰,完美解决了USB数据线真机同步方式存在的各种问题,具有更强的稳定性和兼容性。WiFi真机同步支持一对多的同步,即同一个项目可同时同步到多个真机;WiFi真机的同步策略为“增量”策略,即每次同步仅同步被编辑过的文件,因此同步速度非常快。

WiFi真机实时预览,提供在真机上实时加载运行指定页面并预览效果的功能,支持对包括模块在内的所有端API的调试和预览。

下载插件

在APICloud官网开发工具页面(http://www.apicloud.com/devtools) 下载WebStorm插件包。解压到WebStorm 的工作空间中。 图片说明

Windows 版WebStorm安装WiFi真机同步插件

打开WebStorm 的 'External Tools'选项

图片说明

图片说明

安装"安装服务"插件

在 'External Tools'选项中,点击 '+' 。在Create Tool中,填写如下内容。group填写“WiFi真机同步配置”。填完后点击ok。如图:

  • Program: cmd
  • Parameters: /C $ProjectFileDir$\webStorm-APICloud\wifisync_tools\APICloudWiFiSync.exe -install
  • Working directoy: $ProjectFileDir$\webStorm-APICloud\wifisync_tools

图片说明

安装"启动服务"插件

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

  • Program: cmd
  • Parameters: /C $ProjectFileDir$/webStorm-APICloud/wifisync_tools/APICloudWiFiSync.exe -start
  • Working directoy: $ProjectFileDir$\webStorm-APICloud\wifisync_tools

图片说明

安装"查看WiFi真机同步服务器地址"插件

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

  • Program: java
  • Parameters: -jar $ProjectFileDir$/webStorm-APICloud/wifisyncmanager.jar 1 C:/APICloud/workspace/config_info
  • Working directoy: $ProjectFileDir$\webStorm-APICloud\

图片说明

安装"停止服务"插件

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

  • Program: cmd
  • Parameters: /C $ProjectFileDir$/webStorm-APICloud/wifisync_tools/APICloudWiFiSync.exe -stop
  • Working directoy: $ProjectFileDir$

图片说明

建议以上四项放到同一group,group名填写“WiFi真机同步配置”。 点击Apply,再点击ok。 如下图。

图片说明

安装"WiFi真机同步"插件

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

  • Program: java
  • Parameters: -jar $ProjectFileDir$/webStorm-APICloud/wifisyncmanager.jar 3 C:/APICloud/workspace/config_info $FileDir$ $ProjectFileDir$
  • Working directoy: $ProjectFileDir$

图片说明

安装"WiFi全量真机同步"插件

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

  • Program: java
  • Parameters: -jar $ProjectFileDir$/webStorm-APICloud/wifisyncmanager.jar 2 C:/APICloud/workspace/config_info $FileDir$ $ProjectFileDir$
  • Working directoy: $ProjectFileDir$

图片说明

安装"WiFi真机预览"插件

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

  • Program: java
  • Parameters: -jar $ProjectFileDir$/webStorm-APICloud/wifisyncmanager.jar 4 C:/APICloud/workspace/config_info $FilePath$ $ProjectFileDir$
  • Working directoy: $ProjectFileDir$

图片说明

Mac版WebStorm安装WiFi真机同步插件

打开WebStorm 的 'External Tools'选项

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

图片说明

图片说明

安装"启动服务"插件

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

  • Program: nohup
  • Parameters: java -jar $ProjectFileDir$/webStorm-APICloud/wifisync_tools/wifisync.jar $ProjectFileDir$ $ProjectFileDir$/webStorm-APICloud/wifisync_tools &
  • Working directoy: $ProjectFileDir$/webStorm-APICloud/wifisync_tools

图片说明

安装"查看WiFi真机同步服务器地址"插件

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

  • Program: java
  • Parameters: -jar $ProjectFileDir$/webStorm-APICloud/wifisyncmanager.jar 1 $ProjectFileDir$/webStorm-APICloud/wifisync_tools/config_info
  • Working directoy: $ProjectFileDir$/webStorm-APICloud/

图片说明

安装"停止服务"插件

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

  • Program: /bin/sh
  • Parameters: $ProjectFileDir$/webStorm-APICloud/wifisync_tools/stop.sh
  • Working directoy: $ProjectFileDir$

图片说明

以上各项添加完成,点击Apply, 再点击ok。 建议以上三项放到同一group,group名填写“WiFi真机同步配置”

安装"WiFi真机同步"插件

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

  • Program: java
  • Parameters: -jar $ProjectFileDir$/webStorm-APICloud/wifisyncmanager.jar 3 $ProjectFileDir$/webStorm-APICloud/wifisync_tools/config_info $FileDir$ $ProjectFileDir$
  • Working directoy: $ProjectFileDir$

图片说明

安装"WiFi全量真机同步"插件

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

  • Program: java
  • Parameters: -jar $ProjectFileDir$/webStorm-APICloud/wifisyncmanager.jar 2 $ProjectFileDir$/webStorm-APICloud/wifisync_tools/config_info $FileDir$ $ProjectFileDir$
  • Working directoy: $ProjectFileDir$

图片说明

安装"WiFi真机预览"插件

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

  • Program: java
  • Parameters: -jar $ProjectFileDir$/webStorm-APICloud/wifisyncmanager.jar 4 $ProjectFileDir$/webStorm-APICloud/wifisync_tools/config_info $FilePath$ $ProjectFileDir$
  • Working directoy: $ProjectFileDir$

图片说明

建议以上三项放到同一group,group名填写“External Tools”。 以上各项添加完成,点击Apply, 再点击ok。 如下图:

图片说明

使用WiFi同步功能

使用前,要使电脑和手机连接的是同一个WiFi。

1、右键点击 APICloud 项目文件夹 -> WiFi真机同步配置 ->安装服务,弹出是否允许安装,选择是。安装一次即可,再次打开Webstorm不需要再次安装。 如果有360相关软件弹出的拦截窗口,请选择允许安装,否则会导致安装失败。(Mac版无需安装服务,直接启动服务即可。) 图片说明

2、右键点击 APICloud 项目文件夹 -> WiFi真机同步配置 ->启动服务,弹出是否允许,选择是。 开启WiFi同步服务。

3、右键点击 APICloud 项目文件夹 -> WiFi真机同步配置 ->查看WiFi真机同步服务器地址。 控制台输出服务端口号和ip地址。 图片说明

4、打开您手机上的AppLoader或自定义loader(如果手机上还未安装最新版AppLoader,请先安装最新版AppLoader,),最新版AppLoader将在应用UI最上层展示一个灰色的“球”。 图片说明

5、点击该“球”,AppLoader将会在屏幕上弹出一个配置调试服务信息的对话框: 图片说明

6、将在WebStorm中查看到的IP地址及端口号依次填入配置框中: 图片说明

7、点击对话框中的“连接”按钮,如果配置正确,将显示连接成功,同时“球”变为绿色。(如果连接不成功,可关闭电脑防火墙后重试。): 图片说明

8、连接成功后,即可在WebStorm中通过在项目上右键,选择“WiFi真机同步”对某项目进行WiFi真机同步: 图片说明

9、同步状态将实时显示在真机屏幕上,同步完成后AppLoader将自动热重启该应用: 图片说明

10、连接成功后,也可在WebStorm中通过在项目中的html页面上右键,选择“WiFi真机预览”,对某个页面进行预览。

其他说明

  • 1、自定义loader和AppLoader默认开启WiFi真机同步和实时预览功能,云编译APP会自动关闭该功能
  • 2、WiFi真机同步需保证手机和电脑在同一个局域网及同一个网段内。WiFi真机同步服务正常时,“球”显示为绿色,未连接则显示为灰色
  • 3、只有当自定义loader或者AppLoader位于前台时,才可进行WiFi同步,应用退到后台,WiFi同步服务将自动关闭,直到回到前台时,再次自动开启。
  • 4、WiFi真机同步与USB真机同步互不冲突,可同时使用
  • 5、自定义loader只支持对该loader所在项目进行WiFi真机同步或实时预览,AppLoader支持对所连接的WebStorm中所有项目进行WiFi真机同步或实时预览
  • 6、WiFi全量真机同步同步所有文件。WiFi真机同步,第一次同步所有文件,之后同步编辑过的文件。

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 图片说明