APICloud可视化开发初体验，这就是App低代码开发的最终形态？
作者：互联网
作为一名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,可视化,按钮,组件,代码,页面 来源： https://www.cnblogs.com/kaifacss/p/16374330.html