APICloud 的可视化开发性能，据说只有上手托拉拽就能够实现各种页面的开发，不须要写代码，能够大大减少开发的用时，次要是对老手十分敌对的。明天就来体验一下，看看是否用起码的工夫实现一个商城主页面的创立呢？
首先下载并装置开发工具 APICloud Studio 3。关上后创立我的项目：
而后找到 pages/main/main.stml 页面文件，点击左上角的绿色图标，就能够从代码开发切换成可视化开发的界面了。
因为可视化工具是深度捆绑的 AVM 多端引擎，所以只有扩大名为.stml 的文件，才有可视化开发的性能，才能够显示绿色的小按钮，其余格局的文件是没有方法进入可视化开发界面的。
之后咱们就进入到了可视化开发界面中，看一下右边的组件栏，一共分为三种组件。
UI 组件是将我的项目的 UI 设计页面中常见的各性能元素及其款式，进行了形象封装而造成的组件。蕴含各种罕用的小性能，按钮、列表、图片查看、文本输入框等等。
高级组件也能够看做是具备性能逻辑的 UI 组件。每一个高级组件都具备一个残缺的独立性能，也能够看做是具备性能逻辑的 UI 组件。高级组件中包含了带按钮性能的标题栏、计数器、列表、轮播图等等，款式和性能还是十分丰盛的，间接拖拽到两头的画布区域就能够生成了，能够得心应手的组合，还能够自在批改。
零碎组件是将页面元素进行了最根本的形象，而造成的搭建页面的所需的最简根底组件，是构建页面的最小单元，其中的组件都是最根底的小性能，比方 input 输入框、text 显示文本信息，form 表单等等。
之后开始进行商城主页的搭建，咱们来构想一下大抵的布局，首先要有一个首页的顶部导航栏，而后须要搜寻按钮，搜寻按钮上面须要一个轮播图组件，之后再上面就是商品分类和商品列表了。
首先咱们在高级组件中搜寻导航栏，找到一个简洁格调的，拖入到两头的画布区域中
从右侧属性设置栏能够批改导航栏的名字，咱们就批改为“商城首页”
接下来须要一个搜寻框钮来搜寻商品，找到搜寻组件，拖入到画布中，之后再找一个轮播图组件放到搜寻框的上面
在组件属性中能够设置轮播图想要播放的图片，以及轮播图的布局和尺寸等属性。
接下来咱们须要在高级组件中找到商品分类和商品列表，抉择分类列表和商品列表 - 纵向布局拖入到画布中
商品列表的各种属性也是能够本人进行设置的，十分不便吧
当初咱们的商城主页面就根本搭建好了，非常简单疾速吧。除本人搭建页面之外，APICloud Studio3 还提供了丰盛的模板页面，有详情页、登录页，购物车页面等等，咱们一起来看一下。
首先在 pages 中新建一个一个 stml 文件，因为方才说到可视化工具是深度捆绑的 AVM 多端引擎，所以只有扩大名为.stml 的文件，才有可视化开发的性能。
创立文件的时候提供了很多模板，咱们能够抉择一个电商下单页来看一下，名称为 order
创立实现，这时 pages 中就呈现了 order 页面，咱们关上 order 页面，再次点击切换可视化的绿色小箭头，下单页面就生成了，下单页面中的属性同样能够依据本人的需要进行批改。
只用了几分钟，就创立好了两个页面，可视化开发的性能真是很不便了。咱们能够在模拟器或者真机中看一下最终出现的成果，同步到模拟器或者真机的操作如果还有不太理解的同学，能够看一下 APICloud Studio3 的应用教程哦。