使用 TinyEngine 低代码引擎实现三方物料集成

news2024/10/5 19:12:16

本文由体验技术团队 TinyEngine 项目成员炽凌创作，欢迎大家实操体验，本体验内容基于 TinyEngine 低代码引擎提供的环境，介绍了如何通过 TinyEngine 低代码引擎实现三方物料集成，帮助开发者快速开发。

知识背景

1.1 TinyEngine 低代码引擎简介

  • TinyEngine 是 OpenTiny 团队2023年开源的一个低代码引擎。使能开发者定制低代码平台。它是低代码平台的底座，提供可视化搭建页面等基础能力，既可以通过线上搭配组合，也可以通过下载源码进行二次开发，实时定制出自己的低代码平台。适用于多场景的低代码平台开发，如：资源编排、服务端渲染、模型驱动、移动端、大屏端、页面编排等。
  • 代码托管GitHub：https://github.com/opentiny/tiny-engine （欢迎大家 Star 和 提Issue、PR 进行反馈）
  • TinyEngine 官网：https://opentiny.design/tiny-engine#/home
  • TinyEngine 在线demo：https://opentiny.design/tiny-engine#/tiny-engine-editor

在这里插入图片描述

1.2 TinyEngine 第三方物料集成简介

  • TinyEngine 默认自带 TinyVue 组件库的物料。同时也支持集成其他第三方组件库比如 Element Plus 、Ant Design Vue 或者是业务方自己的业务组件库。

在这里插入图片描述

三方物料集成指导说明

2.1 项目初始化

在进行项目初始化之前，先确保开发环境以及工具齐全：

  • Node.js v16+版本、pnpm 包管理工具。
  • vscode 代码编辑器、git 代码版本管理工具。
  • chrome浏览器 110+ 版本。
  • 必要的前端开发环境、工具等。

工具齐全之后，开始克隆项目：

# 从 github 中克隆项目
git clone https://github.com/opentiny/tiny-engine.git

# 从 gitee 中克隆项目
git clone https://gitee.com/opentiny/tiny-engine.git

安装依赖并启动项目：

# 安装依赖，如果没有 pnpm 工具，可以先执行 npm i -g pnpm 安装
pnpm install

# 拆分原有物料
pnpm splitMaterials

# 持续监听构建物料
pnpm buildMaterials

# 另开一个终端，本地启动低代码引擎
pnpm dev

启动完项目之后，可以看到浏览器打开的默认的页面编排设计器：

在这里插入图片描述

打开清空当前页面，打开物料面板尝试拖拽添加物料。

在这里插入图片描述

至此，已经完成了启动 TinyEngine 低代码引擎并使用物料在画布进行编排的功能。

接下来，导入第三方的组件库的组件，这里以 Element Plus 组件库的 Button 组件为例。

导入组件库的组件大致分为两步：

  • 获取组件库 esm 的运行时产物地址，根据物料协议添加组件，拖入画布确认能正常渲染显示。
  • 根据组件文档添加 schema 配置，方便在画布中进行选中之后能够在属性面板配置组件的属性。

2.2 配置添加基本物料

为了能够添加组件，可以先在项目根目录的 materials/components 路径下添加对应的组件 json 文件，比如，添加 Element Plus 组件库的 Button 组件，那么就在该路径下面添加 ElButton.json 文件。

文件里的内容，大致就是根据物料协议文档进行添加：https://opentiny.design/tiny-engine#/protocol 。

下面添加一个示例，该示例代码添加了 ElementPlus 组件库的 Button 组件，并包含了基本的字段：

  • npm：npm 字段描述了该组件所属的 package（组件库），以及版本、esm 画布运行时、导出名称等等信息
  • component：component 字段是 esm 画布运行时导出的名称。
  • schema：schema 描述了该组件支持的配置属性，在画布选中组件之后，在右侧属性面板会展示 schema 配置的可配置属性。
  • snippets：snippets 为一个数组，表示改组件在左侧物料面板中展示的内容。
  • snippets.schema ：该 schema 为预置的一些 children、属性配置等等。可以让用户拖出即可用，达到零配置的效果。
  • 等等…
{
  "id": 1,
  "version": "2.4.2",
  "name": {
    "zh_CN": "按钮"
  },
  "component": "ElButton",
  "icon": "button",
  "description": "常用的操作按钮",
  "doc_url": "",
  "screenshot": "",
  "tags": "",
  "keywords": "",
  "dev_mode": "proCode",
  "npm": {
    // 组件库名称
    "package": "element-plus",
    // 组件库版本
    "version": "2.4.2",
    // 组件库 esm 运行时
    "script": "https://unpkg.com/element-plus@2.4.2/dist/index.full.mjs",
    // 组件库 css 样式表
    "css": "https://unpkg.com/element-plus@2.4.2/dist/index.css",
    "dependencies": null,
    // 组件库导出名
    "exportName": "ElButton"
  },
  "group": "基础组件",
  "category": "element-plus",
  "configure": {
    "loop": true,
    "condition": true,
    "styles": true,
    "isContainer": true,
    "isModal": false,
    "isPopper": false,
    "nestingRule": {
      "childWhitelist": "",
      "parentWhitelist": "",
      "descendantBlacklist": "",
      "ancestorWhitelist": ""
    },
    "isNullNode": false,
    "isLayout": false,
    "rootSelector": "",
    "shortcuts": {
      "properties": [
        "type",
        "size"
      ]
    },
    "contextMenu": {
      "actions": [
        "copy",
        "remove",
        "insert",
        "updateAttr",
        "bindEevent",
        "createBlock"
      ],
      "disable": []
    },
    "invalidity": [
      ""
    ],
    "clickCapture": true,
    "framework": "Vue"
  },
  "schema": {
    "properties": [
      {
        "name": "0",
        "label": {
          "zh_CN": "基础属性"
        },
        // 这里配置组件可配置属性
        "content": [
          {
            "property": "size",
            "label": {
              "text": {
                "zh_CN": "size"
              }
            },
            "description": {
              "zh_CN": "尺寸"
            },
            "required": true,
            "readOnly": false,
            "disabled": false,
            "cols": 12,
            "labelPosition": "top",
            "type": "string",
            "defaultValue": "default",
            "widget": {
              "component": "MetaSelect",
              "props": {
                "options": [
                  {
                    "label": "large",
                    "value": "large"
                  },
                  {
                    "label": "default",
                    "value": "default"
                  },
                  {
                    "label": "small",
                    "value": "small"
                  }
                ]
              }
            }
          }
        ],
        "description": {
          "zh_CN": ""
        }
      }
    ],
    "events": {},
    // 插槽声明定义
    "slots": {
      
    }
  },
  "snippets": [
    // 物料面板的配置
    {
      "name": {
        "zh_CN": "按钮"
      },
      "icon": "button",
      "screenshot": "",
      "snippetName": "ElButton",
      "schema": {
        "children": [
          {
            "componentName": "Text",
            "props": {
              "text": "按钮文本"
            }
          }
        ]
      }
    }
  ]
}

添加保存以上内容，刷新页面，并从物料面板中拖拽出来 ElButton组件，发现可以正常渲染。

在这里插入图片描述

至此，已经实现了如何添加一个第三方物料到 TinyEngine 低代码引擎中，接下来，可以进一步完善物料配置，可以直接右侧属性面板进行组件的相关属性配置。

2.3 添加物料配置描述

无论是基础公共组件库还是业务组件库，每个组件都会存在一些配置，方便用户定制化一些组件的表现行为以及样式。同样的，在画布拖拽编排好组件之后，可能需要对组件进行一些配置，这需要根据物料协议以及组件文档添加可配置项。

以 Element Plus 的 Button 组件为例：

在这里插入图片描述

假如需要添加 type、size、loading 等三个可配置属性项，则可以添加如下的属性配置项：

以下代码主要在 schema.properties[0].content 中添加了 type、size、loading 等三个属性。主要有几个关键属性：

  • property：property 属性值与组件的可配置属性项一一对应。即 size -> size 、type -> type、loading -> loading
  • label：label 对应右侧属性面板显示的可配置项描述。
  • description：对 label 的更详细补充描述。
  • widget：用于配置该属性的表单配置。如 type 可以用下拉选择框让用户选择对应的 type，loading 则可以用 switch 开关配置。
  • widget.component：描述使用什么配置组件
  • widget.props：描述改配置组件的 props。
  • 等等…
{
    "component": "ElButton",
    // ... 参考上述原有配置
    "schema": {
        // 这里添加可配置属性数组
        "properties": [
            {
                "label": {
                    "zh_CN": "基础属性"
                },
                "content": [
                    {
                        // property 代表可配置属性为 size
                        "property": "size",
                        // label 是展示在属性面板的可配置项名称
                        "label": {
                            "text": {
                                "zh_CN": "size"
                            }
                        },
                        // 对可配置项的描述
                        "description": {
                            "zh_CN": "尺寸"
                        },
                        "required": false,
                        "readOnly": false,
                        "disabled": false,
                        "cols": 12,
                        "labelPosition": "top",
                        "type": "string",
                        "defaultValue": "default",
                        "widget": {
                            // 可配置项是一个下拉框
                            "component": "MetaSelect",
                            // 下拉框的可选值，有 large、default、以及 small
                            "props": {
                                "options": [
                                    {
                                        "label": "large",
                                        "value": "large"
                                    },
                                    {
                                        "label": "default",
                                        "value": "default"
                                    },
                                    {
                                        "label": "small",
                                        "value": "small"
                                    }
                                ]
                            }
                        }
                    },
                    {
                        "property": "type",
                        "label": {
                            "text": {
                                "zh_CN": "type"
                            }
                        },
                        "description": {
                            "zh_CN": "类型"
                        },
                        "required": false,
                        "readOnly": false,
                        "disabled": false,
                        "cols": 12,
                        "labelPosition": "top",
                        "type": "string",
                        "widget": {
                            "component": "MetaSelect",
                            "props": {
                                "options": [
                                    {
                                        "label": "primary",
                                        "value": "primary"
                                    },
                                    {
                                        "label": "success",   
                                        "value": "success"
                                    },
                                    {
                                        "label": "warning",
                                        "value": "warning"
                                    },
                                    {
                                        "label": "danger",
                                        "value": "danger"
                                    },
                                    {
                                        "label": "info",
                                        "value": "info"
                                    }
                                ]
                            }
                        }
                    },
                    {
                        "property": "loading",
                        "label": {
                            "text": {
                                "zh_CN": "loading"
                            }
                        },
                        "description": {
                            "zh_CN": "是否为加载中状态"
                        },
                        "required": false,
                        "readOnly": false,
                        "disabled": false,
                        "cols": 12,
                        "labelPosition": "top",
                        "type": "string",
                        "widget": {
                            "component": "MetaSwitch",
                            "props": {}
                        },
                        "device": []
                    }                                                 
                ]
            }
        ]
    }
}

添加完之后，保存文件，刷新浏览器，重新拖入 ElButton 组件并选中。会发现右侧属性面板添加上了配置的属性配置项。

在这里插入图片描述

经过此步骤，就顺利完成了在物料中添加可配置选项这一环节。这使得用户也可以在画布中方便地配置属性并复用组件。

2.4 配置物料插槽

除了属性配置之外，还有一种特殊的配置：插槽配置。某些组件会内置特定的插槽，让用户可以自定义组件中某一部分的UI或者行为。以 Element Plus 中的 Button 组件为例，该组件提供了 default、loading、icon 三个插槽。同样，TinyEngine 的物料协议支持配置插槽的可选项，用户可以在设置面板中启用插槽开关，然后往插槽拖入内容。

以下是配置 Element Plus Button 组件的 icon 插槽的配置示例：

该示例主要在 schema 结构下添加了 slots 配置。

  • slots.xxx： xxx 代表插槽名称。
  • slots.xxx.label：代表在右侧属性面板显示的名称。
  • slots.xxx.description：对 label 的补充描述（默认 hover 之后才会显示）。
{
    "component": "ElButton",
    // ... 参考上述原有配置
    "schema": {
        // 这里添加可配置属性数组
        "properties": [
            {
                "label": {
                    "zh_CN": "基础属性"
                },
                "content": [
                    {
                        // property 代表可配置属性为 size
                        "property": "size",
                        // label 是展示在属性面板的可配置项名称
                        "label": {
                            "text": {
                                "zh_CN": "size"
                            }
                        },
                        // 对可配置项的描述
                        "description": {
                            "zh_CN": "尺寸"
                        },
                        "required": false,
                        "readOnly": false,
                        "disabled": false,
                        "cols": 12,
                        "labelPosition": "top",
                        "type": "string",
                        "defaultValue": "default",
                        "widget": {
                            // 可配置项是一个下拉框
                            "component": "MetaSelect",
                            // 下拉框的可选值，有 large、default、以及 small
                            "props": {
                                "options": [
                                    {
                                        "label": "large",
                                        "value": "large"
                                    },
                                    {
                                        "label": "default",
                                        "value": "default"
                                    },
                                    {
                                        "label": "small",
                                        "value": "small"
                                    }
                                ]
                            }
                        }
                    }                                        
                ]
            }
        ],
        "slots": {
            // default  默认插槽
            "default": {
                "label": {
                "zh_CN": "default"
                },
                "description": {
                "zh_CN": "自定义默认内容"
                }
            },
            // icon 自定义图标插槽，打开该开关之后，用户可以自定义 icon
            "icon": {
                "label": {
                    "zh_CN": "icon"
                },
                "description": {
                    "zh_CN": "自定义图标组件"
                }
            }
        }
    }
}

保存文件，刷新页面，重新拖入 ElButton 组件。即可测试自定义图标功能。
在这里插入图片描述
至此，就实现了如何添加第三方组件，并根据第三方组件的属性文档添加属性可配置项。

2.5 使用预览功能

添加完成后，开发者也可以发挥自己的想象力，使用已有组件和添加的两个按钮组件进行搭建页面。并使用页面预览功能完成渲染。

关于OpenTiny

在这里插入图片描述

OpenTiny 是一套企业级 Web 前端开发解决方案，提供跨端、跨框架、跨版本的 TinyVue 组件库，包含基于 Angular+TypeScript 的 TinyNG 组件库，拥有灵活扩展的低代码引擎 TinyEngine，具备主题配置系统TinyTheme / 中后台模板 TinyPro/ TinyCLI 命令行等丰富的效率提升工具，可帮助开发者高效开发 Web 应用。

欢迎加入 OpenTiny 开源社区。添加微信小助手：opentiny-official 一起参与交流前端技术～
OpenTiny 官网：https://opentiny.design/
OpenTiny 代码仓库：https://github.com/opentiny/
TinyVue 源码：https://github.com/opentiny/tiny-vue
TinyEngine 源码： https://github.com/opentiny/tiny-engine
欢迎进入代码仓库 Star🌟TinyEngine、TinyVue、TinyNG、TinyCLI~ 如果你也想要共建，可以进入代码仓库，找到 good first issue标签，一起参与开源贡献~

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1798958.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

用互斥锁解决缓存击穿

用互斥锁解决缓存击穿

我先说一下正常的业务流程：需要查询店铺数据，我们会先从redis中查询，判断是否能命中，若命中说明redis中有需要的数据就直接返回；没有命中就需要去mysql数据库查询，在数据库中查到了就返回数据并把该数据存入…
阅读更多...
燃烧截稿倒计时，NDSS‘25大会即将召开，你的论文准备好了吗？

燃烧截稿倒计时，NDSS‘25大会即将召开，你的论文准备好了吗？

燃烧截稿倒计时！NDSS25大会即将召开，你的论文准备好了吗？ 第32届NDSS25(Network and Distributed System Security Symposium)即网络与分布式系统安全研讨会将于2025年2月23日至28日在加利福尼亚州圣地亚哥举行！ 作为信息安全领域…
阅读更多...
WWDC24即将到来，ios18放大招

WWDC24即将到来，ios18放大招

苹果公司即将在下周开全球开发者大会(WWDC)，大会上将展示其人工智能技术整合到设备和软件中的重大进展,包括与OpenAI的历史性合作。随着大会的临近,有关iOS 18及其据称采用AI技术支持的应用程序和功能的各种泄露信息已经浮出水面。 据报道,苹果将利用其自主研发的大…
阅读更多...
MySQL的组成与三种log

MySQL的组成与三种log

MySQL由几块组成 连接器分析器优化器执行器 MySQL的三大log blog 作用&#xff1a; 用于主从同步与数据恢复 记录内容&#xff1a; 已经完成的 DML(数据操作语句)&#xff0c;主要是用于数据备份 redolog<重试日志> 作用&#xff1a; 崩溃恢复&#xff0c;用于事…
阅读更多...
Linux安装Nacos教程【带图文命令巨详细】

Linux安装Nacos教程【带图文命令巨详细】

巨详细Linux安装Nacos教程 1、检查是否有残留nacos版本2、上传安装包至服务器2.1安装包获取2.2创建相关目录 3、安装Nacos4、配置Nacos4.1修改数据源4.2新建nacos数据库4.3启动nacos4.4把nacos进程交给systemctl管理4.5设置nacos开机自启动 1、检查是否有残留nacos版本 rpm -q…
阅读更多...
随便用css换个渐变的太阳

随便用css换个渐变的太阳

来源于GPT4o&#xff1a;代码来源 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>渐变色上半圆…
阅读更多...
此表单不安全，因此系统已关闭自动填充功能

此表单不安全，因此系统已关闭自动填充功能

问题截图&#xff1a; 截图就不放了&#xff0c;公司的系统不方便&#xff0c;就是form表单会有个提示“此表单不安全&#xff0c;因此系统已关闭自动填充功能” 解决思路&#xff1a; 1、问题原因 使用https访问&#xff0c;但表单提交地址是http的 2、查看表单配置 表单…
阅读更多...
具有 MOSFET 的电压到电流 (V-I) 转换器电路

具有 MOSFET 的电压到电流 (V-I) 转换器电路

设计说明 该单电源、低侧、V-I 转换器向可以连接到比运算放大器电源电压更高的电压的负载提供经过良好调节的电流。该 电路接受介于 0V 和 2V 之间的输入电压&#xff0c;将其转换为介于 0mA 和 100mA 之间的电流。通过将低侧电流检测电 阻 R3 上的压降反馈到运算放大器的反相…
阅读更多...
C语言详解（动态内存管理）1

C语言详解（动态内存管理）1

Hi~&#xff01;这里是奋斗的小羊&#xff0c;很荣幸您能阅读我的文章&#xff0c;诚请评论指点&#xff0c;欢迎欢迎 ~~ &#x1f4a5;&#x1f4a5;个人主页&#xff1a;奋斗的小羊 &#x1f4a5;&#x1f4a5;所属专栏&#xff1a;C语言 &#x1f680;本系列文章为个人学习…
阅读更多...
《广告数据定量分析》读书笔记之统计原理2

《广告数据定量分析》读书笔记之统计原理2

3.相关分析&#xff1a;描述的是两个数值变量间关系的强度。&#xff08;两个数值型变量之间的关系&#xff09; &#xff08;1&#xff09;图表表示&#xff1a;散点图 &#xff08;2&#xff09;衡量关系强度指标&#xff1a;相关系数r。 &#xff08;r的取值为-1到 1&…
阅读更多...
图的创建和BFS，DFS遍历

图的创建和BFS，DFS遍历

图的创建 图是一种用于表示对象及其关系的抽象数据结构&#xff0c;由节点&#xff08;也称为顶点&#xff09;和连接节点的边组成。图可以分为有向图&#xff08;Directed Graph&#xff09;和无向图&#xff08;Undirected Graph&#xff09;&#xff0c;以及加权图&…
阅读更多...
Chrome 源码阅读：跟踪一个鼠标事件的流程

Chrome 源码阅读：跟踪一个鼠标事件的流程

我们通过在关键节点打断点的方式&#xff0c;去分析一个鼠标事件的流程。 我们知道chromium是多进程模型&#xff0c;那么&#xff0c;我们可以推测&#xff1a;一个鼠标消息先从主进程产生&#xff0c;再通过跨进程通信发送给渲染进程&#xff0c;渲染进程再发送给WebFrame&a…
阅读更多...
elementUI - 折叠以及多选的组件

elementUI - 折叠以及多选的组件

//子组件 <template><!-- 左侧第二个 --><div class"left-second-more"><div class"layer-list-wrapper1"><el-collapse v-model"activeNames" change"handleChange"><el-collapse-item v-for"…
阅读更多...
企业必备技能-打造全屏轮播图的终极指南

企业必备技能-打造全屏轮播图的终极指南

标题&#xff1a;“视觉盛宴&#xff1a;打造全屏轮播图的终极指南” 引言 在网页设计中&#xff0c;轮播图是一种常见的视觉元素&#xff0c;它能够吸引访客的注意力并展示重要内容。本文档将指导你如何使用HTML和CSS快速创建一个全屏轮播图&#xff0c;使您的网站更加生动和…
阅读更多...
react-学习基础偏

react-学习基础偏

1.新建文件夹 2.vscode引入这个文件夹 3.打开vscode终端 执行命令 npx create-react-app react-basic 创建基本项目&#xff08;react-basic项目文件夹名&#xff09; 4.进入到这个文件夹 可用的一些命令 这就算启动成功 5. 这是项目的核心包 渲染流程
阅读更多...
免费实现网站HTTPS访问

免费实现网站HTTPS访问

HTTPS&#xff08;Hypertext Transfer Protocol Secure&#xff09;是一种基于SSL协议的HTTP安全协议&#xff0c;旨在为客户端&#xff08;浏览器&#xff09;与服务器之间的通信提供加密通道&#xff0c;确保数据在传输过程中的保密性、完整性和身份验证。与传统的HTTP相比&a…
阅读更多...
​​​​​​ 基于Nmap的异步无状态端口扫描技术

​​​​​​ 基于Nmap的异步无状态端口扫描技术

​​​​​​ 基于Nmap的异步无状态端口扫描技术 传统的端口扫描&#xff0c;主要是依靠TCP三次握手去连接&#xff0c;而建立连接的各个过程都存在连接状态&#xff0c;这些状态由操作系统在底层实现存储&#xff0c;可利用这些状态对应用层的数据进行处理。但是&#xff0c;…
阅读更多...
2024-06-07 Unity 编辑器开发之编辑器拓展8 —— Scene 窗口拓展

2024-06-07 Unity 编辑器开发之编辑器拓展8 —— Scene 窗口拓展

文章目录 1 Handles 类1.1 Scene 响应函数1.2 自定义窗口中监听 Scene1.3 Handles 常用 API2.2.1 颜色控制2.2.2 文本2.2.3 线段2.2.4 虚线2.2.5 圆弧2.2.6 圆2.2.7 立方体2.2.8 几何体2.2.9 移动、旋转、缩放2.2.10 自由移动 / 旋转 2 Scene 窗口中显示 GUI3 HandleUtility4 G…
阅读更多...
AI产品经理岗位需求量大吗？好找工作吗？

AI产品经理岗位需求量大吗？好找工作吗？

前言 在当今这个科技日新月异的时代&#xff0c;人工智能&#xff08;AI&#xff09;已不再仅仅是一个遥远的概念&#xff0c;而是深深嵌入到我们生活的方方面面&#xff0c;从日常的语音助手到复杂的自动驾驶系统&#xff0c;AI的触角无处不在。随着AI技术的广泛应用和持续进…
阅读更多...
一图说明LLM大模型最核心原理

一图说明LLM大模型最核心原理

阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023