APICloud可视化开发新手图文教程

本教程主要面向初次使用APICloud Studio3 中可视化工具的新手开发者，旨在通过简单清晰的图文描述，让新手开发者快速掌握可视化工具的使用。

APICloud Studio3 可视化工具秉承低代码的设计理念，让开发者可以通过拖拽搭建积木的方式，所见即所得地快速构建生成应用静态页面，并支持同步实时生成AVM跨端代码，工具内置丰富的UI样式组件，节省开发者大量的页面构建时间，让开发者能够更加专注于应用业务逻辑的开发。

1、工具下载

下载最新版本的 APICloud Studio3

下载地址（在PC端打开）：https://www.a‍picloud.com/studio3

PS: 注册 APICloud 官方账户

2、激活进入可视化工具界面

2.1 启动APICloud Studio3，点击左侧面板的登录按钮登录APICloud账户。

PS: 还没有账户的同学，需要先点击「立即注册」按钮，注册一个账户，否则后面无法跟随教程进行项目的创建等操作。

2.2 创建项目

顶部菜单选择「项目」-「新建项目」打开新建项目界面，在界面填写各项内容，完成新项目的创建。

注意: 「使用AVM.js开发」该选项需要激活，否则无法使用可视化工具。

2.3 选择pages/main/main.stml页面文件，点击左上角的绿色图标(图中红色框选），即可进入可视化工具界面。

PS: 可视化工具是深度捆绑的AVM多端引擎，所以只有扩展名为.stml的文件，才具备可视化能力（即显示切换到可视化的按钮），其他格式的文件无法激活可视化界面。

2.4 可视化工具界面——功能区展示说明

红色区域：系统工具栏

浅蓝区域：资源管理器面板 顶部菜单栏「查看」-「外观」-「显示侧栏」，可以展开或关闭侧栏面板（Mac快捷键⌘B）

白色区域：便捷工具栏（点击左侧第一个绿色图标，可返回代码视图页面）

深蓝区域：组件面板区

绿色区域：页面编辑区

黄色区域：功能面板区

3、拖拽组件快速构建页面元素

3.1 组件分类概述

组件面板区内，官方内置了大量各种样式、各种功能的组件。当前组件基本分为三大类，即UI组件、高阶组件和系统组件，点击顶部的Tab导航栏即可切换组件分类。