工具:Sublime插件
概述
让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调试日志
- 代码提示功能
- 插件开源地址
当前支持环境
- 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、在任意目录新建一个项目文件夹,名字自定义,比如叫 '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真机预览
WiFi日志输出
安装WiFi日志输出插件:
WiFi日志输出插件APICloudWiFiDebugView,包含在APICloud Sublime Text插件包中。请下载最新的插件包,拷贝到Package Control管理目录下。
启动WiFi日志输出插件:
启动日志快捷键[ctrl]+[alt]+[w]
注意事项:由于APICloudWiFiDebugView插件部分功能依赖于APICloudWiFiSync插件,所以最好将APICloudWiFiSync插件也更新到最新版本。 安装插件后,需重启Sublime和WiFi真机同步服务
使用 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 -> 自己命名的新建文件夹中
)。