10月27日晚8点,OpenTiny 社区开启了 TinyEngine 开源低代码引擎首次答疑直播,本次直播我们通过收集开发者诉求,精心策划和组织了内容,希望提供给大家最明确和清晰的答疑方式。这是 TinyEngine 低代码引擎直播计划的开端,也是打开了 TinyEngine 低代码引擎与开发者沟通交流的新途径。
在本次直播活动中,我们为大家介绍了 TinyEngine 低代码引擎——使能开发者定制低代码平台。并就其基础功能类、代码原理解读类、功能增强类等问题都进入了深入的探讨和答疑。现在,我们梳理了本次直播的关键内容。
低代码引擎使能开发者定制低代码平台。它是低代码平台的底座,提供可视化搭建页面等基础能力,既可以通过线上搭配组合,也可以通过下载源码进行二次开发,实时定制出自己的低代码平台。适用于多场景的低代码平台开发,如:资源编排、服务端渲染、模型驱动、移动端、大屏端、页面编排等。
核心亮点:
基础功能使用类:
问题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().layoutState
if (type !== 'clickTree') {
useLayout().closePlugin()
}
// 动态计算该方法需要渲染的 属性面板
useProperties().getProps(node, parent)
// 设置当前 schema
useCanvas().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
欢迎进入代码仓库 StarTinyEngine、TinyVue、TinyNG、TinyCLI~
如果你也想要共建,可以进入代码仓库,找到 good first issue标签,一起参与开源贡献~