【低代码系列之万物互联】怎么打通物料，渲染器，属性设计器？

序

低代码平台核心的三个概念：物料、渲染器、属性设置器。那 Low-Code Engine 怎么将他们串联起来形成一个整体，并保持高拓展性，只要你动手做过低代码, 你就会发现前文提到的协议的重要性了。

• 《低代码引擎搭建协议规范》
• 《低代码引擎物料协议规范》
• 《低代码引擎资产包协议规范》

什么是物料？

物料是页面搭建的原料，按照粒度可分为组件、区块和模板：

• 组件：组件是页面搭建最小的可复用单元，其只对外暴露配置项，用户无需感知其内部实现；
• 区块：区块是一小段符合低代码协议的 schema，其内部会包含一个或多个组件，用户向设置器中拖入一个区块后可以随意修改其内部内容；
• 模板：模板和区块类似，也是一段符合低代码协议的 schema，不过其根节点的 componentName 需固定为 Page，它常常用于初始化一个页面；

低代码编辑器中的物料需要进行一定的配置和处理，才能让用户在低代码平台使用起来。这个过程中，需要一份一份配置文件，也就是资产包。资产包文件中，针对每个物料定义了它们在低代码编辑器中的使用描述。

先看一下一份简单的 Button 物料配置

{
    snippets: [
    {
        title: '主按钮',
        screenshot:'',
        schema: {
        componentName: 'Button',
        props: {
            type: 'primary',
            children: '主按钮'
        }
        },
        id: '默认分组_通用_Button_主按钮'
    },
    ],
    componentName: 'Button',
    title: '按钮',
    category: '通用',
    props: [
    {
        title: '功能',
        display: 'block',
        type: 'group',
        items: [
        {
            name: 'children',
            title: {
            label: '内容',
            tip: 'children | 内容'
            },
            propType: {
            type: 'oneOfType',
            value: ['node', 'string']
            },
            setter: ['SlotSetter', 'StringSetter', 'VariableSetter']
        },
        ]
    },
    configure: {
    supports: {
        events: [
        {
            name: 'onClick',
            template:
            "onClick(event,${extParams}){\n// 点击按钮时的回调\nconsole.log('onClick', event);}"
        }
        ],
        style: true
    }
    },
    npm: {
    package: '@alilc/lowcode-materials',
    version: '1.0.3',
    exportName: 'Button',
    main: 'build/antd-lowcode/view.js',
    destructuring: true
    },
    group: {
    zh_CN: '默认分组',
    en_US: 'DefaultGroup',
    type: 'i18n'
    },
    priority: 0
},

其中基本上涵盖了绝大部分我们编码过程中可能需要的属性参数，从物料就可以看见他与渲染器，属性设置器之间的关联，

• snippets 代码片段 定义了组件不同状态下的低代码 schema (可以有多个)，用户从组件面板拖入组件到设置器时会向页面 schema 中插入 snippets 中定义的组件低代码 schema
• props 组件属性信息 定义了属性设置器需要的参数，包含了每一个属性的 setter，参数默认值等等，

• configure 编辑体验增强 定义各种定制编辑能力的配置信息

  • props 属性面板配置

    用于属性面板能力描述

  • component 组件能力配置

    与组件相关的能力、约束、行为等描述，有些信息可从组件视图实例上直接获取

  • supports 通用扩展配置能力支持性

    用于通用扩展面板能力描述

  • advanced 高级特性配置

    用户可以在这些配置通过引擎上下文控制组件在设置器中的表现，例如自动初始化组件的子组件、截获组件的操作事件进行个性化处理等

    {
    "configure": {
        // 支持的事件枚举
        "supports": {
        // 支持事件列表
        "events": ["onClick", "onChange"],
        // 支持循环设置
        "loop": true,
        // 支持条件设置
        "condition": true,
        // 支持样式设置
        "styles": true,
        }
    }
    }

什么是设置器？

设置器主要用于低代码组件属性值的设置，顾名思义叫"设置器"，又称为 Setter。由于组件的属性有各种类型，需要有与之对应的设置器支持，每一个设置器对应一个值的类型。

其中包含四类设置器：

• 属性：展示该物料常规的属性
• 样式：展示该物料样式的属性
• 事件：如果该物料有声明事件，则会出现事件面板，用于绑定事件。
• 高级：两个逻辑相关的属性，条件渲染和循环

刚才我们在物料中看见的setter 配置就是给设置器的，Low-Code Engine 官方提供了常用的设置器，当然也可以自定义，

Low-Code Engine 设置器列表

 {
    name: 'type',
    title: {
    label: '类型',
    tip: 'type | 设置按钮类型'
    },
    propType: {
    type: 'oneOf',
    },
    setter: [
    {
        componentName: 'SelectSetter',
        props: {
        options: [
            ...
          ]
        }
    },
    'VariableSetter'
    ]
 }

什么是渲染器？

渲染器就是画布，提供物料编排能力，交互能力。物料的 snippets 提供的渲染器的基本渲染视图描述

渲染依赖于 schema 和 components。其中 schema 和 components 需要一一对应，schema 中使用到的组件都需要在 components 中进行声明，否则无法正常渲染。

重要组成

• schema

  搭建基础协议数据，渲染模块将基于 schema 中的内容进行实时渲染。

• components

  渲染模块渲染页面需要用到的组件依赖的实例，components 对象中的 Key 需要和搭建 schema 中的 componentName 字段对应。

• componentsMap

  配置规范参见《低代码引擎物料协议规范》，主要在搭建场景中使用，用于提升用户搭建体验。

  • 属性配置校验：用户可以配置组件特定属性的 propTypes，在搭建场景中用户输入的属性值不满足 propType 配置时，渲染模块会将当前属性设置为 undefined，避免组件抛错导致编辑器崩溃；
  • isContainer 标记：当组件被设置为容器组件且当前容器组件内没有其他组件时，用户可以通过拖拽方式将组件直接添加到容器组件内部；
  • parentRule 校验：当用户使用的组件未出现在组件配置的 parentRule 组件内部时，渲染模块会使用 visualDom 组件进行占位，避免组件抛错的同时在下钻编辑场景也能够不阻塞用户配置，典型的场景如 Step.Item、Table.Column、Tab.Item 等等。

• appHelper

  appHelper 主要用于设置渲染模块的全局上下文，目前 appHelper 支持设置以下上下文：

  • utils：全局公共函数
  • constants：全局常量
  • location：react-router 的 location 实例
  • history：react-router 的 history 实例

最后

兵马未动，粮草先行，Low-Code Engine 定义了基础协议，致力于解决低代码平台概念不通、物料孤岛、生态隔离的一系列问题，其实做任务复杂系统都可以如此，先设计，在编码，好过瞎弄一通，最后发现开始就错了，又推翻重来。

• 先思考，后动手 🍖
• 先规范，后实现 🌮
• 先摸鱼、后摆烂 🍛

系列文章

• 【低代码系列之序章】打翻前端的狗碗？
• 【低代码系列之万物之初】重生之梦回Dreamweaver？
• 【低代码系列之哈姆雷特】千变万化的属性设置器

本文首发于 @阿乐去买菜，转载请署名出处