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

前端零代码

已于 2024-08-30 12:59:51 修改

阅读量801

点赞数 29

分类专栏： UIOTOS文档（自动爬取）文章标签：低代码前端框架 iframe 页面嵌套前端开发 web组态 qt

于 2024-08-17 20:12:26 首次发布

本文链接：https://blog.csdn.net/qq_69807227/article/details/141285980

版权

UIOTOS文档（自动爬取）专栏收录该内容

54 篇文章 0 订阅

订阅专栏

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

说明

在连线（基础篇）篇中，介绍了连线的基本原理和操作，本进阶篇继续讲解连线的高级特性，主要包括连线属性、赋值解析、事件触发、执行顺序。基于这些特性，能够实现如下类似的复杂功能：
示例：对象数组字段提取合并成新的数组输出。> 输入对象数组，其中对象元素有固定的startTime和endTime两个字段，现在要把这两个字段的时间，合成一个字符串，中间用‘~’隔开，形成新的字符串数组输出。

原理

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

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

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

连线的完整用途，由浅入深可罗列如下：
传递固定值给目标组件属性。> 比如按钮点击，触发对话框弹窗（给开关类型的弹窗属性，固定传值true）。

将来源组件**（变动的）属性值**，传递给目标组件属性。> 比如文本框的值内容属性，关联传递给对话框的内容，用于弹窗时显示。

将来源组件的属性值，经过解析提取，再传递给目标组件属性。> 比如API接口组件，关联自身返回响应属性，解析返回对象数据的code字段，给到对话框弹窗输出。

默认情况下，来源组件所有事件都会触发连线执行，可选择指定事件触发。> 比如输入框组件，连线操作对话框弹窗（比如确认操作），希望敲入回车时才弹窗，输入时不弹窗，此时就需要为连线设置特定的触发事件。

多条连线，可分别关联不同属性、解析提取，传递给目标组件的不同属性。> 比如文本框传值给对话框，且触发对话框弹窗。第一条连线，由文本框的值内容指向对话框的内容；第二条连线由文本框的回车时事件，指向对话框的弹窗属性。

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

多条连线，可以不区分事件默认一并执行，也可以分别指定不同事件触发。多条连线，同一事件触发由默认按顺序依次同步执行，也可以选择异步。一条连线，不关联属性，可获得包含所有属性在内的表单数据。一条连线，不操作属性，即可通过表单对容器内多个**属性赋值。**以上用途，不逐一展开，在不同章节内容分别有体现。以下从4个方面介绍原理机制，正是这些，支撑了上述用途和特性。

连线属性

作用

在基础篇原理中有提到，交互连线的本质，是一个属性对另一个属性赋值。这里涉及到一个重要概念：属性读写。
对目标组件的属性赋值，是写操作；获取来源组件的属性值，是读操作。因此，在属性分类中，也专门将属性统一分为可读写、[只读](只读仅用于显示组件状态，不用于设置。比如API接口组件的返回响应（response）属性。这类属性值是组件对外输出的，对其设置无意义。)、只写三类。

特例

来源属性为空或事件函数时，连线输出表单对象。> 组件对外连线，不关联自身任何属性时，将传出由属性标识名和属性值构成的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。

特例

特殊情况处理（解析字符串直接作为固定值输出）。

原始数据不是对象时

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

解析提取失败时

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

解析赋值是对象时

如果设置的解析赋值，并非字符串，而是数组或对象，不论关联属性是什么，有没有关联，都将固定输出这个解析赋值对象本身！
其中，在关联了事件时，相当于是事件触发时，输出解析赋值处配置的固定对象或数组。此时，跟组件的表单对象无关。
连线赋值解析实践示例：

事件触发

用途

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

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

> **注意：v3.0起，已经将**`**触发**`**属性组，放到了专业模式下（参见**[**属性分级显示**](https://www.yuque.com/liuhuo-nc809/uiotos/gul70yqkla0i9iqa#YhUyc)**），默认不可见。**

补充

连线传递属性值的分为被动和主动两种方式，当前介绍的为被动，即连线操作依赖于来源组件的事件触发。
UIOTOS提供了函数组件获取组件属性值（formValues），支持对连入其输入（组）属性的连线，可以在函数执行时触发，不再依赖组件的事件。该方式非常适合用于获取多个不同容器或组件，构成完整表单数据。

执行顺序

索引顺序

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

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

深度优先

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

连线不同索引的颜色通常都固定，从颜色也可以迅速判断执行顺序。下面连线逻辑按照从执行1到执行7的顺序执行。
注意：工具函数有延时执行属性，大于0时，连线执行将由深度优先的同步执行，改成广度优先的异步执行。

连线代理

对于容器组件，关联内嵌属性对外连线操作时，触发执行通常是通过关联内嵌事件实现的（详见用内嵌事件（useInnerEventsAll））。
连线关联事件属性，传递的是表单数据，需要经过解析才能提取到需要的属性值（参见来源属性为空或事件函数时，连线输出表单对象），而容器因为有内嵌了多个组件的页面，对外连线操作时，通常会连续多根连线传递属性值。
为了方便，这里提供连线代理机制，实现容器对外的连续多根连线，其触发可以由最近一条关联内嵌事件的连线触发时一并执行。具体使用场景和规则如下：

前提

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

场景

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

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

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

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

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

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

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

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

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

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

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

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

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

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

使用

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

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

其中索引1的连线关联的内嵌按钮事件。按照规则，索引0的触发将由1代理，即便自身没有关联内嵌事件。
索引2的连线，由于分组末尾（只有自身）没有关联内嵌事件的连线，因此不会触发执行。
因此，运行结果是弹窗有修改标题文字，但是无内容输出，如下所示：