APICloud可视化开发初体验

作为一名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布局原理，弄懂原理后，对于实现页面布局、元素定位很有帮助，能清晰的知道操作步骤。

更多相关文章