TinyEngine 开源低代码引擎首次直播答疑QA合集

前言

10月27日晚8点，OpenTiny 社区开启了 TinyEngine 开源低代码引擎首次答疑直播，本次直播我们通过收集开发者诉求，精心策划和组织了内容，希望提供给大家最明确和清晰的答疑方式。这是 TinyEngine 低代码引擎直播计划的开端，也是打开了 TinyEngine 低代码引擎与开发者沟通交流的新途径。

在本次直播活动中，我们为大家介绍了 TinyEngine 低代码引擎——使能开发者定制低代码平台。并就其基础功能类、代码原理解读类、功能增强类等问题都进入了深入的探讨和答疑。现在，我们梳理了本次直播的关键内容。

TinyEngine 简介

低代码引擎使能开发者定制低代码平台。它是低代码平台的底座，提供可视化搭建页面等基础能力，既可以通过线上搭配组合，也可以通过下载源码进行二次开发，实时定制出自己的低代码平台。适用于多场景的低代码平台开发，如：资源编排、服务端渲染、模型驱动、移动端、大屏端、页面编排等。

核心亮点：

  • 可以定制开发低代码平台: 支持在线实时构建,支持二次开发或被集成
  • 支持生成源码部署: 直接生成可部署的源码,运行时无需引擎支撑
  • 开放协议接口：允许接入第三方组件，允许定制扩展插件
  • 支持高低混合开发：支持高代码与低代码，混合开发部署应用
  • 支持 AI 辅助开发：平台接入AI 大模型能力，辅助开发者构建应用

Q&A合集

基础功能使用类：

问题1：如何使用第三方组件库？

答：详情可以查看官网使用手册

问题2：如何使用插槽？

答：详情可以查看官网使用手册

问题3：通过 TinyEngine 低代码引擎生成代码到本地时，如何将生成的源码页面独立放置在自己的项目中，提供example?

当前我们的出码结果依赖官方出码模板，暂时无法放置在自己项目中独立运行

第一步：下载 https://github.com/opentiny/tiny-engine-generate-preview 工程，解压

第二步：将代码下载到解压好的文件夹中（提示选择文件夹的时候，选择我们解压出来的文件夹）

第三步：用代码编辑器打开文件夹，确认出码结果，安装依赖并运行 npm run dev 启动服务，查看效果

后续相关的规划：

  • 支持开发插件，自定义出码结果
  • 支持自定义工程模板，结合自定义出码结果，可以无缝在自身项目中运行

问题4：怎样在 TinyEngine 低代码引擎中扩展左侧组件，比如创建用户、单位选择。在 form 表单里面使用，拖入这2个控件，可以弹出 dialog 框选择用户和单位，点击确定后回填到表单上 input 框上？

答：如果是想从零搭建业务组件，可以查看官方的文档教程尝试一步一步搭建（目前使用手册已更新）

如果是已有的业务组件，可以尝试通过导入第三方组件库的方式导入到左侧物料中。

问题5：分析下 TinyEngine 低代码引擎中左侧组件、中间区域渲染和右侧组件属性的代码在整体上协调一致的思路？

答：先简要介绍一下我们工程中主要的 package：

packages|_ canvas  负责中间画布渲染|_ common  公共的组件以及 metaComponent |_ controller  公共逻辑控制层|_ design-core 总入口|_ http  负责 http 相关请求|_ i18n lowcode-i18n 包裹层|_ plugins  左侧面板相关插件|_ settings 右侧设置面板相关组件|_ svgs svg 封装组件|_ theme  主题相关样式|_ toolbars 顶部工具栏相关 package|_ utils 公共utils|_ vue-generator 出码package|_ webcomponent webcomponent 封装

区域大致职责划分：

  • 左侧面板相关的范围：负责设置一些应用状态、页面状态、以及逻辑的控制、编写
  • 中间画布：负责视图层的编排
  • 右侧属性面板：负责视图层的属性控制、样式精细编排、事件绑定等属性相关

主要的功能入口：

1、资源请求

// packages/design-core/src/App.vue
// 这里发起请求物料、请求数据源、请求页面等相关资源请求，很关键
useResource().fetchResource()

2、画布渲染相关入口

packages|_ canvas|_ src|_ components|_ render|_ runner.js # 用于画布相关的资源请求，预设|_ RenderMain.js # 画布渲染的入口，同时也暴露了许多 api 供修改 schema|_ render.js # RenderMain.js 会调用该文件的 renderer 方法，递归渲染 schema

3、画布选中后，如何关联渲染右侧属性面板？

// DesignCanvas.vue// 画布中节点选中后，会触发该方法
const nodeSelected = (node, parent, type) => {const { toolbars } = useLayout().layoutStateif (type !== 'clickTree') {useLayout().closePlugin()}// 动态计算该方法需要渲染的 属性面板useProperties().getProps(node, parent)// 设置当前 schemauseCanvas().setCurrentSchema(node)footData.value = getNodePath(node?.id)toolbars.visiblePopover = false
}

// settings/props/src/Main.vue
<template>
<!-- 在属性面板渲染设置属性的入口 -->>
<config-render :data="properties"><template #prefix="{ data }"><block-link-field v-if="isBlock" :data="data"></block-link-field></template>
</config-render>
</template><script>
// 选中之后，经过 getProps 的计算，我们会得到 properties，渲染在属性面板
const { properties } = useProperty({ pageState })
</script>

上面就是一些简单的入口简介，后续，我们会增加更多详细的架构原理、功能设计相关的文档，敬请期待

问题6：TinyEngine 低代码引擎是否提供排版组件，怎么实现灵活排版？

答：我们目前有内置的排版组件——行列容器，可以通过简单的剪切方式实现轻松的 flex 布局。

问题7：在使用 TinyEngine 低代码引擎时，组件内的静态资源（图片或者音频）如何引用？

答：这个问题要分多种情况讨论，

设计器开发： 可以拉下来源代码，按照原来静态资源图片等分类，放置进去要用的图片，在开发设计器的时候可以直接使用。

页面运行态： 可以通过 标签选中你要的静态资源，这部分的逻辑完全取决于用户

页面设计态： 低代码引擎在开源之前是有这样的功能的，但是为了开源的合规，屏蔽了该功能。因为在设计态想用到静态资源的话，要选中静态资源，并上传到公司的文件管理系统，然后文件系统返回静态资源地址，然后再展示在画布中。如果用户想要这样的功能，只需要开发一个文件上传按钮，并把上传的内容放置用户的文件管理系统。

问题8：修改 TinyEngine 低代码引擎的物料描述文件 bundle.json 之后，无变化是什么原因？

答：可以关注一下以下 bundle.json 这个文件的设置是否正确，尤其是 widget.component 这个字段

以下为 bundle.json 这个文件的节选：

{ "property": "text","label": {"text": {"zh_CN": "按钮名称","en_US": "Button Name"}},"required": true,"readOnly": false,"disabled": false,"cols": 12,"widget": {"component": "MetaBindI18n","props": {}},"description": {"zh_CN": "按钮名称","en_US": "Name of the button."}}

问题9：在使用 TinyEngine 低代码引擎后，组件之间应该如何联动？

答：实现的方式是多种的，

方式一：假如 A（输入框）与 B（显示框）联动，那么可以给 A 绑定一个 change 事件，直接影响 B的显示

方式二：给 B 绑定一个值，通过影响 B 的值，从而影响 B 的显示。

方式三：通过 watch 监听

除了以上基础功能及代码原理分析的解答，部分开发者对于功能增强拓展这部分的内容也是十分关注

问题1：如何将 TinyEngine 低代码引擎项目集成到 .net 项目中？

答：原来的.net 系统可以继续独立运行，当需要跳转到低代码系统时候。从原来的.net系统带出关键参数。如 projectId, itemId, processId 等，通过URL的传参形式：https://xxxxxxxxxxx?projectId=1111&itemId=2222222&processId=33333333。 跳转到低代码系统后，在代码系统初始化时候获取URL的参数，通过服务端API接口获取到相应的流程、页面、物料等等信息。通过低代码系统搭建页面会产生schema或者源代码，在点击保存按钮的时候可以把想要的产物保存回来原来的.net系统中。

问题2：Java 后端开源的规划？

答：目前服务端有两套源代码，一套技术栈是 node.js ，一套技术栈是 Java。因为要从公司流程流程审批、技术评估还有后面的迭代演进等维度考虑，目前还不知最终会开源哪种技术栈的服务端。大家敬请期待12月30号左右的公告

问题3：TinyEngine 低代码引擎是否会增加 typescript 支持？

答：目前暂不支持，后续有在规划增加 typescript 的支持，大家敬请期待

问题4：TinyEngine 低代码引擎是否提供商业版本或者商业上的技术支持？

答：目前只有一个开源版本的代码，没有商业版本。至于商业技术上的支持，可以找到 OpenTiny 的小助手沟通，详细沟通一下贵司具体需要的商业支持。

问题5：后续是否会继续迭代 AI 能力？

答：AI 能力目前已经在 TinyEngine 官网部署，当前采用的大模型是文心一言，通过 AI生成代码->生成 AST->页面 schema->展示在页面->下载源代码 ，后续会切回华为的盘古大模型。现在 AI 能力的取决于文心一言生成的代码。同时我们也通过数据和资源的不断投入在持续训练我们的 AI 能力，大家敬请期待 AI 能力的持续迭代。

问题6：TinyEngine 低代码引擎是否支持 nuxt.js 作为后端的开发？

答：后端的开发与技术栈无关，是可以采用任意的技术栈的。我们提供了所有后端接口的文档，只需要按照设计器的文档来，给出对应接口的出入参即可。

问题7：目前 TinyEngine 低代码引擎的物料平台是否会开源？

答：TinyEngine 目前是用到的物料是已开源的 TinyVue 组件库，欢迎大家使用~

关于 OpenTiny

图片

OpenTiny 是一套企业级 Web 前端开发解决方案，提供跨端、跨框架的UI组件库，适配 PC 端 / 移动端等多端，支持 Vue2 / Vue3 / Angular 多技术栈，拥有灵活扩展的低代码引擎，包含主题配置系统 / 中后台模板 / CLI 命令行等丰富的效率提升工具，可帮助开发者高效开发 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.mzph.cn/news/137402.shtml

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

相关文章

Flutter 第三方 flutter_screenutil(屏幕适配)

Flutter 第三方 flutter_screenutil(屏幕适配)

一直觉得自己写的不是技术&#xff0c;而是情怀&#xff0c;一个个的教程是自己这一路走来的痕迹。靠专业技能的成功是最具可复制性的&#xff0c;希望我的这条路能让你们少走弯路&#xff0c;希望我能帮你们抹去知识的蒙尘&#xff0c;希望我能帮你们理清知识的脉络&#xff0…
阅读更多...
【Royalty in Wind 2.0.0】个人体测计算、资料分享小程序

【Royalty in Wind 2.0.0】个人体测计算、资料分享小程序

前言 Royalty in Wind 是我个人制作的一个工具类小程序。主要涵盖体测计算器、个人学习资料分享等功能。这个小程序在2022年第一次发布&#xff0c;不过后来因为一些原因暂时搁置。现在准备作为我个人的小程序重新投入使用XD PS&#xff1a;小程序开发部分我是在21年跟随郄培…
阅读更多...
FL Studio21.2宿主软件中文免费版下载

FL Studio21.2宿主软件中文免费版下载

纵观当下宿主软件市场&#xff0c;正值百家争鸣、百花齐放之际像Mac系统的Logic Pro X、传统宿主软件代表Cubase、录音师必备Pro Tools、后起之秀Studio One等&#xff0c;都在各自的领域具有极高的好评度。而在众多宿主软件中&#xff0c;有这么一款历久弥新且长盛不衰的独特宿…
阅读更多...
sqli-bypass wp

sqli-bypass wp

sqli-bypass靶场 level 1 尝试注入点 1 ,1&#xff0c;1,1",1"" 》存在字符型单引号注入 id1and(1)-- >提示存在sql注入 bypass and、()、--都可能存在被屏蔽掉 尝试#代替-- id1and(1)%23 》 正常回显&#xff0c;说明–被屏蔽了&#xff0c;and&#xf…
阅读更多...
VScode 右键没有转到定义等的菜单

VScode 右键没有转到定义等的菜单

问题&#xff1a; 右键点击该函数出现的结果只能是这样的&#xff1a; 解决&#xff1a; 通过修改 settings.json 文件&#xff0c;以解决问题&#xff1a; 这是原来有问题的配置&#xff1a; {"python.autoComplete.extraPaths": ["/home/robot/1-temp_mak…
阅读更多...
数据库SQL

数据库SQL

数据库&SQL 数据库基本概念数据库DataBase定义 数据库管理系统(DBMS)定义在JAVA项目中与数据库的结合数据库管理系统中常见的概念库与表的关系 SQL数据类型数字类型浮点类型字符类型TEXT类型日期类型 SQL语言的分类DDL:数据定义语言修改表结构的注意事项 DML:数据操作语言D…
阅读更多...
力扣每日一题 ---- 2906. 构造乘积矩阵

力扣每日一题 ---- 2906. 构造乘积矩阵

这题很简单(一下就能想到是前缀和的提米)&#xff0c;但是在处理12345上面需要仔细一点&#xff0c;本来我最开始想到的时候全部累乘在除掉当前数&#xff0c;但是这样就没有把12345考虑进去&#xff0c;如果他本身是12345的话&#xff0c;那么除他以外的乘积并不一定是0&#…
阅读更多...
rabbitMQ rascal/amqplib报错 Error: Unexpected close 排查

rabbitMQ rascal/amqplib报错 Error: Unexpected close 排查

以下是一些可能导致此 RabbitMQ 客户端或任何其他 RabbitMQ 客户端中的套接字读取或写入失败的常见场景 1.错过&#xff08;客户端&#xff09;心跳 第一个常见原因是RabbitMQ 检测到心跳丢失。发生这种情况时&#xff0c;RabbitMQ 将添加一个有关它的日志条目&#xff0c;然…
阅读更多...
多测师肖sir_高级金牌讲师_ui自动化po框架版本01

多测师肖sir_高级金牌讲师_ui自动化po框架版本01

ui自动化po框架 一、po框架 1、基本介绍 &#xff08;1&#xff09;po模式是page object model的缩写&#xff08;简称&#xff1a;po或pom&#xff09; &#xff08;2&#xff09; po模式的核心思想&#xff1a;分层&#xff0c;实现耦合 实现&#xff1a;业务流程与页面元素操…
阅读更多...
如何从存档服务器上完全删除PDM用户

如何从存档服务器上完全删除PDM用户

当创建新用户时使用“PDM 登录”类型&#xff08;如下图&#xff09;&#xff0c;PDM用户名和密码会存储于存档服务器的注册表中。 存档服务器的注册表位置如下&#xff1a; HKEY_LOCAL_MACHINE\SOFTWARE\SolidWorks\Applications\PDMWorks Enterprise\ArchiveServer\ConisioU…
阅读更多...
HTML的初步学习

HTML的初步学习

HTML HTML 描述网页的骨架, 标签化的语言. HTML 的执行是浏览器的工作,浏览器会解析 html 的内容,根据里面的代码,往页面上放东西,浏览器的工作归根结底,还是以汇编的形式在CPU上执行. 浏览器对于html语法格式的检查没有很严格,即使你写的代码有一些不合规范之处,浏览器也会尽可…
阅读更多...
分享Python的十大库，这你一定得知道！

分享Python的十大库，这你一定得知道！

文章目录 前言关于Python技术储备一、Python所有方向的学习路线二、Python基础学习视频三、精品Python学习书籍四、Python工具包项目源码合集①Python工具包②Python实战案例③Python小游戏源码五、面试资料六、Python兼职渠道 前言 Python为我们提供了非常完善的基础库&#…
阅读更多...
c: struct sort descending and ascending in windows and Ubuntu

c: struct sort descending and ascending in windows and Ubuntu

/*** file StudentStructSort.h* author geovindu,Geovin Du,涂聚文 (geovindu163.com)* ide: vscode c11,c17 Ubuntu 22.4* brief 结构体排序示例* date 2023-11-05* version 0.1* copyright geovindu 站在巨人的肩膀上 Standing on the Shoulders of Giants**/#ifnd…
阅读更多...
计算机技术专业CSIT883系统分析与项目管理介绍

计算机技术专业CSIT883系统分析与项目管理介绍

文章目录 前言一、学科学习成果二、使用步骤三、最低出勤要求四、讲座时间表五、项目管理 前言 本课程介绍了信息系统开发中的技术和技术&#xff0c;以及与管理信息技术项目的任务相关的方法和过程。 它研究了系统分析师、客户和用户在系统开发生命周期中的互补角色。 它涵盖…
阅读更多...
Python+reuqests自动化接口测试

Python+reuqests自动化接口测试

1.最近自己在摸索Pythonreuqests自动化接口测试&#xff0c;要实现某个功能&#xff0c;首先自己得有清晰的逻辑思路&#xff01;这样效率才会很快&#xff01; 思路--1.通过python读取Excel中的接口用例&#xff0c;2.通过python的函数调用&#xff0c;get/Post 进行测试&…
阅读更多...
Apple ：苹果将在明年年底推出自己的 AI，预计将随 iOS 18 一起推出

Apple ：苹果将在明年年底推出自己的 AI，预计将随 iOS 18 一起推出

本心、输入输出、结果 文章目录 Apple &#xff1a;苹果将在明年年底推出自己的 AI&#xff0c;预计将随 iOS 18 一起推出前言三星声称库克相关图片弘扬爱国精神 Apple &#xff1a;苹果将在明年年底推出自己的 AI&#xff0c;预计将随 iOS 18 一起推出 编辑&#xff1a;简简单…
阅读更多...
python操作链接数据库和Mysql中的事务在python的处理

python操作链接数据库和Mysql中的事务在python的处理

python操作数据库 pymysql模块: pip install pymysql作用:可以实现使用python程序链接mysql数据库&#xff0c;且可以直接在python中执行sql语句 添加操作 import pymysql #1.创建链接对象c conn pymysql.Connect(host127.0.0.1,#数据库服务器主机地址port3306, #mysql的端口…
阅读更多...
通过postgis空间库导入sql格式的矢量数据到arcgis中

通过postgis空间库导入sql格式的矢量数据到arcgis中

1、在postgis中创建数据库 命名为test3 2、创建空间扩展 3、导入sql矢量文件 进入psql.exe目录中 进入dos命令框中 输入命令，其中host输入自己的主机ip，database为自己的数据库名称，数据路径修改为自己电脑上的路径，注意反斜杠 psql
阅读更多...
Node.js |（七）express案例实践：记账本 | 尚硅谷2023版Node.js零基础视频教程

Node.js |（七）express案例实践：记账本 | 尚硅谷2023版Node.js零基础视频教程

文章目录 &#x1f4da;基本结构搭建&#x1f4da;响应静态网页&#x1f4da;获取表单数据&#x1f4da;借助lowdb保存账单信息&#x1f4da;完善成功提醒&#x1f4da;账单列表&#x1f4da;删除账单&#x1f4da;final 学习视频&#xff1a;尚硅谷2023版Node.js零基础视频教程…
阅读更多...
MySQL–第4关：查询用户日活数及支付金额

MySQL–第4关：查询用户日活数及支付金额

MySQL–第4关&#xff1a;查询用户日活数及支付金额 – WhiteNights Site 标签&#xff1a;MySQL 非常好的题&#xff0c;爱来自中国。 题目 没啥用 任务描述 现有3张业务表&#xff0c;详见如下: 需要输出结果如下&#xff0c;没有支付的日期不需要显示&#xff0c;请写出对…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023