# 应用大师 UIOTOS v1.0

## 打包部署
### aiotos.js
    进入到./uiotos/aiotos/目录，执行build.bat即可。
#### 源码备份
    进入到./uiotos/aiotos/src/目录，执行backup，备份代码在最外层的uiotos-bak目录中，按照时间日期存放
#### 打包输出
    进入到./uiotos/aiotos/src/目录，执行release，将会把space中的文件基本上除了.git的，会复制到uiotos-v1里面，
    同时会对js进行混淆压缩，且确保源码项目的storage也是跟对外发布的storage是独立的git仓库，独立维护。
## 启动方式
node server/server.js

# [什么是UIOTOS？](https://www.yuque.com/liuhuo-nc809/uiotos/fgfotz46h78q0yv6)
UIOTOS中文名称`前端大师`，是一款基于图形技术的前端0代码工具，支持通过`连线`和`嵌套`无门槛来搭建各类复杂的的交互界面，包括后台管理系统、组态数据大屏等，实现跟代码开发媲美的效果。
# 为什么要做？
## 前端技术更新快，开发和学习成本高
在软件开发领域，UI界面开发技术更新迭代最快，层出不穷。以当下流行的WEB前端为例，开发需要了解npm、webpack、react/vue、ES6 语法、ts，此外还有状态管理、路由等。桌面客户端开发则门槛更高。
## 传统大屏组态不适合搭建复杂功能
工业领域虽然有组态软件来降低界面展示的开发门槛，但是随着行业发展，界面的定制化要求越来越高，复杂的`交互功能`、`业务逻辑`组态软件难以胜任，要么通过脚本代码来扩展，要么则定制开发上层管理应用。2D数据可视化大屏也类似。
## 低代码有用户门槛，定制扩展需开发
低代码作为近年来热门概念，一些平台可以过后端配置自动生成对应的前端代码，实现权限、组织等基础功能开箱即用；另一些通过拖拽、配置，实现大部门常见页面的可视化搭建，结合一定的代码开发实现复杂的、定制化的需求，减少前端页面开发工作量。 这些确实能大大提升前端UI界面的搭建效率，而复杂的业务逻辑作为大前端/客户端应用功能的重要组成部分，通常就需要代码来定制，组件功能的扩展也需要代码开发。

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

# 有什么亮点特色？
## 0代码无门槛搭建完整的前端功能
除了最基本的页面`UI布局`设计外，UIOTOS 0代码涵盖了前端开发的其他各个环节，包含`交互逻辑`、`接口请求`、`数据解析`等，支持渐进式、模块化真正以搭积木的方式，通过`拖拽配置`、`逐层嵌套`、`属性暴露`、`事件穿透`、`连线操作`，实现从基础组件、功能部件到多页应用从局部到整体的快速搭建，并兼容JQuery/Vue/React等现有WEB生态的开发扩展。 除了基础组件的升级和扩展，整个搭建过程通常以鼠标操作为主，无需了解前端开发技术，后端工程师、产品经理、UI设计师、实施工程师等均可上手（详见[对用户的技能要求？](#dbvjO)）

📌 对于非业务逻辑的特定功能，比如json对象转换成字符串，UIOTOS提供了代码块及函数组件支持，可以将通用功能组件化，交由连线操作输入、输出、执行，代替代码调用。

## 页面组件化，支持任意多层嵌套
UIOTOS的鲜明特色是`页面任意嵌套`、`属性逐层暴露`和`连线赋值操作`，这些结合在一起，可以实现0代码搭建页面功能（包含UI界面和业务逻辑）既可以独立运行使用，也可以作为封装好的组件被拖放到其他页面中当成普通组件使用。可以说，在UIOTOS中一切都是组件。 组件的开发扩展也因此与众不同：只有最基础的通用组件需要代码开发“造轮子”，而通过拖拽、配置、连线、嵌套搭建出来的具备一定功能和业务逻辑的页面，经过容器组件嵌套并收藏后，就成为了扩展组件，整个过程无需代码开发。用途也不仅限于界面模板布局，而是可以像基础组件一样，参与连线操作、容器嵌套，搭建新的、更上层页面的业务逻辑。

📌 基础组件通常功能单一，数量有限，业务无关；而0代码页面搭建的扩展组件，则通常功能复杂，数量无限，并且业务相关。

## 原理上支持定制开发等同的效果
UIOTOS独特的设计方式，让0代码搭建操作与面相对象的开发思想能形成对照，从理论达到与代码定制开发等同的效果。如下表所示，连线操作、容器嵌套相当于开发中的赋值调用、继承派生，各组件具体的功能属性相当于类库的函数方法，内嵌组件图元的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 |

# 不适合哪些场景？
UIOTOS 1.0版本0代码更多是针对后台管理系统类型的应用，也包括复杂交互功能的数据大屏、工业组态等。以下场景暂时支持有限：
## 3D数字孪生0代码搭建
UIOTOS底层图形技术采用了canvas、ht.js，天然支持矢量图形、2D/3D无缝融合。不过并不支持3D场景的0代码搭建，需要代码编写实现动画、交互以及各种定制化的炫酷效果。UIOTOS更多是定位在业务应用方面，通过0代码最大化实现vue/reac等前端开发技术代码开发等同的效果。
## 移动端APP、小程序
UIOTOS在UI交互布局的设计上，对尺寸没有任何限制，页支持长页滑动，也能够搭建出移动端WEB APP风格的页面应用。但是目前1.0版主要是为复杂的PC WEB端设计，基础组件以及布局支持更加灵活，并未提供针对移动端的版本。因此当下用来搭建移动端页面应用会显得比较繁琐，比如字体、弹窗等不够友好。需要在后续版本提供移动端针对性的基础组件和布局支持。
# 对用户的技能要求？

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

对用户是否能编写js代码（不要求懂vue/react/webpack等前端开发框架），区分成`普通用户`和`高级用户`。
## 普通用户
用现成的组件，通过连线、嵌套和属性配置来搭建定制化的前端应用，无需任何软件编程基础，当成工具软件学习培训即可上手。
## 高级用户
可以使用代码块组件，对于当前不支持的功能逻辑，通过编写js代码做处理。处理后形成的组件图元或者页面，通过收藏或者经过容器嵌套再收藏后，可给到普通用户使用。

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

# 部署使用方式？
## 在线试用
地址：[ui.aiotos.net](http://ui.aiotos.net) 账号：`admin ` 密码：`123456`
## 离线安装

方式一：windows下运行一键脚本即可：UIOTOS 1.0 前端大师(WIN）.bat 
方式二：node ./uiotos/server/server.js

## 授权方式：

- *个人用户免费使用*
- 企业授权请联系咨询

![合作支持：15820480374](https://cdn.nlark.com/yuque/0/2023/webp/534201/1682752026658-6bbafe9d-9fdc-4109-8c7f-3395c1e6a330.webp?x-oss-process=image%2Fresize%2Cw_224%2Climit_0#averageHue=%239f9f9f&from=url&height=163&id=dmJ3C&originHeight=224&originWidth=224&originalType=binary&ratio=2&rotation=0&showTitle=true&status=done&style=none&title=%E6%9C%8D%E5%8A%A1%E6%94%AF%E6%8C%81%EF%BC%9A15820480374&width=163 "合作支持：15820480374")

king-ji/UIOTOS一款支持页面嵌套的WEB组态

简介

发行版

贡献者

近期动态

king-ji/UIOTOS一款支持页面嵌套的WEB组态 .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

king-ji/UIOTOS一款支持页面嵌套的WEB组态