UIOTOS 示例1：Hello World | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等

合集 - UIOTOS文档（自动爬取）(49)

1.UIOTOS文档： 开始 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-212.UIOTOS文档：入门 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-213.UIOTOS文档： 常规（基础篇） | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-214.UIOTOS文档： 嵌套（基础篇） | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-215.UIOTOS文档： 布局 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-216.UIOTOS文档： 常规（高级篇） | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-217.UIOTOS文档： 连线（高级篇） | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-218.UIOTOS文档： 嵌套（高级篇） | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-219.UIOTOS文档： 组件| 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-2110.UIOTOS文档： 公共 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-2111.UIOTOS文档： 绘图 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-2112.UIOTOS文档： 图表 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-2113.UIOTOS文档： 表单 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-2114.UIOTOS文档： 容器 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-2115.UIOTOS文档： 函数 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-2116.UIOTOS文档： 通信 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-2117.UIOTOS文档： 视频 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-2118.UIOTOS文档： 其他 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-2119.UIOTOS文档： 导出部署与集成 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-21

20.UIOTOS 示例1：Hello World | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-21

21.UIOTOS文档： 随机颜色显示 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-2122.UIOTOS文档： 扇叶（图标）旋转 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-2123.UIOTOS文档： 上下层页面交互 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-2124.UIOTOS 示例2：按钮弹窗显示文本| 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-2125.UIOTOS 初体验：指定沿轨迹运动 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-2126.UIOTOS 示例3：视频选择播放| 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-2127.UIOTOS 初体验：长页面滑动| 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-2128.UIOTOS 初体验：计算器按键 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-2129.UIOTOS 示例4：扩展按钮（文字可切换）| 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-2130.UIOTOS 示例5：扩展按钮（图标可切换）| 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-2131.UIOTOS 示例6：扩展按钮组（增加属性）| 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-2132.UIOTOS 示例7：继承内嵌页事件并使用 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-2133.示例8：数据的解析提取 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-2134.UIOTOS 示例9：接口数据给树表格 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-2135.UIOTOS 示例10：表单请求接口 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-2136.UIOTOS 示例11：表单数据双向读写 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-2137.UIOTOS 示例12：接口查询曲线展示 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-2138.UIOTOS文档：初体验：不规则按钮 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dat2024-08-2739.UIOTOS文档：示例13：MQTT数据给图形 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dat2024-08-2740.最新零代码，套娃一样开发IoT应用！2024-08-2941.前端零代码，套娃一样开发界面！2024-08-2942.【开源】前端“神器”，开发界面无代码！2024-08-3143.2024强烈推荐8个精选的中后台前端低代码开源框架2024-08-3144.一款能开发上位机和后台系统的WEB组态！2024-08-3145.物联网平台市场崩了吗？2024-09-0246.可视化拖拉拽？过时了！2024-09-0547.前端组态化 3：矢量绘图与UI界面无缝融合2024-09-0648.一觉醒来，Qt、C#界面开发的天塌了？2024-09-1049.UIOTOS示例：自定义弹窗输出表单数据 | 前端低代码 前端零代码 web组态 无代码 amis goview dataroom 界面嵌套 蓝图连线 nodered2024-09-24

收起

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

示例1：Hello World

 

目标

通过第一个示例，了解UIOTOS中连线的基本用途。示例中，按钮文字通过连线操作，输出给文本框，如下所示：

 

 

步骤

新建

从登录开始，在用户目录新建当前示例的页面，参见新建页面。

 

 

拖放组件

示例涉及到按钮和文本框两个组件，依次从组件面板中拖入并配置。步骤如下：

• 步骤1：打开组件面板。
• 步骤2：选择表单-普通按钮组件，拖放到页面。
• 步骤3：设置按钮显示文字。

• 方式一：直接双击，弹窗中输入并确定。
• 方式二：属性面板中外观-文字，进行设置。

• 步骤4：选中表单-文本框组件，拖放到页面
• 步骤5：设置文本框属性。

• 在属性外观-占位提示符中设置：等待显示。
• 在属性外观-标签文本中设置：打印输出（或ctrl + shift + 双击设置，参见快捷键）。

 

 

连线操作

拖放好两个组件后，要实现交互、传递属性值，需要用连线将两者关联起来，步骤如下：

• 步骤1：选中按钮，单击右键，选择连线-交互连线（或快捷键ctrl+shift+空格）。
• 步骤2：由按钮按下，指向文本框，鼠标松开时，在弹窗列表中，选择值内容，然后在再点击后面的选择，选中文字属性（如果没有该属性，参见连线弹窗面板中属性不存在？）。
• 步骤3：最后依次点击确定。

 

 

预览

连线配置完毕后，点击保存，运行预览交互效果。如下所示：

预览操作：点击顶部工具栏预览（或快捷键ctrl + p）

 

 

 

 

注意，直接预览时，如果窗口尺寸变化，会发现界面位置固定，通常需要自适应，涉及到布局，具体操作如下

示例附加布局设置

• 步骤1：同时选中按钮和文本框，右键选择自动布局（或按快捷键shift+回车），此时组件会根据位置自动布局。
• 步骤2：分别在两个组件属性面板的布局中（也可以保持同时选中，一并设置），设置横纵向都选择中心（参见布局参数设置）。
• 步骤3: 保存，预览。

 

小结

这是第一个小的完整示例。介绍了目标效果和搭建的完整过程，以及相关知识点。后续的示例2、3、4..中，都将分不同的示例主题，介绍过程和实现细节。

此外：在当前示例节点下，也提供了一些列极简的例子：

 

 

这部分例子简单、功能单一，文档也仅介绍步骤，不详解，供初学者傻瓜式参考。有了直观操作感受后，可再进一步结合其他示例正式学习，从知其然到知所以然。