二 APICloud可视化编程 _生活百科

上一期我们为大家讲解低代码在国内市场的当前现状以及APICloud可视化开发工具的组件类型和特点。相信大家对可视化编程有了一个整体的了解，那么今天带大家更进一步的使用组件。
【二 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页面中常见的各种功能元素及其样式进行了抽象的封装而形成的组件，因为其组件进行了一定程度的默认样式的封装，所以在修改上自由度会比系统组件稍微差一些；
高级组件是针对于具体的应用场景，抽象封装形成的，其目的性功能更强，可快速搭建列表页详情页，可以根据自己不同的场景需求，选择对应的组件。

②中间区域是画布编辑区域，我们将左侧的组件拖拽到中间的画布编辑区域中去进行组合和排列，最终页面展示的效果是与画布区域展示的效果是完全一致的。