开发者社区> 模拟算法> 正文

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

简介: 作为一名APICloud 老用户,最近看到APICloud Studio 3 新增了可视化编辑工具,第一时间体验了下。
+关注继续查看

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


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

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

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

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


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


一、使用模板页面

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

1.png


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

2.png


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

3.png


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

4.png


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

5.png


二、组件分类介绍

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


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

6.png


三、使用系统组件举例

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


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

7.png

8.png


rich-text nodes 属性绑定变量:

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

9.png


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

10.png


弹出绑定界面,如下图:

11.png


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


绑定后代码界面如下:

12.png


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

13.png


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

14.png


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

15.png

16.png



四、经验总结

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

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


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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
27761 0
阿里云服务器ECS登录用户名是什么?系统不同默认账号也不同
阿里云服务器Windows系统默认用户名administrator,Linux镜像服务器用户名root
15319 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
19992 0
腾讯云服务器 设置ngxin + fastdfs +tomcat 开机自启动
在tomcat中新建一个可以启动的 .sh 脚本文件 /usr/local/tomcat7/bin/ export JAVA_HOME=/usr/local/java/jdk7 export PATH=$JAVA_HOME/bin/:$PATH export CLASSPATH=.
14861 0
阿里云服务器ECS远程登录用户名密码查询方法
阿里云服务器ECS远程连接登录输入用户名和密码,阿里云没有默认密码,如果购买时没设置需要先重置实例密码,Windows用户名是administrator,Linux账号是root,阿小云来详细说下阿里云服务器远程登录连接用户名和密码查询方法
22230 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
23528 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,云吞铺子总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系统盘、创建快照、配置安全组等操作如何登录ECS云服务器控制台? 1、先登录到阿里云ECS服务器控制台 2、点击顶部的“控制台” 3、通过左侧栏,切换到“云服务器ECS”即可,如下图所示 通过ECS控制台的远程连接来登录到云服务器 阿里云ECS云服务器自带远程连接功能,使用该功能可以登录到云服务器,简单且方便,如下图:点击“远程连接”,第一次连接会自动生成6位数字密码,输入密码即可登录到云服务器上。
36354 0
+关注
9
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载