共计 1345 个字符,预计需要花费 4 分钟才能阅读完成。
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 的应用教程哦。