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

前端零代码

已于 2024-08-30 13:02:06 修改

阅读量866

点赞数 27

分类专栏： UIOTOS文档（自动爬取）文章标签：低代码无代码零代码前端开发 Qt开发 iframe nodered

于 2024-08-17 20:09:03 首次发布

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

版权

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

54 篇文章 0 订阅

订阅专栏

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

说明

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

鼠标悬停提示

UIOTOS为编辑和运行时，分别提供了鼠标悬停提示支持，如下所示：
**编辑时：悬停提示（tooltip）**所有组件的基础属性组中，都有提示属性，用来设置编辑状态下的鼠标悬停提示。具体参见：
公共 *
**运行时：弹出框提示（popup）**除了容器组件，绝大部分组件都有该属性组（默认不显示，需点击展开更多），主要用于运行时提示。
鼠标悬停时，能提示纯文字内容，也能显示任意定制化内容（通过嵌套UIOTOS搭建的任意其他页面实现）。
关于

编辑时双击运行

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

离线复制粘贴

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

两种打开源文本方式：

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

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

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

设置轨迹移动

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

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

对象数据扁平化

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

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

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

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

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

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

示例属性组一

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

["a","b"]

["12","34"]

示例属性组二

{
  "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"
      }
  ],
  }
}

[
  "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"
]

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

连线赋值解析对数组索引值的赋值和获取（详情），刚好可用来对扁平化数据的数据值组做操作。以此实现对任意复杂结构化数据，通过连线对指定字段的读写操作。
当前有用到结构化与扁平化，以及相关属性键值组的，有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
}

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

参考组件：

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

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

注意：

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

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

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

参考组件：

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

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

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

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

全部扁平化

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

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

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