APICloud 开发app 之 工具：Sublime插件

http://docs.apicloud.com/Dev-Tools/sublime-apicloud-plugin

概述

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

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

• 当前支持环境
• 首先安装 Package Control
• 安装真机同步插件
• 安装 APICloud 代码提示插件
• 安装本地打包插件
• 创建新应用
• 创建APICloud文件
• 压缩 Widget 包，用于代码上传
• 官方 Loader 真机同步
• 官方 Loader 如何更新
• WiFi真机同步和WiFi真机预览
• WiFi日志输出
• 自定义 Loader 真机同步
• 本地打包应用
• 使用SVN
• 回显Android调试日志
• 代码提示功能
• 插件开源地址

Windows版下载  Mac版下载

当前支持环境

• Sublime Text 3
• Windows 或 Mac
• Android 手机
• iOS 手机

首先安装 Package Control

1、通过快捷键 ctrl+` 或 View > Show Console 菜单打开控制台

2、粘贴下面的代码后，按回车进行安装

3、参考资料Package Control 安装

4、如果不通过Package Control安装，可在APICloud 官网下载插件后解压到Sublime text3 的Packages 目录下即可。

import urllib.request,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

安装真机同步插件

1、快捷键 'Ctrl + Shift + P' （Mac 为：'Command + Shift + P'）（或顶部菜单 -> Tools -> Command Palette），输入 'install'，选择 'Package Control:Install Package'

2、弹出的插件搜索框输入 'apicloud'，选择 'APICloudLoader'，回车等待安装完毕，重启 Sublime Text，即可使用。

安装 APICloud 代码提示插件

1、快捷键 'Ctrl + Shift + P' （Mac 为：'Command + Shift + P'）（或顶部菜单 -> Tools -> Command Palette），输入 'install'，选择 'Package Control:Install Package'

2、弹出的插件搜索框输入 'apicloud'，选择 'APICloudSnippets'，回车等待安装完毕，重启 Sublime Text，即可使用。

安装本地打包插件

1、快捷键 'Ctrl + Shift + P' （Mac 为：'Command + Shift + P'）（或顶部菜单 -> Tools -> Command Palette），输入 'install'，选择 'Package Control:Install Package'

2、弹出的插件搜索框输入 'apicloud'，选择 'APICloudPackage'，回车等待安装完毕，重启 Sublime Text，即可使用。

创建新应用

1、在任意目录新建一个项目文件夹，名字自定义，比如叫 'workspace'

2、把 'workspace' 文件夹拖至 Sublime Text 开发工具，Sublime Text 左侧出现了一个新的项目文件夹

3、右键点击 'workspace' 文件夹 -> 弹出菜单顶部选择 '新建APICloud项目' -> 根据需要选择相应的应用框架

4、底部弹出一个输入框 -> 填入 APICloud 项目名称 -> 点击回车键

5、新项目创建成功

创建APICloud文件

点击此菜单项将在新建文件中生成默认的html相关模板内容。

压缩 Widget 包，用于代码上传

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

2、右键点击应用项目文件夹 -> 选择 '压缩Widget包'，压缩后的 zip 包位于同级目录，压缩后的 zip 包可直接用于 APICloud 平台的代码上传功能。

官方 Loader 真机同步

Android设备真机同步

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

2、右键点击 APICloud 应用文件夹 -> 弹出菜单顶部选择 'Android真机同步..'

3、等待 Android 手机自动打开刚同步的应用，代表同步成功

4、真机同步快捷键。在widget项目的任意编辑页面通过快捷键可直接进行真机同步。默认快捷键windows: ctrl+r；mac: command+r。也支持用户修改，修改位置：插件安装目录\Sublime-APICloud-Loader\ 下文件 Default (Windows).sublime-keymap(针对windows系统)或 Default (OSX).sublime-keymap(针对mac系统)。

注意事项：

Mac 系统用户请确保插件包中 tools 目录（Mac 系统：/Users/用户名/Library/Application Support/Sublime Text 3/Packages/APICloudLoader/tools）下的 adb 命令有执行权限，可通过 ls -al adb 查看该命令是否有执行权限。 通过 chmod +x adb 为adb添加执行权限。

iOS设备真机同步

iOS设备在 MAC 系统和Windows 系统下真机同步需要的环境略有不同，Windows系统需要安装配置iTunes 和 iTools, 同时下载 32位JRE环境到插件包中;MAC系统只需安装 JDK 1.7 即可。（暂不支持iOS 10 以上版本的手机。）

1、Windows 下 iOS 真机同步安装 iTunes 和 iTools (MAC 下无需此步骤)。 下载地址分别为 iTunes 下载。iTools 下载。 安装成功后需要把相关目录放到系统环境变量中。环境变量设置如下：

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

Path 变量的设置 为iTools和iTunes安装位置 (如果此时已开启Sublime，需要重启Sublime)，如 （ C:\ProgramData\ThinkSky\iTools\Driver\;C:\Program Files (x86)\Common Files\Apple\Apple Application Support\; ）

2、iOS 真机同步通过Java实现同步功能，Windows环境需要从官网下载32位JRE环境并保存到package中 tools 目录下并解压。JRE可以通过JRE官网下载获得。 MAC系统可直接安装JDK即可。

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

4、右键点击 APICloud 应用文件夹 -> 弹出菜单顶部选择 'iOS真机同步..'

5、由于 iOS 不会自动启动应用，需要等待 Sublime 提示同步完成代表同步完成(鉴于Windows系统会回显同步过程，对于无设备连接时，回显界面会停留在"start listening..." 然后退出，此时Sublime也会显示同步完成；Mac系统由于没有回显，会正常提示"未发现连接的设备")。

6、iOS真机同步快捷键。在widget项目的任意编辑页面通过快捷键可直接进行真机同步。默认快捷键windows: ctrl+alt+r；mac: command+alt+r。也支持用户修改，修改位置：插件安装目录\Sublime-APICloud-Loader\ 下文件 Default (Windows).sublime-keymap(针对windows系统)或 Default (OSX).sublime-keymap(针对mac系统)。

官方 Loader 如何更新

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

2、Android的官方loader替换已安装的真机同步插件里的官方 AppLoader（\插件安装目录\Sublime-APICloud-Loader\appLoader\apicloud-loader\），需要重命名为 'load.apk'。

3、iOS的官方loader替换已安装的真机同步插件里的官方 AppLoader（\插件安装目录\Sublime-APICloud-Loader\appLoader\apicloud-loader-ios\），需要重命名为 'load.ipa'。

自定义 Loader 真机同步

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

2、用 Sublime Text 在本地也创建一个应用（方法同创建新应用），名字自定义，比如也叫：moduleTest

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

4、右键点击本地应用 moduleTest 文件夹 -> 弹出菜单顶部选择'压缩Widget包..'

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

6、在 APICloud 控制台中，配置好应用的端设置、证书、包名等，再进入 -> 模块页面 -> 添加自己需要的模块 真机同步快捷键

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

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

9、Android 应用的真机同步： 找到 Sublime Text 安装目录 -> D:\安装目录\Data\Packages\APICloudLoader\appLoader\custom-loader（Mac 系统为：/Users/用户名/Library/Application Support/Sublime Text 3/Packages/APICloudLoader/appLoader/custom-loader）

iOS 应用的真机同步： 找到 Sublime Text 安装目录 -> D:\安装目录\Data\Packages\APICloudLoader\appLoader\custom-loader-ios（Mac 系统为：/Users/用户名/Library/Application Support/Sublime Text 3/Packages/APICloudLoader/appLoader/custom-loader-ios）

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

11、获取应用包名。如图：

12、新建一个 'load.conf' 文件（version - 自定义 Loader 版本号，packageName - 应用包名），格式如图：

注意：iOS平台的自定义loader，如果没有上传自己的iOS证书，则所有app项目的自定义loader统一包名为“com.api.customloader”

13、右键点击本地应用 moduleTest 文件夹 -> 弹出菜单顶部选择'Android真机同步..' 或 'iOS真机同步..'

14、等待真机同步完成， Android 手机自动打开刚同步的应用，代表同步成功，iOS不会自动打开应用，需要手动打开同步完的应用。

15、暂不支持iOS 10 以上版本的手机。

WiFi真机同步和WiFi真机预览

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

WiFi日志输出

安装WiFi日志输出插件：

WiFi日志输出插件APICloudWiFiDebugView，包含在APICloud Sublime Text插件包中。请下载最新的插件包，拷贝到Package Control管理目录下。

启动WiFi日志输出插件：

启动日志快捷键[ctrl]+[alt]+[w]

注意事项:由于APICloudWiFiDebugView插件部分功能依赖于APICloudWiFiSync插件，所以最好将APICloudWiFiSync插件也更新到最新版本。 安装插件后，需重启Sublime和WiFi真机同步服务

本地打包应用

注意事项：

Mac 系统用户请确保插件包中 tools 目录（Mac 系统：/Users/用户名/Library/Application Support/Sublime Text 3/Packages/APICloudLoader/tools/mac）下的 aapt,apktool,zipalign 命令有执行权限，可通过 ls -al aapt 查看某个命令(如aapt)是否有执行权限。 通过 chmod +x aapt 为aapt添加执行权限，其他命令权限修改与其相同。

右键点击应用文件夹 -> 弹出菜单选择 '本地打包...' -> 等待打包完成，打好的apk包在应用文件夹的同级目录，可以直接用于安装。

使用 SVN

Windows下使用 SVN

1、Windows下 SVN 插件推荐使用官方提供的插件。可在官方Sublime-TortoiseSVN插件进行下载。下载压缩包解压到 \插件安装目录 ( 顶部菜单 -> Preferences -> Browse Packages )。确保文件名为 TortoiseSVN ，如图所示：

2、请确保系统安装了 TortoiseSVN 客户端，TortoiseSVN 客户端下载。

3、打开ST3 ，在ST3菜单中 Preferences -> Package Setting -> TortoiseSVN -> Settings Defalut 打开TortoiseSVN的配置文件，配置tortoiseproc_path为系统TortoiseSVN客户端的可执行程序。如"tortoiseproc_path": "C:\Program Files\TortoiseSVN\bin\TortoiseProc.exe"

4、通过右键目录进行相关 SVN 操作，插件会自动弹出 TortoiseSVN 的客户端界面。

Mac下使用 SVN

对于Mac系统(Windows也支持)可安装下边的第三方插件。

1、首先安装 SVN 插件

快捷键 'Ctrl + Shift + P' （Mac 为：'Command + Shift + P'）（或顶部菜单 -> Tools -> Command Palette），输入 'install'，选择 'Package Control:Install Package'

2、弹出的插件搜索框输入 'SVN'，选择第一项，回车等待安装完毕，重启 Sublime Text，即可使用。

3、右键选择任一空文件夹，弹出菜单选择 'SVN' -> 'Checkout...'，底部弹出的输入框，按规定格式输入用户名，密码及 SVN 地址，输入完毕按回车，等待项目检出完毕。

格式为：svn://用户名:密码@svn地址

APICloud 平台的 SVN 分支密码在代码页面获取：

正确的例子：svn://jinlong.zhang@app3c.com:96e79218965eb72c92a549dd5a330112@svn3.apicloud.com/A6997434778733/tempTest

4、右键点击刚检出项目里的文件，弹出菜单 -> 'SVN'，可以看到更多的 SVN 功能：'更新'、'提交'、或'比较'等等。

Mac版本常见问题：

1、Mac版本的Sublime Text运行SVN插件需要使用相关的svn命令，所以要在Mac上安装Xcode。 2、如果已经安装了Xcode但是还是找不到svn命令，可以通过xcode-select --switch XcodePath来指定Xcode路径。

代码提示功能

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

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

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

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

• 如果想新增自定义的模块代码提示，可以参照Sublime APICloud 语法提示文档，把新建的 '.sublime-snippet' 文件放入插件目录（顶部菜单 -> Preferences -> Browse Packages -> User -> 自己命名的新建文件夹中）。

回显Android调试日志

1、首先安装 ADBView 插件

快捷键 'Ctrl + Shift + P' （Mac 为：'Command + Shift + P'）（或顶部菜单 -> Tools -> Command Palette），输入 'install'，选择 'Package Control:Install Package'

2、弹出的插件搜索框输入 'ADBView'，选择第一项，回车等待安装完毕，

3、在ST3菜单中 Preferences -> Package Setting -> ADBView-> Settings Users 打开ADBView的配置文件，配置"adb_args": ["logcat", "-v", "time","-s" ,"app3c"]； 配置"adb_command"中adb.exe(Mac系统为adb)所在路径。(adb.exe可在官方loader的插架包中找到，Windows系统：插件安装目录\Sublime-APICloud-Loader\tools; Mac 系统：/Users/用户名/Library/Application Support/Sublime Text 3/Packages/APICloudLoader/tools)。配置好后ADBView即可使用。

4、连接移动设备，通过快捷键ctrl+alt+d即可打开当前回显日志窗口。

代码提示功能

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

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

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

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

• 如果想新增自定义的模块代码提示，可以参照Sublime APICloud 语法提示文档，把新建的 '.sublime-snippet' 文件放入插件目录（顶部菜单 -> Preferences -> Browse Packages -> User -> 自己命名的新建文件夹中）。

开源地址

Sublime-APICloud-Plugins开源地址：https://github.com/apicloudcom?utf8=✓&query=sublime

补充一句：这个超级详细的文档看着就比较开心