云搭低代码
自己系统内部搭建的低代码平台，用于快速搭建业务后台和营销页面，有点像明道云。
平台有自己的用户体系、权限体系、工作流
Q: 组件间如何联动
A: 区块、组件都有自己的生命周期和状态管理。
每个生命周期，通过全局引用，获取当前区块其他组件暴露出来的状态和变量
Q: 如何动态加载配置组件？比如说学校自己团队想开发一个组件的功能，需要怎么加入进来
A: 公司起草了一份简单的低代码开发协议，规定了接入的方式。有点像明道云，用户创建一个应用后，会自带
名词
物料系统名词
- 基础组件（Basic Component）：前端领域通用的基础组件
- 图表组件（Chart Component）：前端领域通用的图表组件
- 业务组件（Business Component）：业务领域内基于基础组件之上定义的组件，可能会包含特定业务域的交互或者是业务数据，对外仅暴露可配置的属性，且必须发布到公域（如阿里 NPM）；在同一个业务域内可以流通，但不需要确保可以跨业务域复用
- 低代码业务组件（Low-Code Business Component）：通过低代码编辑器搭建而来，有别于源码开发的业务组件，属于业务组件中的一种类型，遵循业务组件的定义；同时低代码业务组件还可以通过低代码编辑器继续多次编辑
- 布局组件（Layout Component）：前端领域通用的用于实现基础组件、图表组件、业务组件之间各类布局关系的组件，如三栏布局组件
- 区块（Block）：通过低代码搭建的方式，将一系列业务组件、布局组件进行嵌套组合而成，不对外提供可配置的属性。
- 可通过 区块容器组的包裹，实现区块内部具备有完整的样式、事件、生命周期管理、状态管理、数据流转机制。
- 能独立存在和运行，可通过复制 schema 实现跨页面、跨应用的快速复用，保障功能和数据的正常。
- 页面（Page）：由组件 + 区块组合而成。由页面容器组件包裹，可描述页面级的状态管理和公共函数。
- 模板（Template）：特定垂直业务领域内的业务组件、区块可组合为单个页面，或者是再配合路由组合为多个页面集，统称为模板。
低代码搭建系统名词
- 搭建编辑器: 使用可视化的方式实现页面搭建，支持组件 UI 编排、属性编辑、事件绑定、数据绑定，最终产出符合搭建基础协议规范的数据。
- 属性面板：低代码编辑器内部用于组件、区块、页面的属性编辑、事件绑定、数据绑定的操作面板
- 画布面板：低代码编辑器内部用于 UI 编排的操作面板。
- 大纲面板：低代码编辑器内部用于页面组件树展示的面板。
- 编辑器框架：搭建编辑器的基础框架，包含主题配置机制、插件机制、setter 控件机制、快捷键管理、扩展点管理等底层基础设施。
- 入料模块：专注于物料接入，能自动扫描、解析源码组件，并最终产出一份符合《低代码引擎物料协议规范》的 Schema JSON。
- 编排模块：专注于 Schema 可视化编排，以可视化的交互方式提供页面结构编排服务，并最终产出一份符合《低代码搭建基础协议规范》的 Schema JSON。
- 渲染模块：专注于将 Schema JSON 渲染为 UI 界面，最终呈现一个可交互的页面。
- 出码模块 Schema2Code：专注于通过 Schema JSON 生成高质量源代码，将符合《低代码搭建基础协议规范》的 Schema JSON 数据分别转化为面向 React / Rax / 阿里小程序等终端可渲染的代码。
- 事件绑定：是指为某个组件的某个事件绑定相关的事件处理动作，比如为某个组件的点击事件绑定一段处理函数或响应动作（比如弹出对话框），每个组件可绑定的事件由该组件自行定义。
- 数据绑定：是指为某个组件的某个属性绑定用于该属性使用的数据。
- 生命周期: 一般指某个对象的生老病死，本文中指某个实体（组件、容器、区块等等）的创建、加载、显示、销毁等关键生命阶段的统称。
协议结构
协议最顶层结构如下：
- version { String } 当前协议版本号
- componentsMap { Array } 组件映射关系
- componentsTree { Array } 描述模版/页面/区块/低代码业务组件的组件树
- utils { Array } 工具类扩展映射关系
- i18n { Object } 国际化语料
- constants { Object } 应用范围内的全局常量
- css { string } 应用范围内的全局样式
- config: { Object } 当前应用配置信息
- meta: { Object } 当前应用元数据信息
- dataSource: { Array } 当前应用的公共数据源
- router: { Object } 当前应用的路由配置信息
- pages: { Array } 当前应用的所有页面信息
json
{
"version": "1.0.0", // 当前协议版本号
"componentsMap": [{ // 组件描述
"componentName": "Button",
"package": "@alifd/next",
"version": "1.0.0",
"destructuring": true,
"exportName": "Select",
"subName": "Button"
}],
"utils": [{
"name": "clone",
"type": "npm",
"content": {
"package": "lodash",
"version": "0.0.1",
"exportName": "clone",
"subName": "",
"destructuring": false,
"main": "/lib/clone"
}
}, {
"name": "moment",
"type": "npm",
"content": {
"package": "@alifd/next",
"version": "0.0.1",
"exportName": "Moment",
"subName": "",
"destructuring": true,
"main": ""
}
}],
"componentsTree": [{ // 描述内容，值类型 Array
"id": "page1",
"componentName": "Page", // 单个页面，枚举类型 Page|Block|Component
"fileName": "Page1",
"props": {},
"css": "body {font-size: 12px;} .table { width: 100px;}",
"children": [{
"componentName": "Div",
"props": {
"className": ""
},
"children": [{
"componentName": "Button",
"props": {
"prop1": 1234, // 简单 json 数据
"prop2": [{ // 简单 json 数据
"label": "选项 1",
"value": 1
}, {
"label": "选项 2",
"value": 2
}],
"prop3": [{
"name": "myName",
"rule": {
"type": "JSExpression",
"value": "/\w+/i"
}
}],
"valueBind": { // 变量绑定
"type": "JSExpression",
"value": "this.state.user.name"
},
"onClick": { // 动作绑定
"type": "JSFunction",
"value": "function(e) { console.log(e.target.innerText) }"
},
"onClick2": { // 动作绑定 2
"type": "JSExpression",
"value": "this.submit"
}
}
}]
}]
}],
"constants": {
"ENV": "prod",
"DOMAIN": "xxx.com"
},
"css": "body {font-size: 12px;} .table { width: 100px;}",
"config": { // 当前应用配置信息
"sdkVersion": "1.0.3", // 渲染模块版本
"historyMode": "hash", // 不推荐，推荐在 router 字段中配置
"targetRootID": "J_Container",
"layout": {
"componentName": "BasicLayout",
"props": {
"logo": "...",
"name": "测试网站"
},
},
"theme": {
// for Fusion use dpl defined
"package": "@alife/theme-fusion",
"version": "^0.1.0",
// for Antd use variable
"primary": "#ff9966"
}
},
"meta": { // 应用元数据信息，key 为业务自定义
"name": "demo 应用", // 应用中文名称，
"git_group": "appGroup", // 应用对应 git 分组名
"project_name": "app_demo", // 应用对应 git 的 project 名称
"description": "这是一个测试应用", // 应用描述
"spma": "spa23d", // 应用 spm A 位信息
"creator": "月飞",
"gmt_create": "2020-02-11 00:00:00", // 创建时间
"gmt_modified": "2020-02-11 00:00:00", // 修改时间
...
},
"i18n": {
"zh-CN": {
"i18n-jwg27yo4": "你好",
"i18n-jwg27yo3": "中国"
},
"en-US": {
"i18n-jwg27yo4": "Hello",
"i18n-jwg27yo3": "China"
}
},
"router": {
"baseUrl": "/",
"historyMode": "hash", // 浏览器路由：browser 哈希路由：hash
"routes": [
{
"path": "home",
"page": "page1"
}
]
},
"pages": [
{
"id": "page1",
"treeId": "page1"
}
]
}