低代码协议设计规范

本文档详细介绍低代码平台的协议设计规范，包括页面结构、组件定义、事件处理和数据源配置等核心内容。

参考资料

页面协议结构规范

基础字段定义

字段	类型	含义	说明
`componentName`	string	组件类型	渲染组件类型的唯一标识
`id`	string	组件 ID	组件的唯一标识符
`css`	string	组件样式	组件的样式配置
`props`	object	组件属性	透传给组件的 props
`dataSource`	array	数据来源	组件关联的数据源配置

高级字段配置

condition（渲染条件）

子字段	类型	含义
`type`	string	属性值类型
`value`	any	条件判断值

state（状态变量）

子字段	类型	含义
`type`	string	变量类型
`value`	any	当前作用状态变量

lifeCycles（生命周期）

子字段	类型	含义
`type`	string	属性值类型
`value`	function	生命周期回调函数

events（事件配置）

子字段	类型	含义
`type`	string	属性值类型
`value`	function	事件处理函数

slots（组件插槽）

子字段	类型	含义
`type`	string	属性值类型
`value`	any	插槽内容
`template`	string	插槽名称

数据类型定义

低代码协议中支持多种数据类型，用于描述不同的属性值和配置项。

类型	枚举值	含义	应用场景
JSSlot	`JSSlot`	插槽类型	组件插槽内容
JSExpression	`JSExpression`	表达式类型	动态变量、条件判断
JSFunction	`JSFunction`	函数类型	事件处理、生命周期
JSString	`JSString`	字符串类型	文本内容、样式值
JSNumber	`JSNumber`	数字类型	数值配置、计算
JSObject	`JSObject`	对象类型	复杂配置项
JSArray	`JSArray`	数组类型	列表数据、选项配置
JSBoolean	`JSBoolean`	布尔类型	开关状态、条件判断

类型使用示例

// JSExpression 示例
{
  "type": "JSExpression",
  "value": "this.state.isVisible"
}

// JSFunction 示例
{
  "type": "JSFunction",
  "value": "function(event) { console.log('clicked'); }"
}

// JSSlot 示例
{
  "type": "JSSlot",
  "template": "footer",
  "value": [/* 子组件配置 */]
}

事件枚举类型

通用事件

所有组件通用的标准事件：


行为	key	是否通用（组件类型）	组件库	备注
鼠标单击的回调事件	click	是	delight
鼠标按下的回调事件	mousedown	是
鼠标进入的回调事件	mouseenter	是
鼠标离家的回调事件	mouseleave	是
鼠标抬起的回调事件	mouseup	是
值变化的回调事件	change	是
输入的回调事件	input	是
获得焦点的回调事件	focus	是
失去焦点的回调事件	blur	是
清除输入内容的回调事件	clear	是
键盘回车的回调事件	enter	是
开始时间输入的回调事件	input:start	否（时间选择器）
开始时间获得焦点的回调事件	focus:start	否（时间选择器）
开始时间失去焦点的回调事件	blur:start	否（时间选择器）
结束时间输入的回调事件	input:end	否（时间选择器）
结束时间获得焦点的回调事件	focus:end	否（时间选择器）
结束时间失去焦点的回调事件	blur:end	否（时间选择器）
选项列表滚动时的回调函数	scroll	否（穿梭框）
搜索框内容时改变时的回调函数	search	否（穿梭框）
加载更多按钮单击的回调事件	load	否（list）
当表格的排序条件发生变化的时候会触发该事件	sort	否（table）
表格中的单元格点击事件	cell-click	否（table）
选中值发生改变的时候	selectedChange	否（table）
当全选按钮发生变化的时候触发	selectedAll	否（table）
默认确认按钮点击的回调事件	confirm	否（modal）
默认取消按钮点击的回调事件	cancel	否（modal）
实时返回 tableform 数据	update:formValue	否（tableform）	物料
筛选项或者选择项更改触发	viewChange	否（Lightning列表）
对整个表单的内容进行验证。返回数据,成功返回 type 和 data,失败则返回 type、当前 data 和 error 对象	onSubmit	否（Lightning表单）

dataSource规范


字段	类型	枚举值	含义	含义	应用
type	string	fetch	数据源请求
mopen	安卓的请求	不高优，可以先不支持
mtop	小程序的接口请求包	不高优，可以先不支持
jsonp	jsonp
custom	自定义
isInit	boolean \| JSExpression	-	是否初始化请求
isSync	boolean \| JSExpression		是否需要串行执行
willFetch	JSFunction		请求前对参数的处理函数
shouldFetch	JSFunction		本次请求是否可以正常请求
requestHandler	JSFunction		请求前参数的处理函数
dataHandler	JSFunction		请求后response的处理函数
errorHandler	JSFunction		请求后error的处理函数
options	object	params	请求参数
method	请求方法
isCors	是否跨域
timeout	超时时间
headers	请求头
uri	请求url

/** 数据源的状态 */export enum RuntimeDataSourceStatus {  /** 初始状态，尚未加载 */  Initial = 'init',   /** 正在加载 */  Loading = 'loading',   /** 已加载(无错误) */  Loaded = 'loaded',   /** 加载出错了 */  Error = 'error',}

setter编辑器规范


字段	类型	枚举值	类型	含义
componentName	string	https://www.yuque.com/lce/doc/grfylu	string	编辑器面板组件
props	object	name	string	映射字段props
		title		编辑器面板解释文案
		propType	string	字段类型
		setter	string	编辑器面板组件
		config		子编辑器面板组件
		isRequired	boolean	是否必填
itemSetter	object	componentName		嵌套编辑器面板
		props

{ "componentName": "comp", "id": "id", "props": {}, "style": {}, "lifeCycles": {}, "events": {}, "children":[],  ......} {  "componentName": "Page",  "id": "id",  "props": {},  "style": "{body { font-size: 12px;}}",  "condition": { // 是否渲染    "type": "JSExpression",    "value": "!!this.state.isshow"  },  "dataSource":  [      {        "type": "fetch",  // 支持四种类型：fetch/mtop/jsonp/custom        "isInit": true,        "options": {          "params": {},  // TODO：params取值及类型          "method": "GET",          "isCors": true,          "timeout": 5000,          "headers": {},          "uri": "mock/info.json",          "dataHandler": {              "type": "JSFunction",              "value": "function (response) {\nif (!response.data.success){\n    throw new Error(response.data.message);\n  }\n  return response.data.data;\n}"            }        },      }，    ],  "state": {    "data": {      "type": "JSExpression", // TODO: 类型      "value": ${a.b},    }  },  "lifeCycles": {    "onMounted": {      "type": "JSFunction",      "value": "function componentDidMount() {\n  console.log('did mount');\n}",  },  "events": {    "onClick": {      "type": "JSFunction",      "value": "", // TODO:     },  },  "children": [    {      "componentName": "Button",      "id": "id",       events:[           {            "onClick": {              "type": "JSFunction",              "value": "function{xxx}",            },            {            "change": {              "type": "JSFunction",              "value": "",           },        ],       slots: [                {                  "type": "JSeexx", // TODO: 类型                },                {                  "type": "JSSlot",                  "template": "footer",                  "value": [                                      "componentName": "Icon",                      "props": {                        "icon": "SmileOutlined",                        "size": 20,                  },                }              ],        }],       dataSource:{},      "props": {        "type": "primary",        "label": "主按钮",        .......      },      setter: [{                componentName: 'ArraySetter',                props: {                  itemSetter: {                    componentName: 'ObjectSetter',                    props: {                      config: {                        items: [                          {                            name: 'label',                            title: '选项名',                            setter: ['StringSetter', 'VariableSetter'],                            isRequired: true                          },                          {                            name: 'value',                            title: '选项值',                            setter: ['StringSetter', 'NumberSetter', 'VariableSetter'],                             // VariableSetter变量型数据设置器                            isRequired: true                          },                          {                            name: 'disabled',                            title: '是否禁用',                            setter: ['BoolSetter', 'VariableSetter'],                             // VariableSetter变量型数据设置器                          },                        ],                      },                    },                  },                },              },            },           {             name: 'placeholder',             title: { label: '选择框默认文字', tip: '选择框默认文字' },             propType: 'string',             setter: 'StringSetter'          },            {              name: 'allowClear',              title: { label: '支持清除', tip: '是否允许清除' },              propType: 'bool',              defaultValue: false,              setter: 'BoolSetter'            },       ],      children:[], // 组件嵌套    }}

低代码协议设计规范

On this page