APICloud Studio 2 快速入门

代码管理

APICloud Studio 2 将 git-svn 技术深度应用于代码管理功能中. 相较于 SVN,GIT 客户端的分布式和可离线提交的特性,更贴合开发者的代码管理需要.借助于 GIT-svn 技术, 开发者只需要使用 Studio2.0 重新检出自己的项目,就可以立即使用 GIT 管理自己的项目了!

快捷键 cmd+ shift + P (macOS)或 ctrl+ shift + P (Win/Linux) 可以唤醒命令输入框.当熟悉 APICloud Studio 2 一段时间后,你可能更喜欢直接使用命令来执行各种操作.

1. 检出 APICloud 应用

• 可使用 checkout 命令 或 顶部菜单 --> 代码管理 --> 代码检出 --> APICloud 云端应用.

• GIT 默认检出全部历史提交记录,可手动输入 HEAD , 来指定只检出最新版.

• 支持检出第三方 GIT/SVN 仓库

2. 代码更新与提交

• 和 SVN 不同的是,GIT 的提交和同步操作是两个独立的操作

• 想要与云端同步,需要先在本地执行一次 commit 操作

• 每次本地 commit 之后, 不需要立即 提交到云端

• 即时在没有网络的情况下,依然可以进行本地提交;联网后只需要提交向服务器提交一次,就可以保留离线时的所有代码记录

3. 查看当前文件变更

当文件内容有修改时,对应位置和代码小地图上会有对应的不同颜色的标记.再也不用担心忘记修改了哪里了.

4. 查看项目历史修改记录

• 可以通过 log 命令,来显示项目的代码提交记录

• 本地代码提交记录,只含有代码检出时指定的版本区间的代码;所以当发现本地代码记录似乎不够用时,可以尝试重新完整检出项目

• 在日志区域按住 cmd (macOS) 或 ctrl (Win/Linux) 键, 并点击变更细节的 index 部分,可以以左右分屏对比的方式,查看文件变更

5. 合并代码冲突

APICloud Studio 2 有足够完善和智能的机制来解决代码冲突问题.绝大多数情况下,根据 APICloud Studio 2 提示有序解决冲突即可.

当然,你仍然可以通过 顶部菜单 --> 扩展 --> MergeConflicts --> Detect 来手动检测和解决冲突.

本地项目管理

1. 添加本地项目

APICloud Studio 2 也可以作为常规的文本开发工具使用,所以您完全可以将其作为日常开发的常备工具.内置了绝大多数语言的高亮支持,不仅仅是一款 前端开发工具!

2. 移除本地项目

此处的移除,只是从开发工具中移除,并不会真正删除项目.

代码编辑

1.语法提示

• 输入 api.require 可以模糊提示平台已有模块

• 可以根据上下文,推断出变量的真实模块类型

• 可以根据模块类型,模糊提示对应的模块方法

• 可以使用 Tab 键,在默认参数间快速切换

2. 自定义安装主题与插件

顶部菜单 --> APICloud --> 偏好设置

https://atom.io/packages/ Atom 插件,足够丰富;但国内安装,有极大可能会安装失败.此时可选择手动安装插件:

1. 到某个插件的 github 主页的 releases 区,找到合适版本的插件,并下载;

2. 源码下载后,解压放到 ~/.apicloud /packages/ (macOS/Linux) 或 C:\Users\用户名.apicloud\packages\ (Win) 目录

3. cd 到插件目录,执行 npm i 命令,然后重启 Studio 即可.

3. 格式化代码

因为代码格式化会产生许多冗余的代码记录,所以对于已经使用 GIT/SVN 管理的项目,不建议频繁大范围使用代码格式功能.

4. 使用 emmet 快速编码

emmet 有自己特定的书写规则, 详见:https://emmet.io/

5. 使用 AUI 快速布局

AUI 是 APICloud 官方推荐使用 CSS 框架, 文档详见:https://github.com/liulangnan/aui

编译与调试

1. WIFI 真机同步

开发者需要自行在手机上下载并安装 AppLoader 或使用自定义 AppLoader,正确填写对应的APICloud Studio 2 显示的ip和端口,即可通过 WIFI 调试应用.

2. 自定义 WIFI 调试端口

允许同时打开多个窗口,窗口会优先使用自定义的 WIFI 调试端口.当遇到端口冲突时,会使用某个随机端口.不同窗口使用的端口,总是不同的.

• 对于 Andorid,建议使用 Android 6.0.0 以上版本进行远程调试,需要开启 USB调试

• 对于 iOS, 因为 Apple 自身的安全限制,需要自己上传 develop 模式下的证书,并确认手机上开启设置 Web 检查器

3. 云编译,模块管理,编译自定义AppLoader

你看到的,就是 APICloud 官网控制台,这里的任何设置,都是和网站实时同步的,因为它们其实是同一个页面.云端一体的 APICloud Studio 2,让云和端的界限,越来越模糊,各种 APICloud 云端服务的使用越来越便利.

4. 远程设备调试

远程设备调试功能,需要一根可以用于数据传输的 USB 数据线.

Android,需要在手机上开启 USB 调试功能(设置-->更多设置-->开发者选项-->USB调试),手机上需要装有 AppLoader 或自定义 AppLoader.

iOS, 需要在手机手机上开启Web检查器(设置-->Safari-->高级-->Web检查器),并且需要安装的应用,是使用 develop 证书编译的.

5. 在Studio中预览HTML文件

6.自定义真机同步时想要忽略的文件或目录

支持在项目根目录添加 .syncignore 文件,来自定义想在在真机同步时忽略的文件.这一功能,对于那些基于webpack等自动化工具构建项目的开发者来说,意义重大.

不同于svn/git等的ignore,APICloud Studio 2 真机同步的 ignore 功能基于node-glob开发,支持标准的Glob表达式.

常用格式示例

• 忽略某一类型的文件,如 *.js.map 文件:

**/*.js.map

• 忽略项目中所有某一名称的文件夹极其子文件(夹),如node_modules目录:

**/node_modules/**

• 忽略根目录中某一目录下的所有文件(夹),如src目录:

src/**

• 基于自动化webpack等自动化构建工具常用的表达式:

{**/*.js.map,**/node_modules/**,src/**}

常用快捷键汇总

• 打开命令输入框: cmd + shift + P(macOS) 或 ctrl + shift + P (Win/Linux)

• 按文件名快速查找文件: cmd + P(macOS) 或 ctrl + P (Win/Linux)

• 查看当前文件定义的方法: cmd + R(macOS) 或 ctrl + R(Win/Linux)

• 文件内查找: cmd + F (macOS) 或 ctrl + F(Win或Linux)

• 全局查找: cmd + shift + F(macOS) 或 ctrl + shift + F(Win或Linux)

• 刷新视图 ctrl + alt + cmd + L(macOS) 或 ctrl + alt + R

• WIFI 增量同步: ctrl/cmd + I(macOS) 或 ctrl + I(Win或Linux)

• 插入 AUI 组件: ctrl+ alt + A

• 在电脑上预览页面: ctl + shift + V

• 代码格式化: ctrl + alt + B

APICoud Studio 2 常见问题

一. 已有项目或源码,如何导入?

1. 在 APICloud 网站控制台创建的应用

• 打开 Studio2
• 选择 顶部菜单 --> 代码管理 --> 代码检出 --> APICloud 云端应用
• 选择本地保存位置,注意一定要选择一个空目录
• 选择代码版本.可以直接回车确认,默认检出全部版本的代码
• 等待代码检出完成

2. 只有 APICloud 标准结构的源码

• 需要现在 APICloud 网站创建应用,并在概览页,查看并记录其 appid
• 参考 1. 在 APICloud 网站控制台创建的应用,把新创建的应用检出到自己电脑上
• 右键 Studio2 项目根目录,选择"在 Finder 中显示"(macOS)或"在资源管理器中显示"(windows),找到应用代码的真实存放位置
• 把已有的源码,复制到新检出的应用源码目录中
• 把 config.xml 中的 id 替换为你创建的应用的 appid
• 参考 http://apicloud.technology/2017/06/12/git-use/,把代码同步到 APICloud 云端

3. 使用第三方 GIT 管理的源码

• 假设源码本地目录为 myapp/widget/
• 打开 Studio 2,选择 顶部菜单 --> 文件 --> 打开
• 在弹出的文件选择框里,选中 widget 目录即可

二. macOS 无法检出代码,提示 Can't locate SVN/Core.pm ,怎么办?

1. 未安装过 Xcode 或 Xcode 命令行开发工具

• 可以在 appstore 下载最新版 Xcode 或者只下载 Xcode 的命令行开发工具
• 下载 Xcode 命令行工具,需要在 mac 自带终端,执行以下命令:

## 会弹窗提示,是否安装xcode命令行工具,选择只安装命令行工具,等待安装完成
xcode-select --install

## 等待命令行安装成功后,在执行下面的命令,以重置开发工具.可能需要输入管理员密码,也即mac的开机密码.
sudo xcode-select -r

2. 已安装 Xcode 或 Xcode 命令行开发工具

一般,是由某些动态库链接不正确引起的,可使用以下命令修复.

sudo ln -s /Applications/Xcode.app/Contents/Developer/Library/Perl/5.18/darwin-thread-multi-2level/SVN/ /Library/Perl/5.18/SVN 
sudo mkdir /Library/Perl/5.18/auto
sudo ln -s /Applications/Xcode.app/Contents/Developer/Library/Perl/5.18/darwin-thread-multi-2level/auto/SVN/ /Library/Perl/5.18/auto/SVN

3.如果以上指令执行时,总是提示 Operation not permitted 一类的错误,可尝试以下方式:

• 重启电脑,按住 Command+R，进入恢复模式，打开终端(Terminal),输入:

csrutil disable

• 正常打开电脑, 执行 1 和 2 中需要执行的指令.

• 重启按住 Command+R，进入恢复模式，打开Terminal,输入指令:

csrutil enable

三. windows 无法检出代码,提示 'git' could not be spawned,如何处理?

• 在 windows 自带命令行,输入 git :如果有反应,重启 Studio2 即可解决.
• 如果已经安装过git,请先卸载.
• 重启 Studio2,如果有提示安装 git,可以选择 "自动免下载安装"(Studio2 内置的是32位GIT,适用于32位或64位系统).安装过程中,最好关闭杀毒软件(因为 git 安装时需要修改环境变量,会被误拦截),最好安装到C盘.
• 64 位windows系统,推荐手动下载安装 64 位版本的 Git,以释放电脑性能.下载地址: https://git-scm.com/download/win
• 极少数 64系统的用户,在安装64位GIT后,依然报错,可尝试升级电脑系统,或下载 重新安装 2.10.x 版本的GIT,下载地址是: https://github.com/git-for-windows/git/releases/tag/v2.10.2.windows.1

四. 进行云端操作时, 提示"当前账户 * 似乎没有权限访问此应用的云端数据,请切换账号后重试!",怎么办?

• 请确保项目源码 config.xml 中的 id 和此应用在 APICloud 网站控制台概览中显示的 appid 一致.
• 如果自己电脑上,曾经登录过其他账户,请尝试退出后重新登录.
• 如果是代码管理相关的操作有问题,请尝试在重新登录后,重新检出此应用来重建部分代码管理的svn/git权限认证信息.新检出的此应用,在重建svn/git认证信息后,可直接删除,继续用原来检出的项目管理代码.

五. WIFI 同步,手机和电脑无法连接,为什么?

• 检查下防火墙,是否禁用了 APICloud Studio2的网络连接.
• 检查下手机和电脑,是否连接的是同一个WIFI.
• 如果电脑上安装有其他的 APICloud 插件或工具,可尝试修改 Stuido2 的默认 WIFI 调试端口:

顶部菜单 --> APICloud --> 偏好设置 --> packages --> apicloud --> 设置 --> WIFI 真机同步调试端口 --> 修改后,需要重启 Studio 2

六. 本地代码时光机,如何使用?

本地代码时光机,仅对未提交到 APICloud 云端仓库的代码生效.在云端同步时,如果本地未做本地提交的代码,会尝试自动备份.默认最新的备份,总是在最上面,即索引为0. 当尝试从备份中获取代码时,可按一下操作执行:

1. 假定项目名称为 repoA.在电脑文件夹中,把 repoA 复制一份,记为 repoCopy0
2. Studio2 中,选择顶部菜单 --> 文件 --> 打开 --> repoCopy0,此时可以看到左侧树状图新添加项目 repoCopy0
3. 把 repoCopy0 中,除 .git 目录以外的文件,都删除
4. studio2 中,右键 repoCopy0 根目录 --> 代码管理 --> 本地代码时光机 --> 查看所有备份 --> 点击某个自己想要恢复的备份 --> 应用备份 即可.
5. 可以自行对比 repoCopy0 和 repoA 中文件的差异,根据需要把 repoCopy0 中的文件复制到 repoA 中.
6. 如果想尝试在多个备份中恢复,重复以上步骤即可.

七. 如何检出指定版本的代码?

历史版本代码,仅供对比或找回历史代码使用.获取方式是:

1. 在 APICloud 网站控制台 --> 代码,获取该应用的 svn 地址和密码
2. 使用 TortoiseSvn(适用于windows) 或 smartSvn(适用于 mac),检出代码,并查看所有版本的版本号, svn 的版本号是一个数字,比如 42.
3. 在 Studio2 中,选择顶部菜单 --> 代码检出 --> 检出APICloud 云端应用 --> 选择 app --> 选择本地保存位置 --> 输入在步骤2中,看到的版本号,回车确认,等待检出完成即可.

八. 如何下载完整版本的 APICloud Studio 2?

• APICloud Studio2的安装包,共分基础安装包,比如2.1.0版本,更新补丁包,包含补丁包和基础包的全量包.
• 以2.1.2为例, 2.1.2 全量包 = 2.1.0基础包 + 2.1.1补丁包 + 2.1.2补丁包
• 基础安装包和全量包,体积较大,一般在 100M 以上,适合初次是使用安装.补丁包,体积极小,一般在 0.1 M 左右,每次升级,Studio2会自动检测更新.
• 基础包,可以在 //www.apicloud.com/devtools 页面下载.
• 全量包,可以在 //docs.apicloud.com/Download/download 页面下载,即下载 "APICloud SDK For Studio".