开发者的低代码实践：TinyPro集成TinyEngine设计器技术解析

本文由TinyPro贡献者宋子文同学原创。

TinyPro 与 TinyEngine 是 OpenTiny 开源生态的重要组成部分：

• TinyPro 提供企业级后台系统模板
• TinyEngine 提供灵活强大的低代码引擎

本项目在 TinyPro 中深度集成了基于 TinyEngine 的低代码设计器，通过 插件化架构 构建出可扩展的低代码开发平台。

借助它，你只需在可视化设计器中完成页面设计，就能一键导入 TinyPro，并自动生成菜单、权限及国际化配置，实现真正的 “所见即所得” 式开发体验。

整体架构

lowcode-designer/
├── src/
│   ├── main.js              # 应用入口
│   ├── composable/          # 可组合逻辑
│   ├── configurators/       # 配置器
├── registry.js              # 插件注册表
├── engine.config.js         # 引擎配置
└── vite.config.js          # 构建配置

核心组成部分

1. TinyEngine 核心：提供低代码设计器的基础能力
2. 插件系统：通过插件扩展功能
3. 注册表机制：统一管理插件和服务
4. 配置器系统：自定义组件属性配置

核心特性

• ✨ 智能代码生成：基于可视化设计自动生成符合 TinyPro 规范的 Vue 3 + TypeScript 代码
• 🔐 自动认证管理：智能获取和管理 API Token，支持多种认证方式
• 🎯 一键集成：自动创建菜单、配置权限、添加国际化词条
• 🛠️ 代码转换：将 TinyEngine 生成的代码自动转换为 TinyPro 项目兼容格式
• 💾 本地保存：支持将生成的文件保存到本地文件系统
• 🎨 可视化配置：提供友好的 UI 界面进行菜单和路由配置

快速开始

安装

使用 TinyCli 可以快速初始化 TinyPro 模版

tiny init pro 

启动低代码设计器

cd lowcode-designer
pnpm install
pnpm dev

启动前端与后端

cd web
pnpm install
pnpm start

cd nestJs
pnpm install
pnpm start

启动完成后，访问 👉 http://localhost:8090 即可体验低代码设计器。

使用流程

设计页面：在 TinyEngine 可视化编辑器中设计页面

点击出码按钮：点击工具栏中的”出码”按钮

配置菜单信息：在弹出的对话框中填写菜单配置信息

生成预览：点击”生成预览”查看将要生成的文件

完成集成：点击”完成集成”自动创建菜单、分配权限并保存文件

接下来我们就可以直接去 TinyPro 直接看到页面效果

TinyPro Generate Code 插件解析

插件目录结构

generate-code-tinypro/
├── package.json              # 插件包配置
├── src/
│   ├── index.js             # 插件入口
│   ├── meta.js              # 元数据定义
│   ├── Main.vue             # 主组件
│   ├── SystemIntegration.vue # 功能组件
│   ├── components/          # 通用组件
│   │   ├── ToolbarBase.vue
│   │   ├── ToolbarBaseButton.vue
│   │   └── ToolbarBaseIcon.vue
│   ├── composable/          # 可组合逻辑
│   │   ├── index.js
│   │   └── useSaveLocal.js
│   └── http.js              # HTTP 服务
├── vite.config.js           # 构建配置
└── README.md                # 文档

代码生成流程

const generatePreview = async () => {
  // 1. 获取当前页面的 Schema
  const currentSchema = getSchema();

  // 2. 获取应用元数据（i18n、dataSource、utils等）
  const metaData = await fetchMetaData(params);

  // 3. 获取页面列表和区块信息
  const pageList = await fetchPageList(appId);
  const blockSchema = await getAllNestedBlocksSchema();

  // 4. 调用代码生成引擎
  const result = await generateAppCode(appSchema);

  // 5. 过滤和转换生成的代码
  const transformedFiles = filteredFiles.map((file) => ({
    ...file,
    fileContent: transformForTinyPro(file.fileContent),
  }));
};

TinyPro 与 TinyEngine 通信

当用户在低代码设计器中点击“完成集成”时，插件首先通过 Token Manager 向认证接口 /api/auth/api-token 请求并获取访问凭证（Token），随后利用该 Token 调用一系列后台接口，包括国际化 API、菜单 API 和角色 API。插件通过这些接口自动完成 页面国际化词条创建、菜单注册、角色查询与权限分配 等步骤。整个过程中，HTTP Client 统一负责与后端通信，而返回的数据（菜单信息、角色信息、权限配置等）会实时更新到本地，最终实现了从页面设计到系统集成的一键闭环，使 TinyEngine 生成的页面能无缝接入 TinyPro 系统。

总结

通过 TinyPro 与 TinyEngine 的深度融合，我们实现了从「可视化设计」到「系统集成」的完整闭环，让不会写代码的用户也能轻松构建出高质量的前端页面。

用户只需拖拽组件、填写配置、点击“出码”，插件便会自动生成符合 TinyPro 标准的代码，并完成菜单、权限、国际化等系统级配置。

这一过程无需手动修改代码或后台配置，就能一键完成页面创建、接口绑定与权限分配，实现真正意义上的「低门槛、高效率、可扩展」的前端开发体验。

关于OpenTiny

欢迎加入 OpenTiny 开源社区。添加微信小助手：opentiny-official 一起参与交流前端技术～
OpenTiny 官网：https://opentiny.design
OpenTiny 代码仓库：https://github.com/opentiny
TinyPro 源码：https://github.com/opentiny/tiny-pro
TinyEngine 源码： https://github.com/opentiny/tiny-engine

欢迎进入代码仓库 Star🌟TinyPro、TinyEngine、TinyVue、TinyNG、TinyCLI、TinyEditor~

如果你也想要共建，可以进入代码仓库，找到 good first issue 标签，一起参与开源贡献~