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

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

概述

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

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

下载插件
Windows版WebStorm安装WiFi真机同步插件
Mac版WebStorm安装WiFi真机同步插件
使用WiFi同步功能
WiFi日志输出插件安装、使用

下载插件

在APICloud官网开发工具页面(//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。

注意事项，目录结构为：workspace-项目根目录-项目文件。如果是workspace-项目文件，这样是错误的，会导致无法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真机预览”，对某个页面进行预览。

11、 自定义WiFi同步时忽略的文件、文件夹

在项目根目录下增加.ignore.txt 文件。支持忽略指定文件夹，指定文件。如.ignore.txt中的内容为：

image   // 文件夹名
res     // 文件夹名
1.png   // 文件名

其他说明

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