上一期咱们为大家解说低代码在国内市场的以后现状以及 APICloud 可视化开发工具的组件类型和特点。置信大家对可视化编程有了一个整体的理解，那么明天带大家更进一步的应用组件。
下载开发工具
登录 APICloud 官网找到开发工具下载 www.apicloud.com/studio3，对应三种操作系统 Windows、MacOS、Linux，依据本人零碎抉择相应版本进行下载。
创立我的项目
关上编辑器后，首先点击左下角的“账户”按钮，登录本人的 APICloud 账号，这里没有账号的小伙伴们能够先注册一个。
注册登录之后就开始到创立我的项目了，咱们在这里左上角的地位点击我的项目，点击新建我的项目，这里输出项目名称，利用类型这里分为三种:
①MXApp 是应用 AVM 框架，能够实现一套代码同时生成 iOS、安卓小程序等多端利用；
②Native App 是原生利用，开发者能够应用规范的 HTML5 或者是 AVM 框架去进行开发，一套代码也能够同时生成安卓和 iOS 原生 APP，如果仅有 APP 的开发需要的话，就能够抉择 Native App;
③AppClip 是 iOS 轻利用；
文件目录及代码
这里抉择举荐的 MXApp 利用类型，上面抉择 HelloAPICloud 的空白利用模板，点击实现抉择以后我的项目保留的一个目录文件。创立好我的项目之后，咱们能够在左侧查看以后我的项目的目录构造。
┌─.bin/ stml 文件在本地编译的长期文件目录，勿提交云端
├─css/ 公共 css 款式目录
├─components/ [3.x 版本] 公共组件目录。该目录下 stml 文件仅被 pages 目录下页面援用，不独自编译
├─html/ [2.x 版本] html 页面目录
├─icon/ APP 桌面图标(本地调试用)
├─image/ 图片资源目录
├─launch/ APP 启动图片(本地调试用)
├─pages/ [3.x 版本] AVM.js 页面目录，即 stml 代码文件目录。对应文件将被编译为 js 或者小程序规范的代码片段
│ ├─main
│ │ └─main.stml main.stml 页面代码
├─res/ APP 相干的原生资源和配置等搁置目录
├─script/ 公共 JavaScript 脚本目录
├─wgt/ APP 子利用目录
└─config.xml 利用配置文件
复制代码
开发工具在真机同步或者实时预览等调试动作之前，编译器会剖析并编译 pages 目录下的 stml 文件，编译为对应的 js 代码至.bin 目录，之后再进行同步动作。pages 文件夹中是应用 AVM3.0 框架书写动态页面的文件夹，点击 pages 进入到以后页面文件，能够看到它是一个 stml 的后缀文件，与咱们传统的 html，它不同的是以后是应用了咱们 AVM 框架去进行编码，最终能够生成多端利用。
能够简略的将代码分为三局部，template 是页面的模板，通过标签文本的搭建，能够生成页面的骨架，script 是数据的绑定还有一些办法的调用以及前端的页面交互，style 就是页面的款式属性。
可视化界面
切换到可视化界面后，能够分为三个区域:
①组件纲要区，组建纲要群分为零碎组件、UI 组件和高级组件。
零碎组件是将页面元素进行了最根本的形象，而造成搭建页面的所须要最简略的根底组件，是构建页面元素的最小单元，同时也是具备了最大自由度的组件，开发者能够基于以后组件进行最大的自由度的批改，以满足本人的需要；
UI 组件是将我的项目的 UI 页面中常见的各种性能元素及其款式进行了形象的封装而造成的组件，因为其组件进行了肯定水平的默认款式的封装，所以在批改上自由度会比零碎组件略微差一些；
高级组件是针对于具体的利用场景，形象封装造成的，其目标性功能更强，可疾速搭建列表页详情页，能够依据本人不同的场景需要，抉择对应的组件。
②两头区域是画布编辑区域，咱们将左侧的组件拖拽到两头的画布编辑区域中去进行组合和排列，最终页面展现的成果是与画布区域展现的成果是完全一致的。
③最右侧是属性编辑区，咱们能够通过属性编辑对以后组件进行款式批改，注册事件以及批改组件的一些外部属性。
上手体验 首先在左侧拖拽一个 view 视图容器，鼠标长按 view 组件拖拽到两头的画布区域中，而后松开鼠标。能够看到在画布中有一个绿色的小框，这个就是生成 view 组件，接下来将以后容器组件中再拖拽一个 text 的文本组件。
接下来咱们再去批改组件，先批改以后文本里面的 view 容器组件。
选中 view 组件，而后在右侧的款式中找到高度选项填写高度 200px，这样它的高度变为了 200 像素；
接下来批改组件的背景色彩，找到上面的背景色彩，填充形式分为色彩填充、背景填充，色彩填充就是应用十六进制的色号填充；背景填充是让组件背景是一张图片。咱们这里抉择色彩填充，能够看到以后的微有容器变成一个天蓝色。
布局属性，除了批改尺寸大小之外，还能够批改它的主轴方向，主轴对齐、副轴对齐以及是否换行，这个就是咱们的 flex 布局，咱们能够通过这些配置项抉择它的对接形式。
批改元素内外边距，这里设置 margin-top 属性 20px，那他间隔顶部的间隔就变成了 20 像素，而后上面的定位以后元素是默认有一个绝对定位，而后能够应用绝对定位和相对定位，对以后元素进行地位的固定。
上面就是设置字体，咱们选中文本组件，批改它的字号，这里输出 24 像素，能够看到文本的字体变大，而后也能够批改它行高，还有它的自重也就是粗细，而后点击批改文本色彩。