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

说明

 常规（基础篇）介绍了常规操作，本篇深入介绍编辑使用涉及的更多内容。

鼠标悬停提示

UIOTOS为编辑和运行时，分别提供了鼠标悬停提示支持，如下所示：

**编辑时：悬停提示（tooltip）**所有组件的基础属性组中，都有提示属性，用来设置编辑状态下的鼠标悬停提示。具体参见：

 公共 *

**运行时：弹出框提示（popup）**除了容器组件，绝大部分组件都有该属性组（默认不显示，需点击

展开更多），主要用于运行时提示。

鼠标悬停时，能提示纯文字内容，也能显示任意定制化内容（通过嵌套UIOTOS搭建的任意其他页面实现）。

 关于

编辑时双击运行

为了方便编辑时快速调试测试，有时希望对组件双击时，能够执行运行时才体现出的交互动作。比如按钮组件编辑时双击，能够触发运行时才有的点击事件，如下：

详情参见：

 常见问题

离线复制粘贴

拖放到页面中的所有组件，都有对应的源文本（即组件的描述文本，所有的配置都存放在该文本中，加载时也通过该文本还原）。
并且相同类型的组件，拖放多个到页面中，每个的源文本都是完全独立的，分别可以配置和保存不同的属性配置。如下所示：

两种打开源文本方式：

1. 右键选择源文本
2. 快捷键shift+双击

拷贝一个组件的源文本，粘贴任意另一个组件的源文本弹窗中，保存，随后被粘贴的组件，就变成副本，实现跨浏览器、跨机器、离线方式的复制粘贴。如下所示：

注意：通过源文本的复制粘贴，组件副本会保持原组件的尺寸和位置，而不是源文本中拷贝过来的尺寸和位置。

设置轨迹移动

如何设置一个图标沿着绘制的任意线条、或者其他组件的边框运行？本操作放在常规中，方便属性UIOTOS中的一个趣味设置，效果与步骤如下：（公共属性中详细介绍）

• 步骤1：绘制线条/管道/不规则矩形等。
• 步骤2：拖放图标。
• 步骤3：右键拓扑连线，从图标指向线条。
• 步骤4：定时器触发工具函数，给图标的轨迹属性自增数值，从0到100。
• 步骤5：随着值变大，图标沿着轨迹逐渐走完。
• 步骤6：值为100时轨迹走完毕。

对象数据扁平化

对象的基本概念在 对象和键值对中有介绍。当对象的字段确定后，经常涉及对应值的修改（包括复杂多层嵌套结构的情况下，需任意指定修改某个字段的值）。以API接口查询参数为例，人员信息条件，简单结构示例如下：

登录后复制

{
  "name":'uiotos',
  "age":2,
  "gender":1,
  "phone": "400-1188-502"
}

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.

理想的方式是在组件属性面板中，为每个字段分别提供属性配置。对于表单页面没问题，但是对于API组件的参数设置，显然行不通。基础组件的属性个数和类型，不能随着业务需求随意变动。
API组件以一个对象类型的固定属性，用于设置请求参数，支持任意对象结构的配置。但这面临一个棘手问题：无法用连线操作，给对象类型的属性指定字段赋值，通常是整体覆盖。参见 连线（基础篇）和连线-高级篇的 解析赋值。
公共属性组的 解析赋值（bindControlVal）有介绍到，连线支持对数组的指定索引赋值，以及获取数组的指定索引值。通过这个特性，可以很好地解决上述问题！前提是必须首先实现对任意对象的扁平化。 关于扁平化当对象只有一层结构时，确保键值对的所有值，都是最基础的单元，直接可覆盖而不会再进一步拆解字段值，那么该对象就是扁平化结构。
通常这类值是基本数据类型，比如布尔、数字、字符串等（也可以是对象，此时要求对应字段作为最小颗粒度，整体对其值进行替换修改或者获取，而没有进一步操作对象内字段的情况）。示例：

登录后复制

{
  "a":{
    "b":"c"
  },
  "d":[
    {
      "e":"f"
    },{
      "g":["h","i","j"]
    }
  ]
}

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.

登录后复制

{
  "a.b":"c",
  "d.0.e":"f",
  "d.1.g.0":"h",
  "d.1.g.1":"i",
  "d.1.g.2":"j"
}

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.

从对照可以看出，结构化可以是任意嵌套复杂的形式。扁平化能够让对象内只有字段和基本类型的值，即多层结构变成单层。当然，扁平化也能还原成结构化，两者可以相互转换，具体规则与数据解析规则完全一致，参见 解析赋值。
当结构化对象扁平化后，提供两个数组类型的属性（通常叫数据键组和数据值组），分别存放扁平化后对象的字段列表和值列表，并且与原对象属性值双向同步。

• 示例属性组一

登录后复制

{
  "a":12,
  "b":34
}

• 1.
• 2.
• 3.
• 4.

登录后复制

["a","b"]

• 1.

登录后复制

["12","34"]

• 1.

• 示例属性组二

登录后复制

{
  "success": true,
  "message": "",
  "code": 200,
  "result": {
    "log": [
      {
        "state": "人脸识别",
        "time": "2024-03-14 23:48:48",
        "deviceName": "4F-A"
      },
      {
        "state": "人脸识别",
        "time": "2024-03-14 23:47:50",
        "deviceName": "1F-D"
      }
  ],
  }
}

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.
• 13.
• 14.
• 15.
• 16.
• 17.
• 18.
• 19.

登录后复制

[
  "success",
  "message",
  "code",
  "result.log.0.state",
  "result.log.0.time",
  "result.log.0.deviceName",
  "result.log.1.state",
  "result.log.1.time",
  "result.log.1.deviceName"
]

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.

登录后复制

[
  true,
  "",
  200,
  "人脸识别",
  "2024-03-14 23:48:48",
  "4F-A",
  "人脸识别",
  "2024-03-14 23:47:50",
  "1F-D"
]

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.

连线赋值解析对数组索引值的赋值和获取（ 详情），刚好可用来对扁平化数据的数据值组做操作。以此实现对任意复杂结构化数据，通过连线对指定字段的读写操作。
当前有用到结构化与扁平化，以及相关属性键值组的，有 API接口、 工具函数、以及 菜单容器等组件。对于扁平化和结构化，可以按照规则手动转换，也可通过工具函数 JSON对象结构扁平化（toFlatJson）自动转换。

属性变化时触发

所有属性的赋值，不论是编辑时在属性面板设置，还是通过连线赋值，都遵循一个原则，那就是值改变才触发！

比如数字类型的属性，原先值为122，属性面板中再次输入122（或者连线操作），不会触发属性变化的响应（通常是事件对应的连线操作，比如输入框的值变化事件）。

注意： 对象类型除外。比如 空对象{}，如果再次输入空对象{}，同样会再次触发，而不会认为前后两次不变。非空对象也是一样。 工具函数用到了此特性，说明如下：

工具函数都带有 输入赋值后清空 （resetAfterInput）属性，勾选后当值输入时会立刻复位成空对象{}。下次再输入任何内容，都会再次触发。因此能够连续输出相同的值和响应。如下所示：

连线样式设置

选中连线后：

1）Ctrl + 点击空白区域：切换连线形状

2）鼠标滚轮：调节圆角弧度 + 调节距离

3）Ctrl + 鼠标滚轮：调节圆角弧度

4）Shift + 鼠标滚轮：调节中心偏移位置

对象字段赋值

获取对象的字段值，可参见 解析赋值。反过来，要给对象的字段赋值（并支持属性面板中操作），可以通过对象、键组、值组、转换方式4个属性来实现。 工具函数、 接口组件中有用到，主要用途有：

• 对象任意位置，指定字段赋值。
• 对象任意位置，新增字段和值。
• 支持连线动态赋值，并非写死。

具体说明如下： 属性1：对象对象类型用于被指定字段赋值的 JSON对象，可以是单层或多层、扁平化或结构化形式。示例如下：

登录后复制

{
    "username": "develop",
    "site": "www.uiotos.net",
    "extra.email": "jone@aiotos.net",
    "extra.gender": 1
}

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.

登录后复制

{
  "username": "develop",
  "site": "www.uiotos.net",
  "extra": {
    "email": "jone@aiotos.net",
    "gender": 1
    }
}

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.

参考组件：

•  工具函数组件的 输入（组）属性。
•  接口组件的 参数对象属性。

属性2：键组数组类型对象的字段列表，与值组按索引依次对应，形成键值对，与对象保持双向同步。如下所示：

注意：

• 简单对象（仅一层键值对），可直接对应，比如键组["key1","key2"]和值组[12,34]，对应对象{ "key1":12, "key2":34 }。
• 复杂对象（多层复杂结构），通常需要结合转换方式来对应，此时键组字段通常是扁平化的形式，比如"key1.field2.segment3"，即多级字段以.隔开的字符串。

登录后复制

["username", "site", "extra"]

• 1.

登录后复制

["username", "site", "extra.email", "extra.gender"]

• 1.

参考组件：

•  工具函数组件中对应 输入键组属性。
•  接口组件中对应 参数键组属性。

属性3：值组数组类型键组对应的值，参见键组。具体值通常取决于转换方式，此处略。
参考组件：

•  工组件中对应 输入值组属性。
•  接口组件中对应 参数值组属性。

属性4：转换方式枚举类型

1. 全部扁平化

对象强制转为扁平化格式（参见对象数据扁平化）。如下所示：

登录后复制

{
  "username": "develop",
  "site": "www.uiotos.net",
  "extra": {
    "email": "jone@aiotos.net",
    "gender": 2,	
    "addr":"shenzhen"	
  }
}

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.

登录后复制

{
    "username": "develop",
    "site": "www.uiotos.net",
    "extra.email": "jone@aiotos.net",  //aa.bb.cc对应aa:{bb:{cc:...
    "extra.gender": 2,
    "extra.addr": "shenzhen"
}

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.

ang注意事项（包含全部扁平化和全部结构化两种情况）：

• 只处理指定结构，常规字段值（包括对象的文本字符串）不处理：

• 全部扁平化

处理对象或数组值。比如{"a":{"b":1, "c":2}}→{"a.b":1, "a.c": 2}。

• 全部结构化

处理扁平化键值对组。与上述相反。

• 对象、键组和值组，各自最终显示的，都不一定是输入值。取决于实际数据和转换方式。

• 举例1：全部扁平化模式下，输入结构化的对象，将被自动转为扁平化。反之也一样。
• 举例2：键组原先的设置，在输入全新对象时，将被新的字符串数组代替，而不会固定此前的设置。与键组固定的三个模式完全相反。如下所示：

2. 全部结构化（默认）

参见上面1. 全部扁平化，这里相反，是将扁平化对象转成结构化，其他都一样。如下所示：

参见全部扁平化中的 注意事项。此处略。注意：以此选项为默认，主要是考虑到在对象中手动编辑参数，是更为常见的操作。这样能确保随时调整参数，以最新设置为准，避免字段被限定。

3. 键组固定且保持结构

与2. 全部结构化一样，区别是需确保 键组固定不变（包括名称、数量和顺序）。这可以确保字段确定时，对值的任意设置，都不会影响字段本身。在API接口动态传参等场景极为重要。因此也作为默认选项。具体说明如下：

1. 不论对象和值组如何，键组始终固定。

全部扁平化和全部结构化，都会导致 键组动态变化，而当前（以及其他键组固定的选项）， 键组固定不变，并且同步影响对象和值组。如下所示：

2. 固定的

 键组

，影响约束

对象

的字段。

对象不论是按全部扁平化，还是全部结构化处理，仅有 键组指定的字段才能保留，多的将被自动丢弃。如下所示：

3. 对应的

值组

，将保持原始数值和类型。

即对象中 键组对应的值，不论是对象、数组，还是对象文本等，都保持不被自动转换。这也是与另两个键组固定选项（ 键组固定且值转对象、 键组固定且值转文本）的唯一区别。

4. 键组固定且值转对象

与3. 键组固定且保持结构（默认）一样，区别仅仅在于，值组中如果有对象的文本字符串，那么将自动转换为对象格式，并同步给对象属性。如下所示：

5. 键组固定且值转文本

与4. 键组固定且值转对象类似，只是相反，值组中如果有对象（包括数组），就自动转换为字符串文本，其他都一样。如下所示：

前面介绍了对象字段赋值，涉及到的四个属性。还缺少极为重要的一环：对象与键值数组属性，配置时双向同步的逻辑规则。参见如下内容。

附：属性同步规则> 对象和 键组/值组双向同步，需指定以哪边设置为准。这里规定：谁赋值，就依准。具体展开如下。

1. 往对象赋值时，自动同步给 键组和值组。

具体同步值，取决于转换方式：

1. 全部扁平化
2. 全部结构化

这两种情况，都是首先将对象扁平化，然后取这单层的字段列表和值列表，作为 键组和值组的新值。

3. 键组固定且保持结构
4.  键组固定且值转对象
5.  键组固定且值转文本

上述三种情况，都是首先将对象结构化，然后取第一层字段，作下一步判断处理：

1）键组不为空

将上面第一层字段与 键组指定的字段比较，如果有就取值；没有就移除。如下所示：

2）键组为空值

将上面第一层字段作为 键组固化下来（随后对象和值组的修改，都不会影响），如下：

按照 键组确定对象的字段后，对应值组以转换方式对应三种情况处理，如下所示：

• 保持原始值不变。
• 值有对象文本的，转为对象。
• 值有对象或/组的，转为文本。

2. 往 键组或值组赋值时，自动同步给对象。

具体同步值，同样，也取决于转换方式：

1. 全部扁平化

值组中如果某项填入对象（或数组），将自动被扁平化展开，同步影响到 键组和对象，如下：

2. 全部结构化

与上述一样，只是影响到的对象，将时结构化，而不是扁平化。如下所示：

3. 键组固定且保持结构

自此， 键组开始保持固定。即便在值组中设置对象键值对，整体作为值本身，也能同步修改到对象，但无法影响 键组。

可以动态设置 键组（参见 数组属性配置），比如讲长度加1，然后设置新的字段，再设置对应值，随后新的键值对，会自动同步到对象中。随后对象和值组的修改，也不会影响新 键组。

注意：可以在 键组中，以xx.yy.zz的解析串形式，添加”新的”字段项（即便 键组中已有名为xx的项）。定位到已有对象里层字段。然后对应值设置，就可以局部指定修改值，并且不会实际增加新字段。

4.  键组固定且值转对象

与上述类似，区别仅是将值组中有对象文本的，转成对象值，其他都一样。

5.  键组固定且值转文本

与上述类似。区别仅是将值组中有对象/数组的，转成文本字符串，其他都一样。

3. 修改转换方式时， 键组和值组相应变化。

1. 切换到键组固定项时， 键组当空处理。

由全部扁平化或全部结构化，换为键组固定的3项中任何一项时，将按上述 键组为空值处理。如下所示：

注意：

• 键组固定项：键组固定且保持结构、键组固定且值转对象、键组固定且值转文本。
• 扁平化后，值都为基本类型，因此由此切换过来的， 键组保持固定没有意义。

2. 切换到全部扁平化或全部结构化时，键组自动变化。

键组固定的，切换为全部扁平化或全部结构化时， 键组将随着扁平化自动展开。如下所示：

原创作者: u_15629616 转载于: https://blog.51cto.com/u_15629616/11860163