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

本文由体验技术团队 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.rhkb.cn/news/344629.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

读书笔记-《软件定义安全》之二:SDN/NFV环境中的安全问题

第2章 SDN/NFV环境中的安全问题 1.架构安全 SDN强调了控制平面的集中化,从架构上颠覆了原有的网络管理,所以SDN的架构安全就是首先要解决的问题。例如,SDN实现中网络控制器相关的安全问题。 1.1 SDN架构的安全综述 从网络安全的角度&…

Spring Boot整合WebSocket和Redis实现直播间在线人数统计功能

😄 19年之后由于某些原因断更了三年,23年重新扬帆起航,推出更多优质博文,希望大家多多支持~ 🌷 古之立大事者,不惟有超世之才,亦必有坚忍不拔之志 🎐 个人CSND主页——Mi…

无人机电机选型

2306的意思是电机定子直径23MM,定子高度6MM.在相同KV值的情况下电机的定子体积越大,扭矩越大:KV的意思是每增加1V的电压电机转速增加多少。同参数的电机KV越低,在低速的情况下能带动更大的质量。这也就解释了竞速机选用更高KV值的…

linux中dd命令以及如何测试读写速度

dd命令详解 dd命令是一个在Unix和类Unix系统中非常常用的命令行工具,它主要用于复制文件和转换文件数据。下面我会详细介绍一些dd命令的常见用法和功能: 基本语法 dd命令的基本语法如下: bash Copy Code dd [option]...主要选项和参数 if…

【机器学习】深度探索:从基础概念到深度学习关键技术的全面解析——梯度下降、激活函数、正则化与批量归一化

🔥 个人主页:空白诗 文章目录 一、机器学习的基本概念与原理二、深度学习与机器学习的关系2.1 概念层次的关系2.2 技术特点差异2.3 机器学习示例:线性回归(使用Python和scikit-learn库)2.4 深度学习示例:简…

武汉理工大学 云计算与服务计算 期末复习

云计算与的定义 长定义是:“云计算是一种商业计算模型。它将计算任务分布在大量计算机构成的资源池上,使各种应用系统能够根据需要获取计算力、存储空间和信息服务。” 短定义是:“云计算是通过网络按需提供可动态伸缩的廉价计算服务。 云计…

计算机网络 —— 网络层(IP数据报)

计算机网络 —— 网络层(IP数据报) 网络层要满足的功能IP数据报IP数据报格式IP数据报首部格式数据部分 IP数据报分片 我们今天进入网络层的学习。 网络层要满足的功能 网络层作为OSI模型中的第三层,是计算机网络体系结构的关键组成部分&…

ubuntu 用户名及密码忘记操作

1、重启系统,长按Shift键,直到出现菜单,选则高级设置。选择recovery mode,即恢复模式 2、选择root 3、# 后面敲入 sudo passwd 用户名 4、# passwd "用户名" 之后再敲两次密码就可以了。(如果提示修改失败可先执行&a…

汇编:宏的使用

汇编语言中的宏是用于定义可重复使用的代码块或指令集合的强大工具。宏通过简化代码编写和提高可读性,使得编写和维护汇编程序更加方便;在 MASM(Microsoft Macro Assembler)中,宏的定义和使用非常常见。以下是对汇编语…

【机器学习】机器学习与医疗健康在智能诊疗中的融合应用与性能优化新探索

文章目录 引言机器学习与医疗健康的基本概念机器学习概述监督学习无监督学习强化学习 医疗健康概述疾病预测诊断辅助个性化治疗方案制定 机器学习与医疗健康的融合应用实时健康监测数据预处理特征工程 疾病预测与优化模型训练模型评估 诊断辅助与优化深度学习应用 个性化治疗方…

(UE4.26)UE4的FArchive序列化入门

前言 序列化(Serialize)和反序列化(UnSerialize)是程序领域常见的概念。对于这两个词汇我理解的是 序列化(Serialize): 变量值(int, float, string等基本类型, 或者Array,Map,或者更复杂的复合体)存储为一个文件(二进制流, 二进制文件, json, xml等格式…

编程规范-代码检测-格式化-规范化提交

适用于vue项目的编程规范 – 在多人开发时统一编程规范至关重要 1、代码检测 --Eslint Eslint:一个插件化的 javascript 代码检测工具 在 .eslintrc.js 文件中进行配置 // ESLint 配置文件遵循 commonJS 的导出规则,所导出的对象就是 ESLint 的配置对…

Python数据分析I

目录 注:简单起见,下文中"df"均写为"表名","函数"均写为"HS","属性"均写为"SX","范围"均写为"FW"。 1.数据分析常用开源库 注释…

【国产NI替代】SMU 源测量仪:源测量单元平台主要用于半导体、传感器、模组等 IVR 测试测量

• 集 5 台仪器 (数字万用表、电压源、电流源、电子负载和脉冲发生器) 功能于⼀体 • 典型输出源及测量精度 02%,支持直流/脉冲输出模式 • 脉冲输出模式,最⼩脉冲宽度 100 us ,上升时间 10 us • 具有 pA 级分辨率高精度源,且…

融云:应用出海新增长引擎,GPT-4o 后的 AI 创新与用户运营

近日,融云与 TikTok、维卓联合在京举办了“十年出海,遇上 AI”私享会。 会上,融云解决方案架构师于洪达带来了《应用出海新增长引擎,AI 创新与用户精细化运营》主题分享,探讨在 AI 技术大潮下应用出海通过创新运营方式…

Java基础——数组Array

系列文章目录 文章目录 系列文章目录前言一、数组基本概念二、一维数组三、数组的模型四、数组对象的创建五、元素为引用数据类型的数组 前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网…

linux业务代码性能优化点

planning优化的一些改动----------> 减少值传递&#xff0c;多用引用来传递 <---------- // ----------> 减少值传递&#xff0c;多用引用来传递 <---------- // 例1&#xff1a; class A{}; std::vector<A> v; // for(auto elem : v) {} // 不建议&#xff…

flink读取hive写入http接口

目录 0、创建hive数据 1、pom.xml 2、flink代码 3、sink 4、提交任务jar 5、flink-conf.yaml 6、数据接收 flink-1.17.2jdk1.8hive-3.1.3hadoop3.3.6passwordhttp0、创建hive数据 /cluster/hive/bin/beeline !connect jdbc:hive2://ip:10000 create database demo; d…

【CS.SE】使用 docker pull confluentinc/cp-kafka 的全面指南

文章目录 1 引言2 准备工作2.1 安装 Docker2.1.1 在 Linux 上安装 Docker2.1.2 在 macOS 上安装 Docker2.1.3 在 Windows 上安装 Docker 2.2 验证 Docker 安装 3 拉取 confluentinc/cp-kafka Docker 镜像3.1 拉取镜像3.2 验证镜像 4 运行 Kafka 容器4.1 启动 ZooKeeper4.2 启动…

vue3中的ref与reactive的区别

目录 1、两者的区别底层实现响应式引用与响应式对象 2、用法3、vue3中声明的数组/对象3.1 通过reactive 声明的Array/Object&#xff0c;给它重新分配一个全新的对象时&#xff0c;会出错、或失去响应式效果 3.2 解决方案 4、cosnt 说明5、Proxy 与 definePropertyref 浅层响应…