上一期我们讲解了国内低代码的现状以及APICloud可视化开发工具的组件类型和特点。相信大家对于可视化编程已经有了一个整体的认识，那么今天就带大家进一步去使用组件。下载开发工具登录APICloud官网找到开发工具下载www.apicloud.com/studio3，对应Windows、MacOS、Linux三种操作系统，根据自己的系统选择对应的版本下载。创建项目并打开编辑器后，首先点击左下角的“账户”按钮，登录您的APICloud账户。没有这里账号的可以先注册一个。注册登录后，我们就开始创建项目。我们这里点击左上角的项目，点击新建项目，这里输入项目名称，应用类型分为三种：①MXApp使用AVM框架，可以实现一组代码在同时支持iOS、Android小程序等多端应用；②NativeApp是原生应用，开发者可以使用标准的HTML5或者AVM框架进行开发，一套代码也可以同时生成Android和iOS原生APP，如果只是APP开发需要的话，可以选择NativeApp；③AppClip是一款iOS轻应用；文件目录及代码这里选择推荐的MXApp应用类型，下方选择HelloAPICloud的空白应用模板，点击Finish选择当前项目保存的目录文件。创建项目后，我们可以在左侧查看当前项目的目录结构。┌─.bin/本地编译stml文件的临时文件目录，不要提交到云端├─css/publiccssstyle目录├─components/[version3.x]publiccomponent目录。该目录下的stml文件仅供pages目录下的页面引用，不单独编译├─html/[2.x版本]html页面目录├─icon/APP桌面图标（用于本地调试）├─image/imageresource目录├─l??aunch/APP启动图片（本地调试用）├─pages/【3.x版】AVM.js页面目录，即stml代码文件目录。对应文件会被编译成js或小程序标准代码片段│├─main││└─main.stmlmain.stml页面代码├─res/APP相关原生资源和配置等放置目录├─script/publicJavaScriptScript目录├─wgt/APP子应用目录└─config.xml应用配置文件复制代码开发工具在调试实时同步或实时预览等动作前，编译器会分析并编译其中的stml文件pages目录编译成相应的js代码到.bin目录下，然后执行同步动作。pages文件夹是使用AVM3.0框架编写静态页面的文件夹。点击pages进入当前页面文件，可以看到是一个stml后缀的文件。与我们传统的html不同，它是目前使用的。我们的AVM框架用于编码，最终可以生成多终端应用。代码可以简单分为三部分。模板是页面的模板。通过标签文本的构建，可以生成页面的骨架。脚本就是数据绑定以及一些方法调用和前端页面的交互。style是页面样式的style属性。可视化界面切换到可视化界面后，可以分为三个区域：①组件大纲区，大纲组分为系统组件、UI组件和高级组件。系统组件是对页面元素最基本的抽象，构成了构建页面所需的最简单的基础组件。它是构建页面元素的最小单元，也是自由度最大的组件。开发者可以在现有组件的基础上，最大程度的自由修改，满足自己的需求；UI组件是对项目UI页面中常见的各种功能元素及其样式进行抽象封装而成的组件，由于其组件在一定程度上修改了封装的默认样式，因此修改的自由度会略有下降比系统组件差；高级组件是针对特定的应用场景抽象封装而成，目的性更强，可以快速构建列表页和详情页。根据自己不同的场景需求选择相应的组件。②中间区域是画布编辑区。我们将左侧的组件拖放到中间的画布编辑区进行组合排列。最终的页面显示效果和canvas区域显示效果完全一样。③最右边是属性编辑区，通过它我们可以修改当前组件的样式，注册事件，修改组件内部的一些属性。上手体验首先，在左侧拖动一个视图容器，按住视图组件拖动到中间的画布区域，然后松开鼠标。可以看到画布里面有一个绿色的小框，就是生成视图组件，然后在当前容器组件中拖放一个文本组件。接下来我们来修改组件，首先修改当前文本之外的视图容器组件。选中view组件，然后在右边的style中找到height选项填入200px的高度，这样它的高度就变成了200像素；然后修改组件的背景色，找到下面的背景色，填充方式分为颜色填充和背景填充，颜色填充是使用16进制的色号来填充；背景填充是将组件背景做成一张图片。我们这里选择颜色填充，可以看到当前的微容器变成了天蓝色。布局属性，除了可以修改尺寸外，还可以修改它的主轴方向、主轴对齐方式、副轴对齐方式、是否换行。这是我们的弹性布局。我们可以通过这些配置项来选择它的对接方式。修改元素的内外边距，这里设置margin-top属性为20px，那么到顶部的距离就变成了20像素，然后下面定位的当前元素默认有一个相对定位，然后就可以使用了相对定位和绝对定位，是固定当前元素的位置。下面是设置字体，我们选中文本组件，修改它的字体大小，这里输入24像素，可以看到文本的字体变大了，然后还可以修改它的行高，它的自weight是粗细，然后点击修改文字颜色。
