赞
踩
本文由体验技术团队 TinyEngine 项目成员炽凌创作,欢迎大家实操体验,本体验内容基于 TinyEngine 低代码引擎提供的环境,介绍了如何通过 TinyEngine 低代码引擎实现三方物料集成,帮助开发者快速开发。
在进行项目初始化之前,先确保开发环境以及工具齐全:
工具齐全之后,开始克隆项目:
# 从 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 组件为例。
导入组件库的组件大致分为两步:
为了能够添加组件,可以先在项目根目录的 materials/components 路径下添加对应的组件 json 文件,比如,添加 Element Plus 组件库的 Button 组件,那么就在该路径下面添加 ElButton.json 文件。
文件里的内容,大致就是根据物料协议文档进行添加:https://opentiny.design/tiny-engine#/protocol 。
下面添加一个示例,该示例代码添加了 ElementPlus 组件库的 Button 组件,并包含了基本的字段:
{ "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 低代码引擎中,接下来,可以进一步完善物料配置,可以直接右侧属性面板进行组件的相关属性配置。
无论是基础公共组件库还是业务组件库,每个组件都会存在一些配置,方便用户定制化一些组件的表现行为以及样式。同样的,在画布拖拽编排好组件之后,可能需要对组件进行一些配置,这需要根据物料协议以及组件文档添加可配置项。
以 Element Plus 的 Button 组件为例:
假如需要添加 type、size、loading 等三个可配置属性项,则可以添加如下的属性配置项:
以下代码主要在 schema.properties[0].content 中添加了 type、size、loading 等三个属性。主要有几个关键属性:
{ "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 组件并选中。会发现右侧属性面板添加上了配置的属性配置项。
经过此步骤,就顺利完成了在物料中添加可配置选项这一环节。这使得用户也可以在画布中方便地配置属性并复用组件。
除了属性配置之外,还有一种特殊的配置:插槽配置。某些组件会内置特定的插槽,让用户可以自定义组件中某一部分的UI或者行为。以 Element Plus 中的 Button 组件为例,该组件提供了 default、loading、icon 三个插槽。同样,TinyEngine 的物料协议支持配置插槽的可选项,用户可以在设置面板中启用插槽开关,然后往插槽拖入内容。
以下是配置 Element Plus Button 组件的 icon 插槽的配置示例:
该示例主要在 schema 结构下添加了 slots 配置。
{ "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 组件。即可测试自定义图标功能。
至此,就实现了如何添加第三方组件,并根据第三方组件的属性文档添加属性可配置项。
添加完成后,开发者也可以发挥自己的想象力,使用已有组件和添加的两个按钮组件进行搭建页面。并使用页面预览功能完成渲染。
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声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/很楠不爱3/article/detail/727726
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。