![0b9f9c37e5f89437eafac97b8561c0bb.png](https://i-blog.csdnimg.cn/blog_migrate/82e8b4270fae386dbe92906765a6d0be.png)
APICloud基于多年的技术积累及开发者生态,围绕前、后端核心技术进行了全新迭代升级,在前端技术上,全翻译式跨平台引擎Deep Engine3.0、兼容Vue / React语法特性的前端开发框架AVM、支持多终端统一的编译环境以及基于VSCode深度定制的开发工具APICloud Studio3.0成为开发者广泛关注的核心内容,本期将从APICloud Studio3.0入手,详细介绍Studio3的相关功能和使用流程。
APICloud Studio 3使用说明
APICloud Studio 3基于业界领先的代码编辑器-Vscode深度定制,可以帮助开发者快速轻松地构建多端应用,下面将详细介绍Studio3的相关功能和使用流程。
APICloud Studio 3下载地址(复制此链接PC端打开):
https://www.apicloud.com/studio3#downloadBtn
![101a0b9bb54ae3e5334f2731150fd15b.png](https://i-blog.csdnimg.cn/blog_migrate/47f4ce4e1ff0bf8b43fe19bba5aae3ee.jpeg)
(整体预览)
注意事项
- svn的使用说明
- mac版的studio3中使用的是mac本地自定的svn工具
- windows版的studio3中有内置的svn工具,如果本地没有安装svn,会使用内置的svn工具,如果本地有安装的svn工具并且安装了命令行选项(安装svn的是有控制选项,默认不安装),会使用本地安装的svn工具
- linux版的studio3需要手动安装svn工具(可以通过命令行安装)
- 用studio2导出的到本地的项目,先提交代码,再用studio3云端检出
- mac版运行的时候,studio3的存放位置不要放在Downloads文件夹下
- 在IDE上一些跟平台相关的操作,都需要验证登录。IDE可以和云端同时在线,但是多个ide是不可以用一个账号同时在线的。
- 更新需知
- mac上如果有更新提示,点击重启更新后,只需等待重启即可,无需手动重启,因为是全量更新,重启时需要等待大约30秒左右。
登录
界面右上角点击用户,弹出登录界面,输入用户名,密码登录,如图所示
![7d75322959fae22530edee49f489ecff.png](https://i-blog.csdnimg.cn/blog_migrate/1bb1e46fb565047ec2a0df803acdff52.jpeg)
创建项目
点击菜单栏项目-新建项目,在创建项目界面按照内容提示输入项目信息,如图所示
![a972cf0c33728b5cb2dd9bf815b01c6a.png](https://i-blog.csdnimg.cn/blog_migrate/1049798d1949a46806b187f2b05bcc66.jpeg)
创建项目的界面有一个复选框,用来选择项目的类型(App(必选), miniapp),创建完成后会根据所选类型,生成不同类型的目录,对应项目类型,如图所示
![be2829f334bde1b4d882f093ec00746c.png](https://i-blog.csdnimg.cn/blog_migrate/1a7286af6cca323f55ee040a7f275b8b.jpeg)
项目导入
菜单栏选择项目-->导入项目,会弹出项目来源的复选框
![bcbe9cf72aa54a5baa0578af9820ea11.png](https://i-blog.csdnimg.cn/blog_migrate/b80108dc72960139651f922dc2c23cf8.jpeg)
![c99d045f24d840267f2dc4e647a1a557.png](https://i-blog.csdnimg.cn/blog_migrate/64919f5d2372c93e0a70fc546f535f9d.jpeg)
- 本地导入: 导入时会校验导入的项目是否为apicloud项目
- 云端检出: 从apicloid后台导入项目
创建模版文件
studio3上可以创建一些模版文件,比如html,stml,js,css,json等
- 在项目根目录上右键,可以创建html,js,css,json文件
- 在pages目录上右键,可以创建stml,js,css文件
- 在res目录上右键,可以创建key.xml, info.plist, mainfest.xml等文件
stml编译
菜单栏--编译项目功能,会编译项目下的stml文件,编译结果查看控制台输出
![d6aa71a0e4121ce5c69f19f74eacb1f6.png](https://i-blog.csdnimg.cn/blog_migrate/09a1028484c224feadf1edc9e8aa5e6b.jpeg)
云编译
在App类文件夹上右键,选择云编译功能,打开云编译界面,做相应的操作, 如图所示
![8dfffc2221c5c90920921f44d3477229.png](https://i-blog.csdnimg.cn/blog_migrate/d26442199926190728aeac01940b26c9.jpeg)
自定义loader
在App类文件夹上右键,选择自定义loader功能,打开自定义loader界面,做相应的操作, 如图所示
![9c994ce2e7469b5717b360abb10748cf.png](https://i-blog.csdnimg.cn/blog_migrate/d3e1c820328a561a7d856b3116e2ee29.jpeg)
WiFi同步
- 查看WiFi同步的ip和端口号
- 顶部菜单 - 终端 - 设备列表,弹出复选框,选择通过WIFI连接新设备,查看ip
- 左侧功能栏,选择真机同步按钮,也可以弹出复选框,选择通过WIFI连接新设备,查看ip
- 注:连接时wifi设备要和studio3连接在同一个wifi下
![d8fe869c3da93f8ab39c1d2f3345bfe0.png](https://i-blog.csdnimg.cn/blog_migrate/03084523a521950a8d0ad73aa2a29abe.jpeg)
- 在项目名上右键,会弹出wifi全量和增量同步菜单,做相应的操作(同步所有wifi设备), 如图所示
![8dfffc2221c5c90920921f44d3477229.png](https://i-blog.csdnimg.cn/blog_migrate/d26442199926190728aeac01940b26c9.jpeg)
- 如有wifi设备连接时,顶部菜单 - 终端 - 设备列表,会弹出所连接的wifi设备,选择相应的设备进行同步
![288454947840cc37e22f7ee0d504c496.png](https://i-blog.csdnimg.cn/blog_migrate/fab18f52c8bd3ee13b4fe2aa8e754970.jpeg)
- 如有wifi设备连接时,选择左侧功能栏--真机同步按钮,会弹出所连接的wifi设备,选择相应的设备进行同步
- 注1:如果项目中有stml文件,studio3会先编译stml文件
- 注2:进行指定设备同步时,会有相关的标记做指示,如图所示:
![dd7170d4497a80e230a8173058fc689a.png](https://i-blog.csdnimg.cn/blog_migrate/6cc8422181c7e6be556659cef4b0db75.jpeg)
(1) 相关设备前有WIFI标记,表示该设备处于wifi连接状态;
(2) 相关设备前有USB标识,标识该设备处于usb连接状态;
(3) 同一个设备既可以处于wifi连接状态,也可以处于usb连接状态;进行相关操作时相关的状态
修改Wifi端口号
- 打开设置界面,选择常用设置,修改wifi端口号
![e041484a0dca9b7bd0b09880160767ad.png](https://i-blog.csdnimg.cn/blog_migrate/9e2aaf3c6117967621a1c4f6192c6f3d.jpeg)
USB同步
- 在项目名上右键,会弹出usb同步相关菜单,做相应的操作(同步所有usb设备), 如图所示
![8dfffc2221c5c90920921f44d3477229.png](https://i-blog.csdnimg.cn/blog_migrate/d26442199926190728aeac01940b26c9.jpeg)
- 如有usb设备连接时,顶部菜单 - 终端 - 设备列表,会弹出所连接的usb设备,选择相应的设备进行同步
![dd7170d4497a80e230a8173058fc689a.png](https://i-blog.csdnimg.cn/blog_migrate/6cc8422181c7e6be556659cef4b0db75.jpeg)
- 如有usb设备连接时,选择左侧功能栏--真机同步按钮,会弹出所连接的usb设备,选择相应的设备进行同步
- 注1:如果项目中有stml文件,studio3会先编译stml文件
- 注2:进行指定设备同步时,会有相关的标记做指示,如图所示:
(1) 相关设备前有WIFI标记,表示该设备处于wifi连接状态;
(2) 相关设备前有USB标识,标识该设备处于usb连接状态;
(3) 同一个设备既可以处于wifi连接状态,也可以处于usb连接状态;进行相关操作时相关的状态
![884a76fe62375e09edf4c5c730308c94.png](https://i-blog.csdnimg.cn/blog_migrate/bc44b9ad3d6f7c4c143e6dc0f86389cf.jpeg)
html和stml实时预览
在html或stml编辑页面,右键弹出实时预览菜单,预览html或stml页面(如果预览的是stml页面,studio3会先编译stml文件), 如图所示
![cea9d004209be2959f23dd67552f3c25.png](https://i-blog.csdnimg.cn/blog_migrate/8f318fc7ddfc975a84f17b693e4107e7.jpeg)
wifi真机预览
在html或stml编辑页面,右键弹出WiFi真机实时预览菜单,同步在wifi设备上预览html或stml页面(如果预览的是stml页面,studio3会先编译stml文件)
代码管理
studio3的代码管理依赖svn并基于vscode的源代码管理模块(如下图所示)实现
![ff51cd00a28d394dcb95855ebc083ae4.png](https://i-blog.csdnimg.cn/blog_migrate/5eb205d468c6865358508d87824dfd18.jpeg)
注:
- windows版内置了svn工具,如果开发过程中。内置的svn出现问题的时候,可以自行安装svn工具(安装的时候要把命令行选项勾选上),windows下是有默认安装路径的可以不用配置路径,如果自定义了安装路径,安装完成后在studio3中配置svn的路径(设置--首选项--扩展--svn--配置svn path),注意配置的路径是svn.exe具体路径。
- mac版svn用的是系统自带的svn工具
- linux版需要开发者自行安装svn工具
代码提交
- 在源码管理界面,在需要提交的文件上右键,选择Commit Selected,然后输入提交日志
![cc11133a74e673dfdf37071975ddaaf1.png](https://i-blog.csdnimg.cn/blog_migrate/cdb175fe6ced33583a597a8f3c6bffdf.jpeg)
- 在文件或文件夹上右键,点击 更新到云端
![2de26a61788ad93d94698d06543fd344.png](https://i-blog.csdnimg.cn/blog_migrate/e8c5234af2d6d86e61a2b6e4120168ef.jpeg)
更新代码
1、在源码管理界面,点击更多按钮,选择Update,更新项目
![c54935dd2032736c523ac82919626984.png](https://i-blog.csdnimg.cn/blog_migrate/2fa90e58b859f7b99ee005d174f642f1.jpeg)
2、打开命令面板,输入svn:update,有两个选项,(1)Update selected:更新代码编辑页面打开的文件 (2) Update:更新项目
![23912abddc7f1a18e2beb0d566c12fd0.png](https://i-blog.csdnimg.cn/blog_migrate/08ba30f764831928b2d9cfb322b6a1d1.jpeg)
3、编辑器左下角选择更新按钮,更新项目
![c2f034207e6801446a58d311f10c139d.png](https://i-blog.csdnimg.cn/blog_migrate/12ebf746e888fddeab2d1d187f230b84.jpeg)
4、在文件或文件夹上右键,点击 从云端更新
![745165d580bae548b590f2a535de8bdd.png](https://i-blog.csdnimg.cn/blog_migrate/a2b6620c9c53075c4ddfa8b6b9f6918e.jpeg)
查看日志
在提交代码之前想要查看文件的提交日志,可以在文件上右键-->显示日志,可以列出这个文件之前的提交日志,如下图所示
![de73b4838318318576156fc5ecfbbf5e.png](https://i-blog.csdnimg.cn/blog_migrate/a23ca1137985820c9ed3b59455324e0c.jpeg)
代码提示
studio3采用两种方式的代码提示
1、代码片段: studio3内置了api对象和几乎所有平台模块的代码片段
![b87b85740588d2fcf99ccc3f4afc981a.png](https://i-blog.csdnimg.cn/blog_migrate/524ef777565d4f06486da9690f6b6441.jpeg)
![ef7976decc7d0a9cbe0f451af94540a7.png](https://i-blog.csdnimg.cn/blog_migrate/0109442a3d9fbfb3ed415f1821068a3b.jpeg)
- 模块代码片段输入方式:输入 模块名.接口名 会有相关的代码提示,选择相应的接口, 回车即可完成一段代码的自动输入
- api对象下的代码片段输入方式:直接输入api下的接口名,选择相应的接口名,回车即可完成一段代码的自动输入
2、js代码提示: studio3将api对象和几乎所有平台模块都做了js封装
![dca3a30434eaac9995ef1aa39b11f41c.png](https://i-blog.csdnimg.cn/blog_migrate/b3da37ee9eee0e2bf12d90bd86f69445.jpeg)
![3c2a35c06dc11c732d1436c5bf01427c.png](https://i-blog.csdnimg.cn/blog_migrate/d245b36a9c906d4fe7a4a2a06a151a20.jpeg)
- 输入对象名,即可调出这个对象下的所有接口,选择相应的接口,回车,输入左括弧,自动完成右括弧的输入,同时,如果这个接口有参数时,也可提示这个接口的参数
中英文切换
代开命令面板,输入:Configure Display Language,点击,选择相关的语言
![f1285fc520db487da368cc12a1a9721f.png](https://i-blog.csdnimg.cn/blog_migrate/dc402b040b7dc6901bc32e88cae9f685.jpeg)
![b130cd7499ef5505b666d5c197a6ffbc.png](https://i-blog.csdnimg.cn/blog_migrate/e1275cbbd209160b0c7ac8fc1f16f515.jpeg)
以上便是APICloud Studio3相关功能使用流程介绍,APICloud Studio3支持在Windows、Mac和Linux系统上运行,在一个工具里即可完成开发工作的全生命周期流程,比如项目管理、代码编写、调试、预览、代码管理、编译发布等。