二 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就是页面的样式属性。