本教程次要面向首次应用 APICloud Studio3 中可视化工具的老手开发者，旨在通过简略清晰的图文形容，让老手开发者疾速把握可视化工具的应用。APICloud Studio3 可视化工具秉承低代码的设计理念，让开发者能够通过拖拽搭建积木的形式，所见即所得地疾速构建生成利用动态页面，并反对同步实时生成 AVM 跨端代码，工具内置丰盛的 UI 款式组件，节俭开发者大量的页面构建工夫，让开发者可能更加专一于利用业务逻辑的开发。1、工具下载下载最新版本的 APICloud Studio3 下载地址（在 PC 端关上）：https://www.apicloud.com/studio3PS: 注册 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 款式，如：<template name=’tpl’>…<button class=”button_2″> 按钮 </button>…<template name=’tpl’><style>….button_2 {width: 120px;height: 50px}…</style>3.3.1.1 对于布局构造款式参数的阐明
尺寸参数中 W 等同于 CSS 中的 width，H 等同于 CSS 中的 height，宽度和高度也反对间接输出数字，如下面截图的 W 输出 120 也是能够的。留神：W 参数和 H 参数比拟非凡，输出实现后，必须按下键盘回车键（Enter）才会失效，输入框失焦并不会让批改失效。主轴方向内的 4 个按钮等同于 CSS 中的：flex-direct: rowflex-direction: row-reverseflex-direction: columnflex-direction: column-reverse 主轴对齐内的 5 个按钮等同于 CSS 中的：justify-content: flex-startjustify-content: flex-endjustify-content: centerjustify-content: space-betweenjustify-content: space-around 副轴对齐内的 5 个按钮等同于 CSS 中的：align-items: flex-startalign-items: centeralign-items: flex-endalign-items: baselinealign-items: stretch 换行内的 3 个按钮等同于 CSS 中的：aflex-wrap: nowrapflex-wrap: wrapflex-wrap: wrap-reverse3.3.1.2 对于 margin、padding 的非凡阐明
图标：
3.3.1.3 对于款式成果的非凡阐明款式面板内的批改，可视化工具会在代码层同步生成同名的 class 款式，以此种形式放弃款式的同步。因为 class 款式是绑定在组件最外层的元素上，所以抉择组件后在款式面板上进行的批改，仅对组件最外层的款式失效。因为 UI 组件和高级组件本身就具备了肯定的款式设置，所以局部款式的批改在这两种组件上可能会生效，特此说明，请开发者留神。3.3.2 批改组件的属性在可视化编辑区选中组件，在右侧的面板切换到款式面板，将款式面板外部对应的款式参数批改为本人设定的款式参数即可实现组件的款式批改，具体可见下图。
3.3.2.1 通用属性通用属性是所有组件都具备的属性，依据不同组件封装时裸露的属性不同，各个组件的组件属性也不尽相同。id: string 类型，规定元素的惟一 id。例如：
在代码中对应为 id=”button-1″hidden: boolean 类型，设置元素的 hidden 属性的值，以后参数映射到代码层上就是 AVM 语法的 hidden。PS: hidden 次要是对立与 AVM 引擎版本的逻辑，以后版本，仅零碎组件反对该参数来管制显示和暗藏，UI 组件和高级组件尚不反对，所以当有需要去管制组件的显示或暗藏时，倡议优先应用上面的「条件显示」参数。例如：
在代码中对应为 hidden={false} 条件显示：应用表达式来管制组件是否显示，以后参数映射到代码层上就是 AVM 语法的 v -if，反对布尔值、表达式、函数和关联映射数据源。例如：
在代码中对应为 v -if=”false” 循环展现：以相似数组循环遍历的形式来展现复数的组件，反对关联映射页面数据源来遍历显示组件，以后参数映射到代码层上就是 AVM 语法的 v -for。例如：
在代码中对应为 v -for=”(item, index) in buttons”PS: 对于数据源的概念和应用，前面会讲到，本教程为老手教程，为了升高学习复杂度，这里先不开展。