UIOTOS文档： 公共方法 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等

已于 2024-08-30 11:25:01 修改
阅读量566 收藏 19
点赞数 24
分类专栏： UIOTOS文档（自动爬取） 文章标签： 前端 前端框架 rxjava 低代码 零代码 iframe 页面嵌套
于 2024-08-20 17:30:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_69807227/article/details/141364010
版权

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

通用

i.colord → string 字符串染色

**用途**：文本字符串加上颜色等样式，返回以span为标签的html文本

**参数**：

  • **text**

显示文字。

  • **color**** = ‘rgb(106,138,54)’**

字体颜色

  • **bold**** = true**

文字是否加粗

**返回**：span标签的html文本

i.toHtmlText → string 文本中设定链接文字

**用途**：文本字符串加上颜色等样式，返回以span为标签的html文本

**参数**：

  • **text**

整体文本内容。

  • **style**** = ‘font-size:12px’**

文本整体默认样式。

  • **linkedText**** = null。**

在text文本内，指定存在的文字片段，作为链接文字。

  • **linkURLorCallback**** = null**

链接文字点击跳转的url地址，或者回调函数。

  • **linkedStyle**** = ‘font-size:12px’**

链接文字的样式。

**返回**：html文本字符串。

i.alert → void 信息弹窗

**用途**：编辑或运行状态下弹窗提示。

**参数**：

  • **msg**

显示文字。

  • **title**** = ‘警告’**

弹窗标题。

  • **hasCancel**** = false**

弹窗是否有取消按钮。

  • **cb**** = null**

弹窗关闭的回调函数。

  • **gv**** = nul**

弹窗显示场景对象，通常默认为空即可。

  • **size**** = [300, 150]**

弹窗宽、高。

**返回**：无，可以通过回调参数处理关闭后的操作。

**示例**：弹窗提示，文字中间部分设置背景色，部分文字可点击链接跳转。
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
代码如下：

let coloredText = _i.colored(
  '如果一定要交互连线，可嵌套到容器组件，在上层页面通过继承属性后再去连线（查看示例）。',
  'rgb(189,189,189)',
  false
);

let htmlText = _i.toHtmlText(
  `当前组件没有交互事件，将自动转成拓扑连线！<br>${coloredText}`,
  null, 
  '查看示例', 
  'http://www.baidu.com'
);

i.alert(
  htmlText, 
  '警告', 
  false, 
  null, 
  null, 
  [350, 200]
);

i.objectToKeyValues → void 对象和键值组互转

**用途**：对象转成键组合值组，并且支持多种常见格式对应关系，以及双向同步时的策略。

参数
  1. obj =**{}**

对象内容，引用传参和返回。相当于api组件的jsonFormat、工具函数的inputs。

  1. keys =**[]**

参数键组，引用传参和返回。通常叫paramKeys或inputKeys等。

  1. values =**[]**

参数值组，引用传参和返回。通常叫paramValues或inputValues等。

  1. isObjInputing

目前由哪个参数传入设置。

  • true：传入obj设置，值将要同步给keys、values。
  • false：传入keys或values，值将要同步给obj
  1. mode

数字类型，与枚举类型JsonStruct依次对应。

  • 0：flatWhole``全部扁平化
    • keys和values都是按照obj完全扁平化展开的。
    • obj显示的始终是keyURL作为键，与keys、values完全对应。
    • 对于字符串类型的值，即便是对象文本，也当基本类型，不自动解析和展开。
    • 输入不论是obj还是keys/values，都不一定能保持输入值，最终都取决于构成的对象，扁平化后的对象，以及键值对各自数组。
    • 字段值有对象文本字符串，都不会被转成对象然后扁平或结构化，而是当作普通字符串值来处理！！
let a = {
  "username": "develop",
  "psw": "iotos123456",
  "extra": {
    "email": "jone@aiotos.net",
    "gender": 2,	//与c的对应值不同
     "addr":"shenzhen"	//比b中多出的字段
    }
  },
  b = ['username', 'psw', 'extra.email', 'extra.gender']
  c = ['develop', 'iotos123456', 'jone@aiotos.net', 1];

i.objectToKeyValues(a,b,c,true,0);	//第三个参数传入true，即以obj输入为准。

//obj引用输出:
{
    "username": "develop",
    "psw": "iotos123456",
    "extra.email": "jone@aiotos.net",
    "extra.gender": 2,
    "extra.addr": "shenzhen"
}

//keys引用输出（字段以obj的为准，自动增加了！）
["username", "psw", "extra.email", "extra.gender", "extra.addr" ]

//values引用输出（值也一样，跟obj的保持一致）
["develop", "iotos123456", "jone@aiotos.net", 2, "shenzhen"]

i.objectToKeyValues(a,b,c,false,0);	//第三个参数传入false，即以keys/values输入为准。

//obj引用输出（以keys/values为准了！）
{
    "username": "develop",
    "psw": "iotos123456",
    "extra.email": "jone@aiotos.net",
    "extra.gender": 1		//之前自己的值2，被values的同步过来了
                        //之前自己的字段addr，被keys同步过来去掉了！
}

//keys引用输出：
["username", "psw", "extra.email", "extra.gender"]

//values引用输出：
["develop", "iotos123456", "jone@aiotos.net", 1]
  • 1：structWhole``全部结构化
    • 与模式0类似，区别在于这里obj始终是完整结构化后的对象。keys/values与上面相同。
    • 字段值有对象文本字符串，都不会被转成对象然后扁平或结构化，而是当作普通字符串值来处理！！
let a = {
    "username": "develop",
    "psw": "iotos123456",
    "extra.email": "jone@aiotos.net",
    "extra.gender": 2,	//与c的对应值不同
    "extra.addr":"shenzhen"	//比b中多出的字段
  },
  b = ['username', 'psw', 'extra.email', 'extra.gender']
  c = ['develop', 'iotos123456', 'jone@aiotos.net', 1];

i.objectToKeyValues(a,b,c,true,1);	//第三个参数传入true，即以obj输入为准。

//obj引用输出:
{
    "username": "develop",
    "psw": "iotos123456",
    "extra": {
        "email": "jone@aiotos.net",
        "gender": 2,
        "addr": "shenzhen"
        //还有个可能没显示的_upper: () => parent
    }
}

//keys和values跟模式0的输出1的一样：
//keys引用输出（字段以obj的为准，自动增加了！）
["username", "psw", "extra.email", "extra.gender", "extra.addr" ]

//values引用输出（值也一样，跟obj的保持一致）
["develop", "iotos123456", "jone@aiotos.net", 2, "shenzhen"]

i.objectToKeyValues(a,b,c,false,1);	//第三个参数传入false，即以keys/values输入为准。

//obj引用输出（以keys/values为准了！）
{
    "username": "develop",
    "psw": "iotos123456",
    "extra": {
        "email": "jone@aiotos.net",
        "gender": 1
    }
}

//keys引用输出：
["username", "psw", "extra.email", "extra.gender"]

//values引用输出：
["develop", "iotos123456", "jone@aiotos.net",1 ]
  • 2：structKeysConst``字段值结构化
    • 与模式1几乎一样。
    • 从2开始，包括3和4，字段keys的名称、数量、顺序，将完全取决于自身的设置！而前面0和1，keys/values、obj，都无法决定自身输入的就是最终的，因为都要转换成全扁平或全结构，然后分别都按最终数据来适配属性值！

从2开始的这几项，字段keys都保持固定不变！变化的是values和，以及obj（其实obj也不变，也都是结构化，不会再扁平化，只是存在对象文本、转成对象值，以及对象值转成对象文本时，会被自动转换）。

  - 字段keys保持设置，不会变化。对应的值values，原本是什么就是什么，可以是对象结构、对象文本等。当然，obj和values存在双向赋值的情况，最终看以谁为准，单始终保持keys不变！
  - 字段值有对象文本字符串，都不会被转成对象然后扁平或结构化，而是当作普通字符串值来处理！！

let a = {
    "username": "develop",
    "psw": "iotos123456",
    "extra.email": "fire@aiotos.net",
    "extra.gender": 2,	
    "extra.addr":"shenzhen"	
  },
  b = ['username', 'extra']	//注意，这里去掉了psw字段！！
  c = ['develop', 'iotos123456', 'jone@aiotos.net', 1];

i.objectToKeyValues(a,b,c,true,1);	//第三个参数传入true，即以obj输入为准。

//obj引用输出:
{
    "username": "develop",
    //psw字段没有了！！
    "extra": {
        "email": "jone@aiotos.net",
        "gender": 2,
        "addr": "shenzhen"
        //还有个可能没显示的__upper: () => parent
    }
}

//keys引用输出，保持原封不动！！！
b = ['username', 'extra']

//values引用输出（跟keys的保持一致，值为原始obj的）
[
    "develop",
    {
        "email": "fire@aiotos.net",
        "gender": 2,
        "addr": "shenzhen"
    }
]

i.objectToKeyValues(a,b,c,false,2);	//第三个参数传入false，即以keys/values输入为准。

//obj引用输出（以keys/values为准了！）
{
    "username": "develop",
    //以keys/values为准，首先没有psw字段，其次，extra对应位置的值为iotos123456了
    "extra": "iotos123456"
}

//keys引用输出，保持原封不动！！！
b = ['username', 'extra']

//values引用输出：
["develop", "iotos123456"]

let a = {
    "username": "develop",
    "psw": "iotos123456",
    "extra.email": "fire@aiotos.net",
    "extra.gender": 2,	
    "extra.addr":"shenzhen"	
  },
  b = ['username', 'extra.email', 'extra.addr']	//注意，这里有keyURL
  c = ['develop', 'iotos123456', 'jone@aiotos.net', 1];

i.objectToKeyValues(a,b,c,false,2);	//第三个参数传入false，即以keys/values输入为准。

//obj引用输出
{
    "username": "develop",
    "extra": {	//对象结构
        "email": "iotos123456",
        "addr": "jone@aiotos.net"
    }
}

//其他略
  • 3：structValToObj``字段值转对象
    • 与模式2几乎相同。
    • values中只要有对象字符串的，都会转成字对象，并同步到obj，其他都不影响。
let a = {
    "username": "develop",
    "psw": "iotos123456",
    "extra.email": "fire@aiotos.net",
    "extra.gender": 2,	
    "extra.addr":"shenzhen"	
  },
  b = ['username', 'extra']	//注意，这里去掉了psw字段！！
  c = ['develop', 'iotos123456', 'jone@aiotos.net', 1];

//不论三个参数是true还是false，结果跟模式2一模一样！
i.objectToKeyValues(a,b,c,true,3);	

let a = {
    "username": "develop",
    "psw": "iotos123456",
    "extra": "{\n        \"email\": \"jone@aiotos.net\",\n        \"gender\": 1\n    }"
  },
  b = ['username', 'extra']	//注意，这里去掉了psw字段！！
  c = ['develop', 'iotos123456', 'jone@aiotos.net', 1];

i.objectToKeyValues(a,b,c,true,3);	//第三个参数为true，以obj值为准！

//obj引用输出
{
    "username": "develop",
    "extra": {	//字符串转对象了！！
        "email": "jone@aiotos.net",
        "gender": 1
    }
}

//keys引用输出，保持原封不动！！！
b = ['username', 'extra']

//values引用输出：
[
    "develop",
    {		//对象文本字符串，转成对象了！！
        "email": "jone@aiotos.net",
        "gender": 1
    }
]
  • 4：structValToStr``字段值转文本
    • 与模式3几乎相同。只是反过来，如果是对象，就转成字符串！
let a = {
    "username": "develop",
    "psw": "iotos123456",
    "extra.email": "fire@aiotos.net",
    "extra.gender": 2,	
    "extra.addr":"shenzhen"	
  },
  b = ['username', 'extra']	//注意，这里去掉了psw字段！！
  c = ['develop', 'iotos123456', 'jone@aiotos.net', 1];

i.objectToKeyValues(a,b,c,true,4);	//第三个参数为true，以obj值为准！

//obj引用输出
{
    "username": "develop",
    //先参考模式2转成对象，然后对象值转成字符串！！
    "extra": "{\n    \"email\": \"fire@aiotos.net\",\n    \"gender\": 2,\n    \"addr\": \"shenzhen\"\n}"
}

//keys引用输出，保持原封不动！！！
b = ['username', 'extra']

//values引用输出：
[
    "develop",
    //对象值转成了字符串！
    "{\n    \"email\": \"fire@aiotos.net\",\n    \"gender\": 2,\n    \"addr\": \"shenzhen\"\n}"
]

i.objectToKeyValues(a,b,c,false,3);	//第三个参数为false，以keys/values值为准！

let a = {
    "username": "develop",
    "psw": "iotos123456",
    "extra.email": "fire@aiotos.net",
    "extra.gender": 2,	
    "extra.addr":"shenzhen"	
  },
  b = ['username', 'extra.email', 'extra.addr']	//注意，这里
  c = ['develop', 'iotos123456', 'jone@aiotos.net', 1];
i.objectToKeyValues(a,b,c,false,4);	//第三个参数传入false，即以ke

let a = {
    "username": "develop",
    "psw": "iotos123456",
    "extra.email": "fire@aiotos.net",
    "extra.gender": 2,	
    "extra.addr":"shenzhen"	
  },
  b = ['username', 'extra.email', 'extra.addr']	//注意，这里有keyURL
  c = ['develop', 'iotos123456', 'jone@aiotos.net', 1];

i.objectToKeyValues(a,b,c,true,4);	

//obj引用输出
{
    "username": "develop",
    "extra": "iotos123456"
}

//keys引用输出，保持原封不动！！！
b = ['username', 'extra']

//values引用输出：
["develop", "iotos123456"]

返回

无。obj、keys、values均通过引用返回。

前端零代码
关注
  • 24
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
UIOTOS文档：表单组件 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等
qq_69807227的博客
08-17 936
输入框、文本框、对话框、下拉框等等表单组件
UIOTOS文档： 公共 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等
qq_69807227的博客
08-17 637
本篇并非关于具体某个组件，而是针对全部（或某类）组件的公共属性介绍，避免在文档中重复录入。组件的专有属性，分别在所属分组文档中介绍。:::danger注意：该属性组通常需勾选才可见。:::暂略。:::danger注意：该属性组通常需勾选才可见。:::几乎每个组件都有该属性组，用于设置周围或中心等典型位置上的标题文字，通常有默认字体大小和颜色，通常用于注释。参见。快捷操作只能设置标题内容，更多属性比如字体颜色位置等需要打开当前属性组，可以进行详细设置。
UIOTOS文档：Hello World | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dat
qq_69807227的博客
08-20 578
通过第一个示例，了解UIOTOS中连线的基本用途。示例中，按钮文字通过连线操作，输出给文本框。
UIOTOS文档： 工具函数 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等
qq_69807227的博客
08-20 513
UIOTOS中一切都是组件。函数属于其中的功能类组件，有输入、输出、执行属性作为最基础的特性，理论上可以组成最小的逻辑单元，与芯片和逻辑电路中的三极管等类似：通过最简单的透明传递（transfer）搭配组合，也能实现一些通用的基础逻辑模块，类比有助于帮助理解本工具逻辑实现原理，以及能实现的程度。以“类三极管”的灵活性（原子性），结合内置常用函数选项，可构建出复杂的业务逻辑。并且会出现如下情况：函数组件在使用时，编辑状态下可见，运行时不可见，通常与界面类组件配合，如下所示：与通常理解的概念一样，函数组件也是一
amis低代码前端框架，它使用 JSON 配置来生成页面
04-13
Amis 是一个强大的低代码前端框架，其核心理念是通过 JSON 配置文件来构建复杂的 Web 应用页面。这个框架极大地简化了前端开发者的工作，尤其是对于那些需要快速搭建和迭代页面的项目，Amis 提供了一种高效、灵活的...
amis前端低代码框架 v1.0.19
12-15
为您提供amis前端低代码框架下载，amis 是一个低代码前端框架，它使用 JSON 配置来生成页面，可以节省页面开发工作量，极大提升开发前端页面的效率。目前在百度广泛用于内部平台的前端开发，已有 100+ 部门使用，...
amis前端低代码框架 v1.0.18
11-25
为您提供amis前端低代码框架下载，amis 是一个低代码前端框架，它使用 JSON 配置来生成页面，可以节省页面开发工作量，极大提升开发前端页面的效率。目前在百度广泛用于内部平台的前端开发，已有 100+ 部门使用，...
amis前端低代码框架 v6.1.0.zip
03-18
Amis 是一个强大的前端低代码框架，主要用于快速构建企业级应用。它的最新版本v6.1.0提供了许多改进和新特性，使得开发者能够更高效地构建用户界面，无需从零开始编写大量的HTML、CSS和JavaScript代码。在这个压缩包...
amis前端低代码框架 v3.5.2.zip
03-18
Amis 是一个强大的前端低代码框架，主要用于快速构建企业级应用。版本 v3.5.2 提供了更稳定和优化的功能，使开发者能够高效地搭建界面并进行自定义配置，减少手动编写 HTML、CSS 和 JavaScript 的工作量。在本压缩包...
JavaScript代码片段
weixin_66128399的博客
08-26 1647
使用场景是：后端列表查询接口，某个字段前端不传，后端就不根据那个字段筛选，例如name不传的话，就只根据page和pageSize筛选，但是前端查询参数的时候（vue或者react）中，往往会这样定义。给后端发送数据的时候，要判断某个属性是不是空字符串，然后给后端拼参数，这块逻辑抽离出来就是cleanObject，代码实现如下。leading-true，trailing-true：在延时开始时就调用，延时结束后也会调用。//第一个参数指定位数，第二个字符串指定字符，都是可选参数，如果都不传，默认生成8位。
前端的面试题
本人小可爱
08-30 86
【代码】前端的面试题。
HTML ＜template＞ 标签的基本技巧
最新发布
ufrontend的博客
08-30 375
HTML中的标记是 Web 开发中一个功能强大但经常未得到充分利用的元素。它允许你定义可重复使用的内容，这些内容可以克隆并插入 DOM 中而无需最初渲染。此功能对于创建动态、交互式 Web 应用程序特别有用。在本文中，我们将探讨有效使用 标记的 10 个基本技巧，帮助你在项目中充分发挥其潜力。1. 了解 标记的基础知识 标记是一个 HTML 元素，它包含页面加载时不会渲染的客户端内容。
Window Performance API
Bruce__taotao的博客
08-28 1094
Window Performance API 是一组浏览器提供的接口，用于收集和分析网页性能数据。它允许开发者精确地测量网页加载时间、资源加载时间、用户交互延迟等性能指标，从而优化用户体验。1. 主要接口1.1返回一个高精度时间戳，通常用于计算精确的时间差。例如，你可以用它来测量函数执行时间。使用场景: 精确计算代码段的执行时间。// 执行某个任务console.log(`执行时间:${// 执行某个任务 const end = performance . now();
vue ref和reactive区别
灰海
08-25 3294
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
vue3插件原理
m0_46281382的博客
08-26 1652
简述vue3中use方法加载第三方插件原理
AI 大模型时代，对前端工程师有哪些机遇和挑战？
Z4400840的博客
08-28 1264
AI 大模型时代为前端工程师带来了丰富的机遇，同时也带来了挑战。前端工程师需要积极适应这些变化，掌握新的技能，以抓住时代发展的红利。通过不断学习和提升技术水平，前端工程师可以在AI时代中发挥更大的作用，创造更多的价值。
前端面试宝典【CSS篇】【8】
BDawn的专栏
08-26 301
绝对单位 适用于不需要缩放的场合，如打印样式。 相对单位 更适合Web设计，尤其是响应式设计。 vw/vh 适用于基于视口尺寸的布局设计。 em/rem 适用于字体大小相关的布局。
零基础5分钟上手亚马逊云科技-云原生架构设计
m0_66628975的博客
08-26 2694
欢迎来到小李哥全新亚马逊云科技AWS云计算知识学习系列，适用于任何无云计算或者亚马逊云科技技术背景的开发者，通过这篇文章大家零基础5分钟就能完全学会亚马逊云科技一个经典的服务开发架构方案。我会每天介绍一个基于亚马逊云科技AWS云计算平台的全球前沿云开发/架构技术解决方案，帮助大家快速了解国际上最热门的云计算平台亚马逊云科技AWS最佳实践，并应用到自己的日常工作里。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值