上一期咱们为大家解说低代码在国内市场的以后现状以及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像素，能够看到文本的字体变大，而后也能够批改它行高，还有它的自重也就是粗细，而后点击批改文本色彩。