共计 4137 个字符，预计需要花费 11 分钟才能阅读完成。
本教程次要面向首次应用 APICloud Studio3 中可视化工具的老手开发者，旨在通过简略清晰的图文形容，让老手开发者疾速把握可视化工具的应用。
APICloud Studio3 可视化工具秉承低代码的设计理念，让开发者能够通过拖拽搭建积木的形式，所见即所得地疾速构建生成利用动态页面，并反对同步实时生成 AVM 跨端代码，工具内置丰盛的 UI 款式组件，节俭开发者大量的页面构建工夫，让开发者可能更加专一于利用业务逻辑的开发。
1、工具下载
下载最新版本的 APICloud Studio3
下载地址（在 PC 端关上）：https://www.apicloud.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 款式，如：
<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: row
flex-direction: row-reverse
flex-direction: column
flex-direction: column-reverse
主轴对齐内的 5 个按钮等同于 CSS 中的：
justify-content: flex-start
justify-content: flex-end
justify-content: center
justify-content: space-between
justify-content: space-around
副轴对齐内的 5 个按钮等同于 CSS 中的：
align-items: flex-start
align-items: center
align-items: flex-end
align-items: baseline
align-items: stretch
换行内的 3 个按钮等同于 CSS 中的：
aflex-wrap: nowrap
flex-wrap: wrap
flex-wrap: wrap-reverse
3.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: 对于数据源的概念和应用，前面会讲到，本教程为老手教程，为了升高学习复杂度，这里先不开展。
3.3.2.2 组件属性
只有以后组件才具备的属性，依据不同组件封装时裸露的属性不同，各个组件的组件属性也不尽相同。
3.3.2.3 数据集属性
以后参数映射到代码层上就是 AVM 语法的 data-*，即页面 dom 元素的 dataset 属性。
下图是 AVM 开发文档中的形容信息：
例如：
在代码中对应为 data-status=”selected”
3.3.3 给组件增加事件
在可视化编辑区选中组件，在右侧的面板切换到事件面板，具体可见下图：
点击「增加事件」->「勾选事件」->「确定」：
增加事件后，增加事件对应的执行函数，能够抉择已存在的函数办法进行绑定，也能够自行创立新的函数。
「自建函数」面板
函数名称：就是定义一个 function 函数的函数名。
增加动作：这里是官网内置的 2 个快捷跳转页面的函数办法，抉择后，对应的函数办法会主动增加到代码片段区内。
代码片段：这里填写的是函数外部的逻辑代码。
创立实现后，记得进行关联绑定：
方才组件绑定的事件，在代码页面的组件元素上，实际上的映射代码为 onclick={this.showTip}
这里新创建和已有的函数，都是在以后页面的 methods 下的函数办法，咱们切换代码界面，能够查看方才增加的函数办法。
PS: 明确了事件的原理，咱们就应该晓得其实不必在可视化工具里创立新函数，在代码页面里的 methods 间接编写函数程代码，而后在可视化界面进行绑定也是能够的。
4、数据源类型的阐明
咱们在很多面板属性中进行内容值写入时，会常常发现输入框右侧有一个🔗链接小图标。
如属性面板 - 事件中点击「通用属性」内「循环展现」行内右侧的🔗链接小图标。
变量：以后分组下，映射的是页面 data 中的变量值，如下面截图中的 text 和 year。
PS: 图中显示的变量内容，即是以后页面中 data 中保留的变量默认值（见截图）。
JS 表达式：切换 JS 表达式，反对应用代码表达式的形式自定义属性值。
解除绑定按钮，对于曾经绑定变量值的元素，能够点击解除关联