01

什么是UIOTOS

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

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

最后，这还是一款WEB前端搭建工具，可用于后台管理系统，代替vue（element-ui、iview）等常规代码开发。

0 代码编程

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

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

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

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

工业组态

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

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

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

WEB前端

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

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

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

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

示例1对应的编辑操作：

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

示例2对应的编辑操作：

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

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

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

02

UIOTOS 是如何实现的

产品名词

技术栈

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

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

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

技术原理

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

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

03

为什么要做 UIOTOS ？

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

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

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

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

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

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

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

此外还有数字孪生低代码，暂不展开，UIOTOS目前不适合3D场景0代码

04

UIOTOS 有什么特别之处？

VUE对比

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

组态对比

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

低代码对比

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

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

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

05

UIOTOS 不适合哪些场景？

UIOTOS 1.0版本0代码更多是针对后台管理系统类型的应用，也包括复杂交互功能的数据大屏、工业组态等。以下场景暂时支持有限。更多参考UIOTOS文档《布局》

3D数字孪生0代码搭建

UIOTOS底层图形技术采用了canvas、ht.js，天然支持矢量图形、2D/3D无缝融合。不过并不支持3D场景的0代码搭建，需要代码编写实现动画、交互以及各种定制化的炫酷效果。

UIOTOS最大的优势在于业务应用方面，通过0代码最大化实现vue/reac等前端开发技术代码开发等同的效果。

移动端APP、小程序

UIOTOS在UI交互布局的设计上，对尺寸没有任何限制，页支持长页滑动，也能够搭建出移动端WEB APP风格的页面应用。但是目前1.0版主要是为复杂的PC WEB端设计，基础组件以及布局支持更加灵活，并未提供针对移动端的版本。

因此当下用来搭建移动端页面应用会显得比较繁琐，比如字体、弹窗等不够友好。需要在后续版本提供移动端针对性的基础组件和布局支持。

06

UIOTOS 对用户的技能要求？

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

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

普通用户

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

高级用户

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

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

07

UIOTOS 部署方式

在线试用

地址：http://ui.aiotos.net/

账号：develop          密码：iotos123456

离线安装

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

授权方式：

• 个人用户免费使用

• 企业授权请联系咨询

合作支持：4001188502

​​​​​​​​​​​​