关于低代码:低代码系列之万物互联怎么打通物料渲染器属性设计器

序

低代码平台外围的三个概念：物料、渲染器、属性设置器。那 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？
• 【低代码系列之哈姆雷特】变幻无穷的属性设置器

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