UIOTOS文档： 连线（高级篇） | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等

合集 - UIOTOS文档（自动爬取）(49)
1.UIOTOS文档： 开始 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2.UIOTOS文档：入门 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等3.UIOTOS文档： 常规（基础篇） | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等4.UIOTOS文档： 嵌套（基础篇） | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等5.UIOTOS文档： 布局 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等6.UIOTOS文档： 常规（高级篇） | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等
7.UIOTOS文档： 连线（高级篇） | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等
8.UIOTOS文档： 嵌套（高级篇） | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等9.UIOTOS文档： 组件| 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等10.UIOTOS文档： 公共 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等11.UIOTOS文档： 绘图 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等12.UIOTOS文档： 图表 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等13.UIOTOS文档： 表单 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等14.UIOTOS文档： 容器 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等15.UIOTOS文档： 函数 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等16.UIOTOS文档： 通信 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等17.UIOTOS文档： 视频 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等18.UIOTOS文档： 其他 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等19.UIOTOS文档： 导出部署与集成 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等20.UIOTOS 示例1：Hello World | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等21.UIOTOS文档： 随机颜色显示 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等22.UIOTOS文档： 扇叶（图标）旋转 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等23.UIOTOS文档： 上下层页面交互 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等24.UIOTOS 示例2：按钮弹窗显示文本| 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等25.UIOTOS 初体验：指定沿轨迹运动 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等26.UIOTOS 示例3：视频选择播放| 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等27.UIOTOS 初体验：长页面滑动| 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等28.UIOTOS 初体验：计算器按键 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等29.UIOTOS 示例4：扩展按钮（文字可切换）| 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等30.UIOTOS 示例5：扩展按钮（图标可切换）| 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等31.UIOTOS 示例6：扩展按钮组（增加属性）| 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等32.UIOTOS 示例7：继承内嵌页事件并使用 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等33.示例8：数据的解析提取 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等34.UIOTOS 示例9：接口数据给树表格 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等35.UIOTOS 示例10：表单请求接口 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等36.UIOTOS 示例11：表单数据双向读写 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等37.UIOTOS 示例12：接口查询曲线展示 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等38.UIOTOS文档：初体验：不规则按钮 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dat39.UIOTOS文档：示例13：MQTT数据给图形 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dat40.最新零代码，套娃一样开发IoT应用！41.前端零代码，套娃一样开发界面！42.【开源】前端“神器”，开发界面无代码！43.2024强烈推荐8个精选的中后台前端低代码开源框架44.一款能开发上位机和后台系统的WEB组态！45.物联网平台市场崩了吗？46.可视化拖拉拽？过时了！47.前端组态化 3：矢量绘图与UI界面无缝融合48.一觉醒来，Qt、C#界面开发的天塌了？49.UIOTOS示例：自定义弹窗输出表单数据 | 前端低代码 前端零代码 web组态 无代码 amis goview dataroom 界面嵌套 蓝图连线 nodered
收起

注意:本文为自动抓取供AI学习!!格式未经调整，点击查看原文档!

连线（高级篇）

 

说明

在

连线（基础篇）

篇中，介绍了连线的基本原理和操作，本进阶篇继续讲解连线的高级特性，主要包括连线属性、赋值解析、事件触发、执行顺序。基于这些特性，能够实现如下类似的复杂功能：

 

示例：对象数组字段提取合并成新的数组输出。

输入对象数组，其中对象元素有固定的startTime和endTime两个字段，现在要把这两个字段的时间，合成一个字符串，中间用‘~’隔开，形成新的字符串数组输出。

 

原理

在

连线（基础篇）

中原理的基础上继续。组件之间的每条连线，主要对应5项配置：

 

来源组件.来源属性 —（解析赋值）→ 目标组件.目标属性​

 

 

此外，还有触发事件配置项，保持默认即可，较少使用。将对应的事件函数作为来源属性，可以达到一样的效果。

连线的完整用途，由浅入深可罗列如下：

传递固定值给目标组件属性。

比如按钮点击，触发对话框弹窗（给开关类型的弹窗属性，固定传值true）。

将来源组件（变动的）属性值，传递给目标组件属性。

比如文本框的值内容属性，关联传递给对话框的内容，用于弹窗时显示。

将来源组件的属性值，经过解析提取，再传递给目标组件属性。

比如API接口组件，关联自身返回响应属性，解析返回对象数据的code字段，给到对话框弹窗输出。

默认情况下，来源组件所有事件都会触发连线执行，可选择指定事件触发。

比如输入框组件，连线操作对话框弹窗（比如确认操作），希望敲入回车时才弹窗，输入时不弹窗，此时就需要为连线设置特定的触发事件。

多条连线，可分别关联不同属性、解析提取，传递给目标组件的不同属性。

比如文本框传值给对话框，且触发对话框弹窗。第一条连线，由文本框的值内容指向对话框的内容；第二条连线由文本框的回车时事件，指向对话框的弹窗属性。

其中文本框的值内容可以是对象，对应连线的赋值解析，能够提取对象中某个字段的值，再传给对话框。

多条连线，可以不区分事件默认一并执行，也可以分别指定不同事件触发。多条连线，同一事件触发由默认按顺序依次同步执行，也可以选择异步。一条连线，不关联属性，可获得包含所有属性在内的表单数据。一条连线，不操作属性，即可通过表单对容器内多个属性赋值。

以上用途，不逐一展开，在不同章节内容分别有体现。以下从4个方面介绍原理机制，正是这些，支撑了上述用途和特性。

连线属性

作用

在基础篇原理中有提到，交互连线的本质，是一个属性对另一个属性赋值。这里涉及到一个重要概念：属性读写。

对目标组件的属性赋值，是写操作；获取来源组件的属性值，是读操作。因此，在属性分类中，也专门将属性统一分为可读写、只读、只写三类。

特例

来源属性为空或事件函数时，连线输出表单对象。

组件对外连线，不关联自身任何属性时，将传出由属性标识名和属性值构成的key-value表单对象（什么是表单属性，有什么用处？）。

注意：所有组件中，唯一只有API组件，对外连线操这时，不关联任何属性，传出的不是组件的表单对象，而是接口实际返回的数据！如下所示：

 

 

（其他相关内容：关联事件（属性）什么时候可以省？）

目标属性为开关类型时，传入对象相当于开（true）。

对话框的弹窗（show）、API组件的执行请求（requesting）、工具函数的执行（exec）等都是开关（布尔）类型属性。

连线操作时，可以不用关联属性，即来源属性为空，此时传出表单对象操作开关类型属性，等同于传入true。

通常关联事件函数来，尤其是内嵌页面的组件。这样可以指定事件来触发操作，并且始终能确保被当作true来传入。

事件函数一般属于读写类型，可用来连线操作或关联。
  • 连线操作事件函数时，相当于触发对方函数执行。

如下所示，上面按钮直接连线可触发弹窗，下面按钮连线操作上面按钮，关联自身点击事件时，也能间接触发弹窗。

​

 

 

  • 连线关联事件函数时，相当于用指定事件触发连线执行。

这个操作非常常见，尤其时当组件有多个事件函数时，需要指定事件触发连线执行，通常用其作为关联属性即可！

注意：在容器组件中，继承过来的事件函数，关联对外操作，是唯一建议的方式！

尽管可以勾选容器组件的使用内嵌事件

，但这样，会导致内嵌所有组件的所有事件都会触发连线执行，也会影响页面运行速度。

 

 

解析赋值

每条连线都能单独做数据解析，可提取任意JSON对象字段值，下面将具体介绍使用机制。

注意：除了数据解析，还可用于设置常数、数组索引赋值、获取数组索引值等，详见公共属性-解析赋值。

使用

每条连线都有默认传出的原始数据，用于被解析提取。

默认为当前连线的来源属性值。此外，如果未关联（即没有来源属性）或关联的是事件函数属性，那么就是来源组件的表单对象（参见未关联或关联事件时，将输出表单）。

解析赋值字符串用.隔开，用于指定字段或数组索引。
  • 组装解析字符串
  • 遇到对象{}，那么按照字段名称用点.字段名来提取，给定数据：
{
  "a":23,
  "b":34,
  "c":56,
  "hello":"uiotos"
}

可以用"a"来提取23，用"hello"来提取uiotos。

  • 遇到数组[]，按照顺序取0、1、2、3，那么按照字段名称用点.数字来提取。比如给定数据：
[
  "a",
  "b",
  "c",
  "hello",
  "uiotos"
]

为了提取第元素值"a"，直接用"0"，用"3"提取"hello"。

  • 对象开头不需要点"."，所以上面两条示例中提取数据并没有看到".xxx"形式。
  • 不论是数组[]还是对象{}，任意多层嵌套组合的复杂格式，都按照上面3点规则进行。
  • 典型数据示例
[
  "a":{
    "b":3
  },
  "c": [
    "d", 
    "e", 
    {
      "f":4 
    }
  ]
]
  • 解析过程说明
  • 通过"0"获得：
"a":{
    "b":3
}
  • 通过"0.a"获得：
{
    "b":3
}
  • 通过"0.a.b"获得值3。
  • 通过"1.c"获得：
 [ 
     "d", 
     "e", 
     {
       "f":4
     }
   ]
  • 通过"1.c.0"获得值"d"。
  • 通过"1.3"获得：
{
  "f":4
}
  • 通过"1.3.f"获得值4。

特例

特殊情况处理（解析字符串直接作为固定值输出）。
  1. 原始数据不是对象时

原始数据并非对象时（此时为整数、字符串、数字等基本类型），直接将解析赋值字符串输出。此时，相当于设置固定值输出。

  1. 解析提取失败时

原始数据为对象，但是按照解析规则未提取到时，也直接将赋值解析字符串作为固定值输出。

  1. 解析赋值是对象时

如果设置的解析赋值，并非字符串，而是数组或对象，不论关联属性是什么，有没有关联，都将固定输出这个解析赋值对象本身！

其中，在关联了事件时，相当于是事件触发时，输出解析赋值处配置的固定对象或数组。此时，跟组件的表单对象无关。

连线赋值解析实践示例：

事件触发

用途

上述原理中有提到，每条连线有对应的触发属性组，如下所示。作用与连线关联事件属性时基本一致，较少使用，通常用关联事件代替就好。通常可以忽略，默认所有事件都会触发，由关联事件属性来筛选具体哪个事件触发连线。

  • 连线事件后面下划线后的数字，对应索引为几的连线事件配置
  • 事件配置是多选，默认*，标识全部事件都可以触发。
  • 如果连线关联的事件函数属性，那么以关联的事件触发为准，即便此处配置为全部通过，或者指定了其他事件。

 

 

 

 

注意：v3.0起，已经将触发属性组，放到了专业模式下（参见属性分级显示），默认不可见。

补充

连线传递属性值的分为被动和主动两种方式，当前介绍的为被动，即连线操作依赖于来源组件的事件触发。

UIOTOS提供了函数组件获取组件属性值（formValues），支持对连入其输入（组）属性的连线，可以在函数执行时触发，不再依赖组件的事件。该方式非常适合用于获取多个不同容器或组件，构成完整表单数据。

执行顺序

索引顺序

组件“横向”对外有多条连线时，执行顺序通常按照索引顺序，如下所示：

先后弹出窗口0、1、2、3，因为后弹出的叠在先弹出的窗口之上，因此关闭时可以看到倒序的窗口。

 

 

深度优先

连续“纵向”多级连线时，通常是逐级深度优先而非广度优先，如下所示：

连线不同索引的颜色通常都固定，从颜色也可以迅速判断执行顺序。下面连线逻辑按照从执行1到执行7的顺序执行。

注意：工具函数有延时执行属性

，大于0时，连线执行将由深度优先的同步执行，改成广度优先的异步执行。

 

 

 

连线代理

对于容器组件，关联内嵌属性对外连线操作时，触发执行通常是通过关联内嵌事件实现的（详见用内嵌事件（useInnerEventsAll））。

连线关联事件属性，传递的是表单数据，需要经过解析才能提取到需要的属性值（参见来源属性为空或事件函数时，连线输出表单对象），而容器因为有内嵌了多个组件的页面，对外连线操作时，通常会连续多根连线传递属性值。

为了方便，这里提供连线代理机制，实现容器对外的连续多根连线，其触发可以由最近一条关联内嵌事件的连线触发时一并执行。具体使用场景和规则如下：

  1. 前提

内嵌页面有事件可用（比如有内嵌按钮组件），且容器组件未勾选用内嵌事件（useInnerEventsAll）属性。

  1. 场景

连续有多根连线对外操作，关联的都是内嵌属性，并且至少一个关联的是内嵌事件属性。如下所示：

  • 索引0：内嵌按钮点击事件 → 上层对话框弹窗

 

 

  • 索引1：内嵌按钮文字 → 上层对话框标题

 

 

索引2：内嵌文本框值内容 → 上层对话框内容

 

 

此时若直接运行，发现能够触发上层弹窗，但是索引0和1的连线并没有执行传递属性值过去！

 

 

  1. 规则
  • 将容器所有对外连线，以关联了内嵌事件的作为分隔点，这样将所有连线隔成了多个小组。

上面示例中，只有索引为0的连线关联了内嵌事件，如下所示：

 

 

  • 作为分割点的连线，本身划归到小组的末尾。因此：
  • 存在小组内只有节点自身的情况。

比如上面示例中，索引0的连线关联了内嵌事件，就属于分隔点。连续两条连线都关联了内嵌事件时，后一条连线的分组也只有自身。

  • 还存在小组末尾没有分隔点连线的情况。

比如上面索引1、2的连线，其后面没有关联事件的其他连线。

示例中连线分为0、1和2两个小组，如下所示：

 

 

  • 所有小组内的连线触发，将被小组末尾关联了事件的连线（如果有）代理掉！即小组末尾的连线执行时，会对前面的连线一并触发执行。

因此，可以解释为什么上面示例中可以弹窗，但是索引1和2对应的连线操作传递的属性为什么没有过去。

  1. 使用

了解了规则，现在将前面场景示例，调整一下连线顺序，将索引0移动到末尾，再执行，可以看到实现预期的效果：

 

 

如果再进一步测试：

将索引0位置不放到末尾，而是放到索引1的位置，此时按照规则，连线分组如下：

 

 

其中索引1的连线关联的内嵌按钮事件。按照规则，索引0的触发将由1代理，即便自身没有关联内嵌事件。

索引2的连线，由于分组末尾（只有自身）没有关联内嵌事件的连线，因此不会触发执行。

因此，运行结果是弹窗有修改标题文字，但是无内容输出，如下所示：

 

 

Q&A

怎么判断某函数属性是事件函数？

属性标识通常是on开头，比如onClick、onReceive、onOutput等。

posted @   一路火花带闪电Plus  阅读(13)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾（3.3-3.9）
· winform 绘制太阳，地球，月球 运作规律
点击右上角即可分享
微信分享提示
AI IDE Trae