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导航栏即可切换组件分类。

UI组件：将项目的UI设计页面中常见的各功能元素及其样式，进行了抽象封装而形成的组件，因其组件进行了一定程度的默认样式封装，在修改的自由度上会比系统组件稍差一些。

高级组件：在UI组件的基础上进行了更高级的封装，每一个高级组件都具备一个完整的独立功能，也可以看做是具备功能逻辑的UI组件。

系统组件：将页面元素进行了最基本的抽象，而形成的搭建页面的所需的最简基础组件，是构建页面的最小单元，同时也是具备最大自由度的组件，开发者可以基于当前组件进行最大自由度的修改，以满足自己的样式需求。

3.2 添加组件

鼠标左键选中组件，按住拖动到可视化工具的中间编辑区，即可完成组件添加。

3.2.1 添加UI组件-button按钮

3.2.2 添加高级组件-表单类-卡片单元格

3.2.3 添加系统组件-容器组件-view

PS: 关于容器组件的特殊说明：

容器组件是一类特殊的组件，它具备容纳其他组件元素的特性，相当于一个组合组件的外包装器。灵活使用对应的容器组件，可以使我们更加方便灵活地设计实现各种UI页面。所以在基于UI设计图进行页面的开发实现前，开发者一定要对当前的UI设计图进行结构分析，按照不同的结构布局，首先应拖拽对应结构的容器组件，完成结构布局，再逐次向容器内添加更加详细的功能组件。

3.3 组件修改

组件选中后的可视化页面功能示意图：

复制按钮：可以快速复制当前选中组件元素。

删除按钮：可以快速删除当前选中组件元素。

3.3.1 修改组件的样式

样式面板：可以修改当前选中组件的外观样式。

在可视化编辑区选中组件，在右侧的面板切换到样式面板，将样式面板内部对应的样式参数修改为自己设定的样式参数即可完成组件的样式修改，样式里的相关参数与CSS的样式相同，具备CSS基础的同学一看就能理解。

具体可见下图，我们以「系统组件」-「展示组件」中的button按钮组件为例，拖入组件-选中组件-切换功能面板-「样式」。

按截图修改组件的W(宽度)和H（高度），即可看见编辑器的组件的宽高尺寸同步变化。

PS: 样式修改后，工具会自动在代码页面生成对应的style区域内生成组件同名的class样式，如：