作为一名APICloud 老用户,最近看到APICloud Studio 3 新增了可视化编辑工具,第一时间体验了下。


总体感觉还行,有以下三大优点:

1、新增了模板页面,新建stml文件时可以选择。

2、通过组件拖拽出的页面可实时生成对应的前端代码,而且是没有冗余的代码,可直接使用,或进行再优化开发。因此如果产品通过这个工具来设计原型,生成的代码,可提供给开发直接使用。对于技术小白,又想快速做出自己的app,也可以使用此工具做为入门工具。

3、新增了API管理工具,可以调试接口,生成请求代码文件。工具的交互方面能再优化下就好了,有些操作拖动不智能。


在使用过程中,总结一些经验,下面给大家分享一下。


一、使用模板页面

在pages目录上右键,选择【新建-stml文件】,选择注册页模板,输入文件名,如下图:

App低代码开发的最终形态?APICloud可视化开发初体验_拖拽


点击创建按钮,创建完成。可以看到自动生成了register文件夹和register.stml 文件,依赖的组件也自动生成了,在components文件夹下,这一点很方便快捷。

App低代码开发的最终形态?APICloud可视化开发初体验_APICloud_02


点击“眼睛”图标可以预览页面,如下图:

App低代码开发的最终形态?APICloud可视化开发初体验_App开发_03


点击 编辑图标 可以打开可视化编辑区。

App低代码开发的最终形态?APICloud可视化开发初体验_App开发_04


打开可视化编辑区的效果如下图:

App低代码开发的最终形态?APICloud可视化开发初体验_低代码_05


二、组件分类介绍

组件分为UI组件、高级组件、系统组件。


系统组件是最基本,封装粒度最小的组件。UI 组件是封装的较为常用的带有默认样式的组件,当然样式也可以调整。高级组件是更复杂的组件,可以简单理解为页面级组件,比如一个购物车。

App低代码开发的最终形态?APICloud可视化开发初体验_拖拽_06


三、使用系统组件举例

组装一个简单的弹窗界面。


先拖入一个富文本【rich-text】组件。并设置margin,高度h和背景颜色。设置margin时,点击别针图标,图标变灰色后,可以输入上下左右不同的margin值。如下图:

App低代码开发的最终形态?APICloud可视化开发初体验_低代码_07

App低代码开发的最终形态?APICloud可视化开发初体验_APICloud_08


给rich-text 的nodes 属性绑定变量:

需要先在代码里定义变量名,如下图:

App低代码开发的最终形态?APICloud可视化开发初体验_低代码_09


然后点击“编辑”按钮打开可视化编辑界面,点击组件属性后的别针图标

App低代码开发的最终形态?APICloud可视化开发初体验_App开发_10


弹出绑定界面,如下图:

App低代码开发的最终形态?APICloud可视化开发初体验_可视化_11


选中text变量,点“确定”按钮,然后关闭绑定弹框。


绑定后代码界面如下:

App低代码开发的最终形态?APICloud可视化开发初体验_可视化_12


然后修改text 值为需要的文本即可。代码如下:

App低代码开发的最终形态?APICloud可视化开发初体验_可视化_13


下面再拖两个按钮放到弹窗文字下面,注意为了方便按钮的定位,可以先拖一个view, 然后向view里加两个按钮。如下图,在右侧样式面板,可以设置按钮的宽和高,输入后按回车键生效。

App低代码开发的最终形态?APICloud可视化开发初体验_拖拽_14


在事件面板,可以给按钮绑定事件:

App低代码开发的最终形态?APICloud可视化开发初体验_可视化_15

App低代码开发的最终形态?APICloud可视化开发初体验_APICloud_16


四、经验总结

1、先根据页面设计图,规划好几层view。添加一层view后,设置好这层view的样式。

2、学习flex布局原理,弄懂原理后,对于实现页面布局、元素定位很有帮助,能清晰的知道操作步骤。


以上就是我初步体验APICloud Studio 3可视化开发的经验,相较于市面上其他低代码开发平台,使用APICloud通过组件拖拽出的页面可实时生成对应的前端代码,可直接使用,或进行再优化开发,在源代码中的修改也可反馈到可视化编辑面板中。这应该就是App低代码开发者最终形态了吧,哈哈。欢迎感兴趣的朋友一起交流。