低代码

外观

微信公众号

组件转物料 ​

为了能够在低代码平台运行使用我们的基础组件，需要把基础组件转换成低代码平台可识别的组件，也就是物料。物料需要进行一定的配置和处理，这个过程中，需要一份配置文件，也就是资产包（就是一份json）。资产包文件中，针对每个物料定义了它们在低代码编辑器中的使用描述。

如何引入组件 ​

我们需要在资产包里定义这个包的获取方式，如果不定义，就不会被低代码引擎动态加载并对应上组件实例。定义方式是 UMD 的包，低代码引擎会尝试在 window 上寻找对应 library 的实例；

定义低代码编辑器中加载的资源列表，包含公共库和组件(库) cdn 资源等；

字段字段描述字段类型规范等级备注
packages[].id?资源唯一标识StringA资源唯一标识，如果为空，则以 package 为唯一标识
packages[].title?资源标题StringA资源标题
packages[].packagenpm 包名StringA组件资源唯一标识
packages[].versionnpm 包版本号StringA组件资源版本号
packages[].type资源包类型StringAA取值为: proCode（源码）、lowCode（低代码，默认为 proCode
packages[].schema低代码组件 schema 内容objectAA取值为: proCode（源码）、lowCode（低代码）
packages[].deps当前资源包的依赖资源的唯一标识列表ArrayA唯一标识为 id 或者 package 对应的值
packages[].library作为全局变量引用时的名称，用来定义全局变量名StringA低代码引擎通过该字段获取组件实例
packages[].editUrls组件编辑态视图打包后的 CDN url 列表，包含 js 和 cssArrayA低代码引擎编辑器会加载这些 url
packages[].urls组件渲染态视图打包后的 CDN url 列表，包含 js 和 cssArrayAA低代码引擎渲染模块会加载这些 url
packages[].advancedEditUrls组件多个编辑态视图打包后的 CDN url 列表集合，包含 js 和 cssObjectAAA上层平台根据特定标识提取某个编辑态的资源，低代码引擎编辑器会加载这些资源，优先级高于 packages[].editUrls
packages[].advancedUrls组件多个端的渲染态视图打包后的 CDN url 列表集合，包含 js 和 cssObjectAAA上层平台根据特定标识提取某个渲染态的资源， 低代码引擎渲染模块会加载这些资源，优先级高于 packages[].urls
packages[].external当前资源在作为其他资源的依赖，在其他依赖打包时时是否被排除了(同 webpack 中 external 概念)BooleanAAA某些资源会被单独提取出来，是其他依赖的前置依赖，根据这个字段决定是否提前加载该资源
packages[].loadEnv指定当前资源加载的环境ArrayAAA主要用于指定 external 资源加载的环境，取值为 design(设计态)、runtime(预览态)中的一个或多个
packages[].exportSourceId标识当前 package 内容是从哪个 package 导出来的StringAAA此时 urls 无效
packages[].exportSourceLibrary标识当前 package 是从 window 上的哪个属性导出来的StringAAAexportSourceId 的优先级高于exportSourceLibrary ,此时 urls 无效
packages[].async标识当前 package 资源加载在 window.library 上的是否是一个异步对象BooleanAasync 为 true 时，需要通过 await 才能拿到真正内容
packages[].exportMode标识当前 package 从其他 package 的导出方式StringA目前只支持 "functionCall", exportMode等于 "functionCall" 时，当前package 的内容以函数的方式从其他 package 中导出，具体导出接口如: (library: string, packageName: string, isRuntime?: boolean) => any

示例：

js
"packages": [
    {
      "package": "element-ui",
      "version": "2.5.12",
      "urls": [
        "https://unpkg.com/element-ui/lib/index.js",
        "https://unpkg.com/element-ui/lib/theme-chalk/index.css"
      ],
      "library": "ELEMENT"
    },
    {
      "package": "vant",
      "version": "2.12.53",
      "urls": [
        "https://unpkg.com/vant@2.12/lib/vant.min.js",
        "https://unpkg.com/vant@2.12/lib/index.css"
      ],
      "library": "vant"
    }
  ],

如何定义组件 ​

单个组件描述内容为 json 结构，主要包含以下三部分内容，分别为：

  • 基础信息 (A)： 描述组件的基础信息，通常包含包信息、组件名称、标题、描述等。
  • 组件属性信息 (A)： 描述组件属性信息，通常包含参数、说明、类型、默认值 4 项内容。
  • 能力配置/体验增强： 推荐用于优化搭建产品编辑体验，定制编辑能力的配置信息。

基础信息 ElRow示例：

js
{
  "category": "基础组件",
  "componentName": "ElRow",
  "npm": {
    "package": "element-ui",
    "version": "2.30.6",
    "exportName": "Row",
    "destructuring": true
  }
}

基础信息 ​

字段说明

字段字段描述字段类型允许空
componentName组件名称String否
title组件中文名称String否
description组件描述String是
docUrl组件文档链接String否
screenshot组件快照String否
icon组件的小图标String (URL)是
tags组件标签String是
keywords组件关键词，用于搜索联想String是
devMode组件研发模式String (proCode,lowCode)是
npmnpm 源引入完整描述对象Object否
npm.package源码组件库名String否
npm.exportName源码组件名称String否
npm.subName子组件名String否
npm.destructuring解构Bool否
npm.main组件路径String否
npm.version源码组件版本号String否
snippets内容为组件不同状态下的低代码 schema (可以有多个)， 用户从组件面板拖入组件到设计器时会向页面 schema 中插入 snippets中定义的组件低代码 schemaObject[]否
group用于描述当前组件位于组件面板的哪个 tabString否
category用于描述组件位于组件面板同一 tab 的哪个区域String否
priority用于描述组件在同一 category 中的排序String否

组件属性信息 ElRow 示例：

js
"props": [
    {
      "name": "gutter",
      "propType": "number"
    },
    {
      "name": "type",
      "propType": "string",
      "defaultValue": "flex"
    },
    {
      "name": "justify",
      "propType": {
        "type": "oneOf",
        "value": ["start", "end", "center", "space-around", "space-between"]
      },
      "defaultValue": "start"
    },
    {
      "name": "align",
      "propType": {
        "type": "oneOf",
        "value": ["top", "middle", "bottom"]
      }
    },
    {
      "name": "tag",
      "propType": "string",
      "defaultValue": "div"
    }
]

组件属性信息 props ​

描述组件属性信息，通常包含名称、类型、描述、默认值 4 项内容。

字段字段描述字段类型允许空
name属性名称String否
propType属性类型String/Object否
description属性描述String是
defaultValue属性默认值Any是

存在基本类型和复合类型，描述如下：Prop — Vue.js

基本类型 ​

propType 值类型描述PropType 类型
'array'数组类型Array
'bool'布尔类型Boolean
'func'函数类型Function
'number'数字类型Number
'object'对象类型Object
'string'字符串类型String
'node'节点类型定义具名插槽
'any'任意值类型会生成多个setter切换，如：node、string、object、array类型

复合类型 ​

propType 值类型描述用途
{ type: 'oneOf', value: ['a', 'b', 'c', '...']}枚举值类型从给定的数据选择一个，会生成 SelectSetter
{ type: 'oneOfType', value: ['string', 'number', { type: 'array', isRequired: true }]}指定类型中的一种，支持递归描述从给定的数据类型里，可切换 setter
{ type: 'arrayOf', value: 'number'}指定统一成员值类型的数组类型会生成 ArraySetter, value指定每一项的类型
{ type: 'shape', value: [{ name: 'color', propType: 'string' }, { name: 'fontSize', propType: { type: 'number', isRequied: true }}]}指定对象的部分属性名和值类型的对象类型根据指定的key会生成 Objectetter
{ type: 'exact', value: [{ name: 'name', propType: 'string' }, { name: 'quantity', propType: 'number' }]}严格指定对象全部属性名和值类型的对象类型和 shape 类似，但需指定全部key

能力配置/体验增强 configure ​

configure ElRow 示例：

js

"configure": {
    "supports": {
      "events": ["click", "change"],
      "loop": true,
      "condition": true,
      "style": true
    },
    "component": {
      "isContainer": true,
      "isLayout": true
    },
    "props": [
      {
        "type": "group",
        "title": "布局样式",
        "display": "block",
        "items": [
          {
            "type": "field",
            "title": "类型",
            "name": "type",
            "defaultValue": "flex",
            "condition": false
          },
          {
            "type": "field",
            "title": "栅格间隔",
            "name": "gutter",
            "setter": "NumberSetter"
          },
          {
            "type": "field",
            "title": "水平排列",
            "name": "justify",
            "setter": {
              "componentName": "SelectSetter",
              "defaultValue": "start",
              "props": {
                "options": [
                  { "title": "start", "value": "start" },
                  { "title": "end", "value": "end" },
                  { "title": "center", "value": "center" },
                  { "title": "space-around", "value": "space-around" },
                  { "title": "space-between", "value": "space-between" }
                ]
              }
            }
          },
          {
            "type": "field",
            "title": "垂直排列",
            "name": "align",
            "setter": {
              "componentName": "SelectSetter",
              "defaultValue": "start",
              "props": {
                "options": [
                  { "title": "top", "value": "top" },
                  { "title": "middle", "value": "middle" },
                  { "title": "bottom", "value": "bottom" }
                ]
              }
            }
          }
        ]
      }
    ]
  }

基础字段 ​

字段字段描述字段类型备注
props (A)属性面板配置Array用于属性面板能力描述
component(A)组件能力配置Object与组件相关的能力、约束、行为等描述，有些信息可从组件视图实例上直接获取
supports (AA)通用扩展配置能力支持性Object用于通用扩展面板能力描述
advanced (AAA)高级特性配置Object用户可以在这些配置通过引擎上下文控制组件在设计器中的表现，例如自动初始化组件的子组件、截获组件的操作事件进行个性化处理等

属性面板配置 props ​

本站总访问量次，本站总访客数人次
Released under the MIT License.

Copyright © 2022-present codeteenager