第1节:10分钟快速入门
2024-04-05 15:10
使用须知
UIOTOS工具的功能十分强大,得益于独特的页面嵌套、属性继承、节点连线机制,让UI前端界面的定制开发十分便利,可以全零代码实现,包括复杂的业务逻辑。
灵活性与学习难度通常成正比,比如常规低代码、无代码工具在满足相关特性时,需用户相应地学习了解特定的使用规则。UIOTOS的特别之处,也在于功能强大性与易学易用性并存,用户只需要花几分钟了解简单的三条规则,就可以立即尝试上手使用:
- 一切都是组件
工具栏中的基础组件除了UI界面组件,还包括API接口组件、工具函数组件、收发器组件等。值得注意的是,页面也是组件!当工具栏中容器组件拖放到页面后,填入任意其他页面的地址,此时被嵌套的页面就变成当前页面的组件。
- 一切组件都由各种属性组成
属性构成了组件的全部功能。从作用上划分,通常有外观样式类属性(比如按钮的默认颜色/滑过颜色、尺寸位置等)、事件交互类属性(比如按钮的点击事件onClick等)、功能服务类属性(比如对话框弹窗显示-show、接口组件执行-exec、API接口请求-requesting等)。
- 一切属性都能通过连线操作赋值
页面中任意两个组件的属性之间,都能通过连线交互数据。比如组件A和B,连线由A的x属性指向B的y属性,当A的事件发生时,将触发自身x属性赋值给B的y属性。其中涉及到的属性,可以是自身的任何属性,也可以是内嵌页面继承过来的属性(如果其中任何一个是容器组件有内嵌页面)。
典型步骤
以按钮点击操作对话框、将按钮的显示文字传入弹窗显示为例,运行效果和从0到1的典型步骤如下:
步骤1:打开编辑器,在左上页面列表中选中节点(通常在专属空间下),在左下面板中,右键新建页面
步骤2:在新建页面中,通过顶部工具栏,找到按钮和对话框组件,并依次拖入到页面矩形区域内(底板)
步骤3:右键菜单选择交互连线(或快捷键ctrl + shift + 空格),启动连线,到按钮区域按下鼠标并且移动,直到对话框区域,松开鼠标将弹出被连线操作的对话框组件属性列表
步骤4:其中“show”属性用于对话框弹窗显示,"textArea>0>textArea-ui>a:value”属性为内嵌页面文本框继承过来的属性,用来显示默认对话框的文本内容。注意,每个属性都有对应自身属性的“选择”按钮
步骤5:对于“show”属性,点击选择,新弹出的单选属性列表中选择“onFormClick”(按钮的点击事件属性)并点击确定。注意:本窗口为按钮组件(连线连出)的属性列表!
步骤6:对于属性"textArea>0>textArea-ui>a:value”,选择关联按钮的“text”属性,即按钮的显示文字
步骤7:回到对话框的属性弹窗,点击确定,可以看到按钮和对话框之间多了两条连线
步骤8:ctrl + s保存页面,点击工具栏右上方的三角箭头图标,即可以打开页面运行预览
注意事项
- 首先,以上三条规则极为基础和重要,需要牢记。在使用过程中再根据需求去检索和了解各个组件具体属性的功能,这样就可以实现非常丰富的功能,达到与代码增量化开发复杂页面类似的效果。
- 其次,当前v1.8.0版对于各个组件的属性,在属性栏中并未做更多的分类管理, 显得有些多且杂,其实可以完全无需有畏惧感。如果说以上三条基础规则是英语中通用的基础语法,组件的属性集相当于单词,需要用时了解即可。
- 最后,极其简单且通用的使用规则,结合组件丰富强大的属性集合,就可以零代码实现各类丰富的前端应用,这也是UIOTOS工具功能强、门槛低的关键所在。