UIOTOS：像设计原型那样，搭建复杂的前端应用！

什么是UIOTOS

首先，这是一款0代码编程工具，通用在前端应用开发领域，拥有独创技术专利。

其次，这也是一款工业组态软件，可搭建带有丰富交互和业务逻辑的组态画面和数据大屏。

最后，这还是一款WEB前端搭建工具，可用于复杂的后台管理系统，实现与vue等常规代码开发媲美的效果。

1. 0代码编程

用户无需懂编程语言，以独特的连线和嵌套操作，结合常见的拖拽编辑，可以实现定制化交互界面、复杂业务逻辑的开发，达到与vue、QT等代码开发媲美的效果，适用于工业组态、数据大屏、客户端工具、中后台管理等。

示例1：新风系统的组态监控画面，包含了数据模拟、扇叶转动、点击切换启停等。

示例2：一个类似计算器的简单程序，比较数值大小，将结果以指定文字输出。以下分别是运行和编辑状态。

示例3：工业流程组态中，机器手位置运动模拟程序。

其他示例：角度自增实现转定、随机颜色输出模拟状态灯、指定范围内数值自增自减往复、模拟数据源曲线叠加滚动、对任意数组提取指定索引的值、功能模块嵌套封装成组件。

2. 工业组态

具备常见的拖拽、编辑功能，支持矢量绘图，提供仪表、曲线等各种实时展示和数据分析组件，可以快速搭建炫酷的展示画面。结合连线、嵌套、属性暴露等0代码特有的操作，用户可以搭建出带有复杂功能的组态页面，不仅仅局限于数据展示（更多见WEB前端）。

示例如下，包括热站监控、水泵监控、发电机风烟、管网监控、河道监控、交通监控，基本上任意风格的组态监控和大屏可视化展示，都可以拖拽编辑来搭建。（并不支持3D直接编辑设计）

此外，提供了物联中台（可选），支持modbus、opc、西门子plc等各类型协议或子系统SDK API的集成接入，数据通过API组件以MQTT、HTTP、WEBSOCKET等通道传递给图形UI组件，实现实时展示或历史分析。

3. WEB前端

组态和大屏侧重于绘图和数据展示，而业务应用不仅是展示，还有界面交互、业务逻辑、接口调用、数据解析等。

这些往往带有大量的逻辑判断，同时还需要模块化封装，便于将复杂的业务应用功能逐层拆解，形成各个相互独立、通用化可复用的模块，这也是目前vue这类流行的渐进式前端开发框架在做的。

UIOTOS独有的逐层嵌套和属性暴露机制，从0代码的角度解决了上述问题，同样也实现了将复杂的应用拆解成模块化可复用的单元，增量化、渐进式搭建复杂的WEB前端，整个过程无需代码。

示例1：招商租赁系统的0代码前端

示例1对应的编辑操作：

示例2：楼宇集成平台-访客员工等人员管理

示例2对应的编辑操作：

External Player - 哔哩哔哩嵌入式外链播放器

不过UIOTOS的定位绝非取代现有的WEB开发框架（比如vue、jquery），而是相互结合。

现有的web资源或者框架，通过UIOTOS的规范进行少量封装工作，就能成为0代码扩展组件，用于拖拽、编辑、连线和嵌套。比如数学计算、图表（如echarts）、地图引擎（如leaflet）、文档编辑（如markdown）、网络请求（如jquery ajax）等。

另一方面，UIOTOS 0代码搭建的应用页面，是可以嵌套给代码框架，并且提供js接口用于访问组件或者接受组件的操作事件，成为代码开发的前端框架中的一部分。

如何实现的？

1. 产品名词

2. 技术栈

UIOTOS前端基于canvas、国产图形引擎ht.js（ht for web），天然支持2D和3D、图形和UI无缝融合。后端采用了腾讯开源的ORM框架APIJSON和IOTOS物联中台，分别提供业务万能接口，用于跟数据库打交道的CURD类型的应用，以及与设备、硬件打交道的客户端、物联网应用。

当然，作为一款前端应用0代码工具，前后端是完全分离的。

因此，如果已有或自建后端，完全可以只适用前端部分，生成的前端应用包括了UI、布局、交互、接口调用、解析逻辑等，只需要通过API组件与后端提供的接口通信即可，相当于实现了通常用vue开发的前端部分。

3. 技术原理

相比其他低代码或无代码平台，UIOTOS的设计方式较为独特，有与面相对象编程类似的思想，从理论上能达到与代码开发等同的效果。

如下表所示，连线操作、容器嵌套相当于开发中的赋值调用、继承派生，各组件具体的功能属性相当于类库的函数方法，内嵌组件图元的form绑定相当于基类成员默认私有属性切换成公有属性等。

📌 有面相对象软件编程经验的开发者更容易理解。其他用户可忽略。

常规代码开发中面向对象的概念	UIOTOS 0代码搭建面向组件的概念
类 (class)	页面 (display)
派生/继承	页面嵌套
构造函数	组件属性值的初始配置
析构函数	组件的reset属性
对象	图元组件
实例化	容器加载页面url
私有成员（private）	默认内嵌组件图元属性不做form绑定
公共成员（public）	内嵌图元属性form绑定
属性	基础属性 (外观、风格等配置)
方法	高级属性 (赋值会触发响应)
事件	事件属性
对象调用	连线操作
对象被调用	被连线操作
事件派发	连线操作以事件属性反向关联
全局变量对象引用及消息传递	消息总线收发器 (发送器/接收器)
类成员中引入其他类的对象	页面中拖放入其他内嵌页面
引用对象传参 this	连线操作 userData 属性
对象a.b.c 逐层寻址调用	属性以 a>b>c 形式的keyURL 字符串唯一识别操作
函数库	函数组件
函数引用	函数组件 function 属性下拉选择
函数入参	函数组件 inputs 动态数组属性
函数出参	函数组件 output 属性
函数执行和返回事件	函数组件的 exec 属性和 bindControls 事件操作连线
工程模式通常分为应用开发或组件开发， 其中应用模式下调用各个组件，组件模式用来被应用调用	只唯一的页面编辑模式，是设置下层图元属性值，还是 作为下层图元对上层嵌套图元初始派发，取决于图元属 性变量绑定类型自动判别。
页面通信类	收发器组件
数据接口类	API组件-HTTP
网络通信类	API组件-MQTT

为什么要做？

1. 前端技术更新快，开发和学习成本高

在软件开发领域，UI界面开发技术更新迭代最快，层出不穷。以当下流行的WEB前端为例，开发需要了解npm、webpack、react/vue、ES6 语法、ts，此外还有状态管理、路由等。桌面客户端开发则门槛更高。

2. 传统大屏组态不适合搭建复杂功能

工业领域虽然有组态软件来降低界面展示的开发门槛，但是随着行业发展，界面的定制化要求越来越高，复杂的交互功能、业务逻辑组态软件难以胜任，要么通过脚本代码来扩展，要么则定制开发上层管理应用。2D数据可视化大屏也类似。

3. 低代码有用户门槛，定制扩展需开发

低代码作为近年来热门概念，一些平台可以过后端配置自动生成对应的前端代码，实现权限、组织等基础功能开箱即用；另一些通过拖拽、配置，实现大部门常见页面的可视化搭建，结合一定的代码开发实现复杂的、定制化的需求，减少前端页面开发工作量。

这些确实能大大提升前端UI界面的搭建效率，而复杂的业务逻辑作为大前端/客户端应用功能的重要组成部分，通常就需要代码来定制，组件功能的扩展也需要代码开发。

📌 此外还有数字孪生低代码，暂不展开，UIOTOS目前不适合3D场景0代码（详见不适合哪些场景？）。

有什么特别之处？

1. VUE对比

都可以实现增量化、渐进式定制开发前端应用，UIOTOS除了不需要编写代码，还能实现vue难以直接实现的矢量绘图。此外，对于特定功能，vue/js代码能够轻易实现，而UIOTOS 0代码难以或者无法实现时，可以将vue js代码封装成UIOTOS的0代码组件。

2. 组态对比

都能实现矢量绘图、数据大屏可视化展示，但是UIOTOS还能通过0代码实现复杂的业务逻辑，并且能0代码封装组件，不需要像其他组件软件那样需要代码二次开发。此外，UIOTOS搭建的组态页面之间可以相互嵌套，方便实现复杂的展现和交互效果。

3. 低代码对比

都提供可视化组件库，通过编辑配置生成页面，减少前端开发工作量。UIOTOS可以面向非开发人员，无需要求用户懂代码，而常见的低代码平台面向程序员，需要通过代码再次加工处理才能实现复杂的定制化需求。

UIOTOS通过嵌套、连线、属性暴露搭建页面有“面向对象”的思想，与低代码生成前端中间层代码的思路迥异。

此外，低代码通常是前后端一体的，难以单独使用前部分。UIOTOS是前后端完全分离的设计，可以使用配套的后端0代码，也可以完全只用前端部分，不强行绑定。

对用户的技能要求？

📌 UIOTOS的设计目标是让前端应用开发成一项为日常办公技能。

对用户是否能编写js代码（不要求懂vue/react/webpack等前端开发框架），区分成普通用户和高级用户。

1. 普通用户

用现成的组件，通过连线、嵌套和属性配置来搭建定制化的前端应用，无需懂开发语言，当成工具软件学习培训即可上手。用户可以是产品经理、UI设计师、项目经理、实施工程师。

2. 高级用户

可以使用代码块组件，兼容js代码逻辑。通过编写js代码做处理。处理后形成的组件图元或者页面，通过收藏或者经过容器嵌套再收藏后，可给到普通用户使用。

📌 此外，可以利用现有的web资源，将jquery、vue、react或原生js进行开发扩展，将ui组件或者功能逻辑封装成UIOTOS中的基础组件，比如gis地图、文本编辑等，需具备专业web前端开发技术。

部署使用方式？

在线试用

地址：ui.aiotos.net

账号：develop 密码：iotos123456

离线安装

📌 离线安装包获取，请联系下方服务支持！

（微信：iotosoft；电话：400-1188-502）

400-1188-502

www.uiotos.net