工具:Sublime插件

概述

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

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

当前支持环境

  • 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 即可。

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不会自动打开应用,需要手动打开同步完的应用。

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