UIOTOS前端零代码应用蓝图连线+嵌套封装实现MQTT输入0、1切换门禁开和关

### Description

目标
通过连线+嵌套封装，实现MQTT数据推送前端控制门禁开关

**最终效果** 
![输入图片说明](https://foruda.gitee.com/images/1715169794748452613/57b84252_14383716.gif "00.gif")
**实现过程**
**步骤1**：新建一个页面，在工具函数input输入两个门禁的开关图标地址，再通过连线和解析实现输0、1切换图标。
![输入图片说明](https://foruda.gitee.com/images/1715169875240412880/e804354c_14383716.png "01.png")
**步骤2**：再插入图片按钮，通过连线和解析，把工具函数的输出传递给图片按钮组件的path属性。
![输入图片说明](https://foruda.gitee.com/images/1715169898315767405/8318a1a0_14383716.png "02.png")
**步骤3**：插入工具函数“基本数学计算”，设置如图所示属性，再通过连线执行工具函数。
![输入图片说明](https://foruda.gitee.com/images/1715169915215168868/90f72b35_14383716.png "03.png")
**步骤4**：在通过连线把工具函数的输出给到输入框value，输入框再把值返给工具函数的输入,实现点击图片按钮切换开、关两个图标。
![输入图片说明](https://foruda.gitee.com/images/1715169929905679846/787ad9df_14383716.png "04-1.png")
![输入图片说明](https://foruda.gitee.com/images/1715169958236899845/c6af44c0_14383716.png "04-2.png")
**步骤5**：新建一个页面，插入按钮组件并设置其属性。
![输入图片说明](https://foruda.gitee.com/images/1715169945148488614/796a6f29_14383716.png "05.png")
**步骤6**：利用嵌套容器和连线实现点击开关按钮切换门禁开关图标，以及点击门禁开关图标切换开关按钮。
![输入图片说明](https://foruda.gitee.com/images/1715169986813882420/55fdfedd_14383716.png "06.png")
**步骤7**：新建一个页面，利用嵌套容器和网格组合实现如图所示。
![输入图片说明](https://foruda.gitee.com/images/1715169999816639543/7fc6aa8d_14383716.png "07.png")
**步骤8**：打开物联中台，进入到数据点，复制全局标识，作为MQTT的Topic。
![输入图片说明](https://foruda.gitee.com/images/1715170017680598873/7f198cfc_14383716.png "08.png")
**步骤9**：打开MQTT，粘贴在如图所示的位置
![输入图片说明](https://foruda.gitee.com/images/1715170033224854404/061e29f6_14383716.png "09.png")
**步骤10**：实现MQQTT输入0、1切换门禁开和关。
![输入图片说明](https://foruda.gitee.com/images/1715170048258263679/5c59c54c_14383716.gif "10.gif")
什么是UIOTOS？

一款拥有独创专利技术的前端零代码工具，专注于解决前端界面开发定制难题，原型即应用！

具有页面嵌套、属性继承、节点连线等全新特性，学习门槛低，功能极为灵活。

用户无需懂任何前端开发技术，简单了解使用规则，就能够按照业务需求，定制开发复杂的WEB应用。

主要面向后端/算法工程师、硬件/电气工程师，以及产品经理、UI、美术、实施工程师等。

适用于搭建基于物联网平台等的上层业务应用。实现前端开发不求人，项目交付快好省！

GVP 腾讯开源 / APIJSON

Content Risk Flag

Comments (0)

GVP腾讯开源 / APIJSON

Content Risk Flag