VTJ.PRO 在线应用开发平台多平台运行时（Web, H5, UniApp）

踩着两条虫
0 阅读3分钟

多平台运行时（Web, H5, UniApp）

VTJ.PRO 平台提供了一个统一的运行时架构，旨在不同的环境中执行低代码应用，包括标准的桌面 Web、移动端 H5 以及 UniApp（跨平台小程序/移动端）。这是通过位于 frontend/src/platform 目录中的解耦提供者-服务模式实现的，该模式将特定于环境的逻辑从核心的 @vtj/renderer 中抽象出来。

运行时架构概览

运行时系统在低代码 DSL（领域特定语言）和物理执行环境之间架起桥梁。它依赖于三个主要层次：

  1. 核心渲染器：@vtj/renderer 负责将 DSL 转换为 Vue 3 组件。
  2. 平台提供者：通过 createProvider 创建，此层为渲染器提供必要的服务（API、路由、存储）。
  3. 平台服务：特定于实现的类（例如 LocalService），负责根据 ContextMode 处理数据持久化和资源获取。

平台桥接图

下图说明了平台抽象层如何将通用的渲染器连接到特定于环境的实现。

sequenceDiagram
    participant R as @vtj/renderer
    participant P as Provider (provider.ts)
    participant S as LocalService (service.ts)
    participant API as Backend/Storage

    Note over P: 检查 ContextMode (Web/H5)
    R->>P: getPage(pageId)
    P->>S: getPage(pageId)
    S->>API: Fetch DSL JSON
    API-->>S: Return Page Schema
    S-->>P: Return Schema
    P-->>R: Resolve Component

关键抽象：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）。

职责

  1. DSL 检索：从本地存储（开发环境）或远程 URL（生产环境）获取应用 JSON 模式。
  2. 资源管理：解析组件库和远程脚本等依赖项。
  3. 持久化：在低代码设计过程中处理用户状态或临时覆盖的保存。

平台特定配置

平台入口组件服务实现路由策略
Web@vtj/webLocalServiceVue Router (History/Hash)
H5@vtj/web (移动端模式)LocalServiceVue Router (Hash)
UniApp@vtj/uniLocalServiceUniApp 原生路由

Web vs. H5 运行时

Web 和 H5 都使用 @vtj/web，但它们的 ContextMode 不同。此模式会标记渲染器，使其应用适合触摸界面或鼠标驱动桌面的不同 CSS 重置和视口配置。

UniApp 集成

UniApp 运行时需要一个专门的适配器，因为它不在标准的 DOM 环境中运行。UniApp 模式下的 LocalService 使用 uni.request 和 uni.getStorage，而不是标准的 fetch 或 localStorage。

参考资料

avatar
文章
阅读
粉丝