作为APICloud的老用户，最近在APICloudStudio3中看到了新的可视化编辑工具，第一次体验。总体感觉还不错，有以下三个优点：1、新增模板页面，新建stml文件时可以选择。2、组件拖出的页面可以实时生成相应的前端代码，没有冗余代码，可以直接使用，也可以重新优化开发。因此，如果通过该工具对产品进行原型制作，生成的代码可以提供给开发直接使用。对于想要快速制作自己的app的技术初学者，本工具也可以作为入门工具使用。3.新增API管理工具，可以调试接口，生成请求代码文件。工具交互优化一下就好了，有些操作拖起来不智能。在使用的过程中，总结了一些经验，下面与大家分享。1、使用模板页面在pages目录上右击，选择【新建-stml文件】，选择注册页面模板，输入文件名，如下图：点击创建按钮，完成创建。可以看到register文件夹和register.stml文件是自动生成的，依赖的组件也自动生成，在components文件夹下非常方便快捷。点击“眼睛”图标可以预览页面，如下图：点击编辑图标可以打开可视化编辑区。可视化编辑区打开效果如下：二、组件分类介绍组件分为UI组件、高级组件、系统组件。系统组件是最基本的组件，封装粒度最小。UI组件是封装好的常用组件，默认样式，当然也可以调整样式。高级组件是比较复杂的组件，可以简单理解为页面级组件，比如购物车。3、以系统组件为例，组装一个简单的弹窗界面。先拖入一个富文本[rich-text]组件。并设置边距、高度h和背景颜色。设置边距时，单击图钉图标。图标变灰后，可以为上、下、左、右输入不同的边距值。如下图：绑定变量到富文本的nodes属性：需要先在代码中定义变量名，如下图：然后点击“编辑”按钮，打开可视化编辑界面，点击组件属性后面的图钉图标，弹出绑定界面，如下图：选中文本变量，点击“确定”按钮，关闭绑定弹出框。绑定后的代码界面如下：然后将text值修改为想要的文字。代码如下：接下来，拖动两个按钮，将它们放在弹出窗口的文本下方。注意，为了方便按钮的定位，可以先拖一个视图，然后在视图中添加两个按钮。如下图，在右侧的样式面板中，可以设置按钮的宽高，输入后按回车键生效。在事件面板中，可以给按钮绑定事件：四、经验总结1、先按照页面设计图规划几层视图。添加一层视图后，设置该层视图的样式。2.学习flex布局的原理。了解了原理之后，对于实现页面布局和元素定位很有帮助，操作步骤也能清楚的知道。以上就是我对APICloudStudio3可视化开发的初体验，相对于市面上其他的低代码开发平台，APICloud可以通过组件拖拽页面实时生成相应的前端代码，可以使用直接或重新优化开发，源代码中的修改也可以反馈到可视化编辑面板。这应该是App低代码开发者的最终形态吧，哈哈。欢迎有兴趣的朋友一起交流。
