VTJ.PRO 在线应用开发平台多平台运行时（Web, H5, UniApp）
多平台运行时（Web, H5, UniApp）
VTJ.PRO 平台提供了一个统一的运行时架构，旨在不同的环境中执行低代码应用，包括标准的桌面 Web、移动端 H5 以及 UniApp（跨平台小程序/移动端）。这是通过位于frontend/src/platform目录中的解耦提供者-服务模式实现的，该模式将特定于环境的逻辑从核心的@vtj/renderer中抽象出来。
运行时架构概览
运行时系统在低代码 DSL（领域特定语言）和物理执行环境之间架起桥梁。它依赖于三个主要层次：
- 核心渲染器：
@vtj/renderer负责将 DSL 转换为 Vue 3 组件。 - 平台提供者：通过
createProvider创建，此层为渲染器提供必要的服务（API、路由、存储）。 - 平台服务：特定于实现的类（例如
LocalService），负责根据ContextMode处理数据持久化和资源获取。
平台桥接图
下图说明了平台抽象层如何将通用的渲染器连接到特定于环境的实现。
关键抽象：ContextMode 和 NodeEnv
运行时行为由两个定义执行上下文的主要枚举控制。
ContextMode
ContextMode决定了目标 UI 框架和环境约束：
- Web：标准桌面浏览器环境，使用
@vtj/web。 - H5：移动端浏览器环境。
- UniApp：用于小程序和原生移动端的跨平台运行时。
NodeEnv
NodeEnv定义了应用的生存周期阶段：
- Development：启用热重载、调试日志，并连接到开发 DSL 服务器。
- Production：针对性能进行优化，使用静态/已发布的 DSL 文件。
平台提供者（createProvider）
createProvider函数是初始化运行时环境的入口点。它返回一个Provider对象，@vtj/renderer使用该对象与外部世界进行交互。
实现细节
提供者封装了：
- 服务：一个
LocalService实例，用于对应用、页面和块执行 CRUD 操作。 - 适配器：处理特定平台的导航和资源加载的函数。
// 创建提供者的示例 export const createProvider = (options: ProviderOptions) => { const { mode, env, config } = options; const service = new LocalService(config); // ... 将服务桥接到渲染器需求的逻辑 return { service, mode, env, }; };LocalService 和数据流
LocalService类定义在frontend/src/platform/service.ts中，它扩展了来自@vtj/local的BaseService。它作为运行时的数据抽象层（DAL）。
职责
- DSL 检索：从本地存储（开发环境）或远程 URL（生产环境）获取应用 JSON 模式。
- 资源管理：解析组件库和远程脚本等依赖项。
- 持久化：在低代码设计过程中处理用户状态或临时覆盖的保存。
平台特定配置
| 平台 | 入口组件 | 服务实现 | 路由策略 |
|---|---|---|---|
| Web | @vtj/web | LocalService | Vue Router (History/Hash) |
| H5 | @vtj/web(移动端模式) | LocalService | Vue Router (Hash) |
| UniApp | @vtj/uni | LocalService | UniApp 原生路由 |
Web vs. H5 运行时
Web 和 H5 都使用@vtj/web，但它们的ContextMode不同。此模式会标记渲染器，使其应用适合触摸界面或鼠标驱动桌面的不同 CSS 重置和视口配置。
UniApp 集成
UniApp 运行时需要一个专门的适配器，因为它不在标准的 DOM 环境中运行。UniApp 模式下的LocalService使用uni.request和uni.getStorage，而不是标准的fetch或localStorage。
参考资料
- 官网文档：https://vtj.pro/
- 在线平台：https://app.vtj.pro/
- 开源仓库：https://gitee.com/newgateway/vtj