第1节：10分钟快速入门

第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工具功能强、门槛低的关键所在。