- VisualStudio2022插件的安装及使用-编程手把手系列文章
- pprof-在现网场景怎么用
- C#实现的下拉多选框,下拉多选树,多级节点
- 【学习笔记】基础数据结构:猫树
本文分享自华为云社区《实操上手TinyEngine低代码引擎插件化开发》,作者:OpenTiny.
低代码开发是近些年非常热门的一种开发方式,用户可以通过可视化的方式,简单拖拽,不写代码或者编写少量代码,类似搭积木一样搭建业务应用.
TinyEngine是一个强大的低代码引擎,可以帮助开发者快速定制自己的低代码设计器或者低代码平台.
TinyEngine可以作为低代码平台的底座,提供可视化搭建页面等基础能力,既可以通过线上搭配组合使用,也可以通过cli创建个人工程进行二次开发,实时定制出自己的低代码平台。适用于多场景的低代码平台开发,如:资源编排、服务端渲染、模型驱动、移动端、大屏端、页面编排等.
TinyEngine 由OpenTiny 团队2023年开源,也欢迎大家点 Star 和 提Issue、PR 进行反馈.
TinyEngine 官网:https://opentiny.design/tiny-engine#/home 。
TinyEngine 在线demo:https://opentiny.design/tiny-engine#/tiny-engine-editor 。
TinyEngine 代码库:https://github.com/opentiny/tiny-engine 。
。
。
。
。
。
。
。
。
。
。
TinyEngine引擎使用插件化架构,功能模块都由一个个插件构成,例如图片中页面上方的工具栏、左侧的插件栏、右侧的属性配置栏,以及中间的画布区域,都由一个个插件构成,通过插件化的架构,可以灵活配置、自由组装出个性化的设计器.
TinyEngine还提供了CLI工具方便用户二次开发,通过CLI,一行命令即可基于TinyEngine创建出全新的低代码项目、低代码插件项目,未来还会陆续增加创建设置器插件,创建新主题,新布局,新物料包等能力.
本实验主要通过体验使用TinyEngine几行命令快速创建一个用户专属低代码设计器,及通过开发一个新的侧边栏插件, 帮助开发者快速了解基于TinyEngine二次开发定制的能力.
使用 TinyEngine CLI,通过一行命令创建全新低代码设计器,了解基于 TinyEngine 创建个性化低代码设计器/平台、二次开发的能力.
体验 TinyEngine 简单拖拽、配置 的开发形式帮助开发者快速了解低代码开发使用流程.
完成开发一个新的基础侧边栏插件,并集成到设计器中,了解基于 TinyEngine 扩展设计器功能的能力.
在开始实验步骤之前,先确保我们的开发环境以及工具齐全:
Node.js v18+版本、pnpm 包管理工具.
vscode 代码编辑器、git 代码版本管理工具.
chrome浏览器 110+ 版本.
必要的开发前端开发环境、工具等.
执行engine-cli create,选择platform以创建一个新的设计器 。
npx @opentiny/tiny-engine-cli@alpha create
执行后首次会提示是否安装@opentiny/tiny-engine-cli,输入“Y”并回车 。
之后会提示选择要创建类型,选择platform之后,输入设计器名称,如:lowcode-designer,即可完成新设计器项目的创建.
查看当前文件目录,看发现已经创建出了 lowcode-designer 代码目录.
执行下面命令安装依赖并启动项目:
# 安装依赖
npm install
# 启动项目
npm run dev
启动完项目之后,我们应该能看到浏览器打开的默认的低代码设计器:
之后可以体验下低代码开发方式:
拖拽物料面板中组件到中间画布中 。
在右侧属性面板中修改属性值观察画布中的变化 。
在画布中拖拽组件调整组件的布局与位置 。
另起一个终端,输入下面命令,选择创建plugin类型,创建一个新的插件 。
npx @opentiny/tiny-engine-cli@alpha create
输入插件名称:demo-plugin 。
之后就可以在demo-plugin目录看到新创建的插件,进去该目录安装依赖:
cd demo-plugin && npm install
使用VS Code打开设计器项目,修改registry.js 。
import { Breadcrumb, Fullscreen, /* ... */, GenerateCodeService } from '@opentiny/tiny-engine'
import engineConfig from './engine.config'
++ import DemoPlugin from './demo-plugin'
export default {
// ...
plugins: [Materials, Tree, Page, Block, Datasource, Bridge, I18n, Script, State, Schema, Help, Robot],
++ plugins: [DemoPlugin, Materials, Tree, Page, Block, Datasource, Bridge, I18n, Script, State, Schema, Help, Robot],
dsls: [{ id: 'engine.dsls.dslvue' }],
settings: [Props, Styles, Events],
canvas: Canvas
}
重新打开项目页面,可以看到侧边栏多了一个新的插件:
修改插件代码,设计器界面也会实时刷新.
之后可以尝试完成以下功能:
为插件实现一个“添加按钮”,点击按钮展开插件二级页面 。
在二级面板中添加一个输入框,并实现保存功能,点击保存按钮将输入框内容显示到一级面板中 。
如此即完成了一个简单的TinyEngine侧边栏插件开发全流程.
本实践活动指导通过使用TinyEngine CLI创建一个全新设计器,上手体验低代码能力,并开发新的侧边栏插件扩展设计器能力,掌握基于TinyEngine定制设计器与插件的方式,了解TinyEngine的插件化架构与插件扩展能力。但实验中的部分只是TinyEngine扩展定制能力的一个缩影,TinyEngine提供了各种灵活的自定义能力,期待您的继续使用.
OpenTiny官网:https://opentiny.designTinyVue 源码:https://github.com/opentiny/tiny-vue(欢迎 Star ⭐)TinyEngine 源码:https://github.com/opentiny/tiny-engine(欢迎 Star ⭐)B站:https://space.bilibili.com/15284299欢迎加入 OpenTiny 开源社区。添加微信小助手 opentiny-official 一起参与交流前端技术~ 。
。
华为开发者空间,汇聚鸿蒙、昇腾、鲲鹏、GaussDB、欧拉等各项根技术的开发资源及工具,致力于为每位开发者提供一台云主机、一套开发工具及云上存储空间,让开发者基于华为根生态创新.
点击链接,免费领取您的专属云主机 。
。
最后此篇关于几行代码带你用TinyEngine低代码引擎开发侧边栏插件的文章就讲到这里了,如果你想了解更多关于几行代码带你用TinyEngine低代码引擎开发侧边栏插件的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。
我需要一些说明。我可以直接写入 /dev/port 以直接访问并行端口并且它工作正常(我可以打开插入端口连接器的 LED)。但是,我想我可以用 /dev/mem 做同样的事情? (http://tld
按照目前的情况,这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visit the
我使用 Visual C++ 和 Win32 API 学习了 Windows 编程。如今,似乎大多数应用程序都是使用 C# 在 .NET 中开发的。我知道大多数时候 native 代码和托管代码之间没
请耐心等待。我正在制作一个 java 控制台,类似于此处找到的 DragonConsole https://code.google.com/p/dragonconsole/ 。一切都按计划进行,但我想
关闭。这个问题需要更多 focused .它目前不接受答案。 想要改进这个问题吗? 更新问题,使其只关注一个问题 editing this post . 关闭5年前。 Improve this que
Django 的开发服务器表现得很奇怪。访问它的浏览器在加载时卡住,任何退出它的尝试都不起作用。当我点击 control c看似相当,但实际上仍在运行。让它退出的唯一方法是重新启动我的电脑,这很令人沮
我正在使用 Flash Develop,并且创建了一个 ActionScript 3.0 项目。它启动并读取一个 xml 文件,其中包含图像的 url。我已将 url 保留在与 swf 相同的文件夹中
是否可以根据其 website 上提供的规范开发 AUTOSAR BSW 堆栈(例如用于 CAN 通信)?不购买任何昂贵的供应商工具?可以遵循哪些步骤?我被要求探索这种可能性。 最佳答案 是和否。工具
有人知道如何用音频文件的内容覆盖 iPhone 麦克风吗? 想象一个场景,您正在通话,并且想要播放一些简短的音频让其他人听到。 因此,有必要将麦克风(硬件)置于保持状态,并使用委托(delegate)
我遇到了这个问题,我的应用程序出现 EXC_BAD_ACCESS 错误并卡住/停止。我使用模拟器的“向左旋转”和“向右旋转”选项来模拟方向变化行为。导致此错误的可能原因有哪些?由于我没有获得有关错误的
我有超过 1 台 Mac,我想在所有这些 Mac 上进行开发。我知道我需要在每台机器上同步我的手机,但这是我遇到的最小的问题。看起来我无法在手机上运行应用程序,除了在其中之一上开发的应用程序。 是否有
在手机上测试时,我的应用程序在特定点崩溃。控制台显示此消息 Tue Jan 27 15:47:14 unknown SpringBoard[22] : Application com.myprof.
我有一个案例,我从服务器获取信息。我的应用程序有一个选项卡栏和导航按钮。我希望应用程序显示进度指示器并禁用所有其他控件,以便用户在从服务器提取数据时无法跳转。我怎样才能实现这个目标? 我想到的一种方法
有时,当我尝试“构建”/编译下载的源代码时,我会收到以下警告: ld: warning: directory '/Volumes/Skiiing2/CD/ViewBased/Unknown Path/
我无法在 Apple 文档中找到关于开发和分发配置之间差异的明确解释。我目前正在使用开发配置在我的 iPhone 上进行开发和测试。我打算将该应用程序分发到我的 Beta 测试中,我想知道: 我需要使
我在使用 SharePoint 时遇到的最大挑战之一是它不能很好地适应典型的项目环境,其中至少包含开发和生产环境。我遇到的最多的问题是内容和列表是如此紧密地耦合在一起,以至于如果不在生产环境中执行内容
我失败了fist step让 Eclipse(对我来说是全新的)为 ARM 开发做好准备。 我在 Windows 10 中安装了 Eclipse。我想我应该安装 xpm,但我不知道在哪里输入此命令:
首先,我告诉你-我是编码新手 我正在使用vs代码来学习c++,它不会产生像dev c++或codeblocks这样的调试器。我看了一些视频,其中我们必须编辑json文件,这对于初学者来说非常复杂。有人
我失败了fist step让 Eclipse(对我来说是全新的)为 ARM 开发做好准备。 我在 Windows 10 中安装了 Eclipse。我想我应该安装 xpm,但我不知道在哪里输入此命令:
我开发了一个 Ionic 应用程序(iOS 和 Android 的混合)。我有 Xcode 8.3.3 并购买了一年的 Apple Developer Program 订阅。 我不想测试我的应用并将其
我是一名优秀的程序员,十分优秀!