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

总体感觉还行，有以下三大优点：

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

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

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

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

一、使用模板页面

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

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

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

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

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

二、组件分类介绍

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

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

三、使用系统组件举例

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

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

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

需要先在代码里定义变量名，如下图：

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

弹出绑定界面，如下图：

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

绑定后代码界面如下：

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

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

在事件面板，可以给按钮绑定事件：

四、经验总结

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

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

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

App低代码开发的最终形态？APICloud可视化开发初体验相关推荐

ganymed ssh-2 for java,SSH客户端开发开源组件Ganymed SSH-2 for Java初体验，ganymedssh-2
SSH客户端开发开源组件Ganymed SSH-2 for Java初体验,ganymedssh-2 1.Ganymed SSH-2 for Java Ganymed SSH-2 for Java是一 ...
基于低代码平台（Low Code Platform）开发中小企业信息化项目
前言:中小企业信息化需求强烈,对于开发中小企业信息化项目的软件工作和程序员来说,如何根据中小企业的特点,快速理解其信息化项目的需求并及时交付项目,是一个值得关注和研讨的话题. 最近几年来,随着全球经济 ...
APICloud可视化开发新手图文教程
本教程主要面向初次使用APICloud Studio3 中可视化工具的新手开发者,旨在通过简单清晰的图文描述,让新手开发者快速掌握可视化工具的使用. APICloud Studio3 可视化工具秉承低 ...
新手使用APICloud可视化开发搭建商城主页
APICloud的可视化开发功能,听说只要上手托拉拽就可以完成各种页面的开发,不需要写代码,可以大大减少开发的用时,主要是对新手非常友好的.今天就来体验一下,看看能否用最少的时间完成一个商城主页面的创 ...
Forrester云原生开发者洞察白皮书，低代码概念缔造者又提出新的开发范式
简介: 云原生时代的到来为开发者群体带来了前所未有的机遇,让开发者可以更加专注业务价值创造与创新,并使得人人成为开发者成为现实.广大开发者如何转型成为云原生开发者?运维等专业人员在云原生时代如何避免边 ...
首发｜Forrester云原生开发者洞察白皮书，低代码概念缔造者又提出新的开发范式
云原生时代的到来为开发者群体带来了前所未有的机遇,让开发者可以更加专注业务价值创造与创新,并使得人人成为开发者成为现实.广大开发者如何转型成为云原生开发者?运维等专业人员在云原生时代如何避免边缘化的囧 ...
01、C#开发WPS（金山办公软件）——初体验
目前(2015),新版本的WPS的开发文档已经使用V9版本.笔者也是最近开始学习用C#开发WPS,这里的开发不是针对插件,而是用代码操作WPS.下面跟随我一起开始进行开发吧. 一.开发环境 1.开发的 ...
SSH客户端开发开源组件Ganymed SSH-2 for Java初体验
1.Ganymed SSH-2 for Java Ganymed SSH-2 for Java是一个纯Java实现的SHH2库. 看官方介绍: Ganymed SSH-2 for Java is a ...
Android开发学习之路--网络编程之初体验
一般手机都是需要上网的,一般我们的浏览器就是个webview.这里简单实现下下功能,先编写Android的layout布局: <?xml version="1.0" enco ...
HTML5APP商业开发实战教程——基于WeX5可视化开发平台
这是我的第一个博客,先简单介绍一下自己吧.本人男,年龄23,目前是大二在校学生(重点单身,单身,单身).对于WeX5,我也是初学者用了不到半年时间.刚刚开始用各种问题,麻烦频繁出现.而且相信刚刚接触到 ...

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

一、使用模板页面

二、组件分类介绍

三、使用系统组件举例

四、经验总结

App低代码开发的最终形态？APICloud可视化开发初体验相关推荐

最新文章

热门文章