前端零代码开发实践：页面嵌套+逻辑连线0开发扩展组件，实现切换开关控制扇叶转动。能无代码封装扩展组件，有别于常规的web组态或低代码平台

本文主要是介绍前端零代码开发实践：页面嵌套+逻辑连线0开发扩展组件，实现切换开关控制扇叶转动。能无代码封装扩展组件，有别于常规的web组态或低代码平台，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

前言：

官网:http://www.uiotos.net/

什么是 UIOTOS？

2024-04-06 00:58

本篇基于 WEB 组态常见的拖拽编辑、绘图和基础按钮组件，利用全新的页面嵌套和逻辑连线特性，无代码从 0 到 1 实现一个扇叶和开关组件。

其中扇叶能够点动控制转动的启停，开关可任意更换不同状态的图标，并且通过开关能操作扇叶的转动启停。各自初始和最终效果分别如下。

2. 开关组件

开关操作扇叶最终效果

总流程：新建页面 → 放入图片按钮 → 设置底板外观 → 放入工具函数、输入框、定时器组件 → 设置工具函数和定时器 → 连线串起各组件 → 检查组件属性嵌套继承设置。以下是详细步骤：

在左边栏页面中，选择一个目录，右键单击新建页面，然后命名，即可创建一个新的页面。

1.2 放入图片按钮

1.3 设置底板外观

选中底板，在右边图形（背景），去除背景颜色，再拖动底板改为和扇叶大小接近。

1.4 放入工具函数、输入框、定时器等组件

1.5 设置工具函数和定时器

1.6 连线串起各组件

1.6 检查组件属性嵌套继承设置

检查该页面组件属性是否继承，以便嵌套到其他页面可以修改组件属性值。

总流程：新建页面 → 放入图片按钮 → 设置底板外观 → 放入工具函数、输入框组件 → 设置工具函数 → 连线串起各组件 → 检查组件属性嵌套继承设置。详细步骤：

在左边栏页面中，选择一个目录，右键单击新建页面，然后命名，点击确定，即可创建一个新的页面。

2.2 放入图片按钮

在组件栏中选择图片按钮，在空白区域点击下，图片按钮就会出现，然后在左边栏部件中搜索 “开关”, 选中闸刀开关，复制闸刀开关的路径，在右边属性栏名称中粘贴闸刀开关的路径，即可变成闸刀开关的外观形式。

2.3 设置底板外观

选中底板，在右边图形（背景），去除背景颜色，再拖动底板改为和开关大小接近。

在组件栏中点击工具函数 , 选择透明传递，在页面空白处点击下，再次选择组件栏中工具函数，选择数学计算，在页面空白处点击下，最后在组件栏中选择输入框在页面空白处点击，选择合适的位置摆放好。

2.5 设置工具函数

2.6 连线串起各组件

选择透明传递单击右键交互连接指向开关图标，操作开关的 path，关联透明传递的输入 input；
再选择开关图标单击右键交互连接指向基本数学计算，选择执行 exec, 点击确定；
选择基本数学计算单击右键交互连接指向输入框，操作输入框的数值 value，关联基本数学计算的 output 输出；
同时再选择输入框单击右键交互链接指向基本数学计算，操作它的输入 input, 关联输入框的 value 数值；
再选择输入框单击右键交互链接指向透明传递，操作透明传递的执行 exec 和 bindControlsVal，在 bindControlsVal 后面选择关联透明传递的数值 value；
选择输入框，在右边的属性栏连线操作修改 bindControlsVal 索引 2 对应的数值为 “0”；
最后点击保存，预览。