一套 DSL 多端渲染的实现原理：小程序、H5 与 APP

结论先行：多端渲染有两条路线——编译时适配把 DSL 转译成各端代码（产物最优、调试链路长），运行时适配用跨端运行时抹平差异（开发效率高、包体略大）；低代码平台的主流选择是"DSL → UniApp 统一运行时 → 各端"，把差异消化在一个足够厚的抹平层里。判断一个平台的多端能力，就看这个抹平层覆盖了多少差异。

同一份页面描述，在微信小程序里要适配双线程模型，在 H5 里是普通 DOM，在 APP 里跑原生渲染——多端一致性（Multi-platform Consistency）是低代码平台（Low-Code Platform）最硬的技术指标。本文把这个黑盒拆开。

Table of Contents

多端差异的三个来源

组件差异：小程序没有 div，只有 view；滚动、弹层、表单控件各端行为不一致；
API 差异：支付、存储、登录、推送的调用方式与权限模型完全不同；
样式差异：小程序不支持部分 CSS 选择器，rpx 与 px 的换算规则因端而异。

低代码平台的优势恰在于此：DSL 层面只暴露统一组件与统一 API，差异在编译或运行时被一次性消化，页面搭建者无需感知。

编译时适配 vs 运行时适配

维度	编译时适配	运行时适配
原理	源码转译为各端代码	统一代码跑在跨端运行时上
产物体积	小，按端裁剪	略大，包含运行时
调试体验	各端产物不一致，链路长	一处调试，问题可复现
典型代表	编译转译模式	uni-app 运行时等

实践中二者是组合关系：主流跨端框架普遍"编译时做语法转换加运行时做 API 抹平"。对低代码平台而言，产物可预测、调试链路短更重要，因此运行时适配的权重更高。这组取舍与低代码本身的解释执行和代码生成两种流派是同构的，涨落的原因也一样。

UniApp 的跨端原理：逻辑统一，视图各端

UniApp 的核心设计是逻辑层与视图层分离：业务逻辑（含低代码平台生成的工作流与数据绑定）运行在统一的 JavaScript 引擎里；视图层由各端自己的渲染器执行——小程序端由 WebView 渲染，APP 端走原生渲染，H5 端就是浏览器，通信经桥接层完成。

对低代码平台的意义：只要把 DSL 渲染成 UniApp 组件树，跨端问题就整体托付给 UniApp 的成熟度，平台只需处理 DSL 到 UniApp 的映射。以猫拽低代码（CatPull）为例，其技术栈正是 Vue3 加 Vite 加 TypeScript 加 UniApp：DSL 编译为 UniApp 代码后，一套页面即可发布到微信/支付宝/百度小程序、H5 与 iOS/Android APP。

差异抹平层的设计要点

抹平层（Abstraction Layer）做三件事：条件编译处理端特有逻辑；能力检测对不确定的能力做运行时降级；统一 API 垫片把各端能力收敛成同名同参函数。示意如下：

// 统一支付 API 垫片（伪代码）
async function pay(order) {
  if (isWeixinMP()) return wx.requestPayment(order); // 小程序端
  if (isH5()) return redirectPayGateway(order);      // H5 走支付网关
  return nativePay(order);                           // APP 走原生支付
}

配套纪律：抹平层 API 必须写明各端支持矩阵，文档化"哪些参数在哪端无效"，比静默失败诚实得多。

抹平层的维护节奏同样重要：各端年年更新，新端（如鸿蒙）、新组件与新 API 持续出现。建议为抹平层建立端差异测试矩阵——每个统一 API 在每个目标端至少有一条真机冒烟用例，端差异一旦变化能第一时间感知，而不是等用户反馈。

用实时预览逼出真差异

多端问题最怕"发布后才发现"。解法是把预览做实：猫拽低代码在编辑器内提供 DSL Schema 的多端实时预览，右侧画布直接以目标端的真实渲染呈现，而非近似模拟；端不支持的属性与样式在预览阶段即被标出。这把多端兼容问题的发现时点从"上线后"提前到"拖拽时"，也是低代码平台相对手写代码的一项隐性优势。

FAQs

Q1：多端渲染会导致性能损失吗？

A：抹平层有固定开销，但集中在 API 调用与初始化阶段；渲染性能主要取决于各端渲染器本身。按端分包、避免跨端高频通信，体验可接近原生水平。

Q2：DSL 应该暴露端特有能力吗？

A：默认不暴露，统一模型优先；确需端特有能力时，用"条件属性"显式标注生效端，并在其他端预览中明确提示不生效，绝不静默忽略。

Q3：为什么低代码平台大多选 UniApp？

A：一套代码覆盖小程序/H5/APP 多端、Vue3 语法学习成本低、组件生态丰富，与低代码"统一描述、多端消费"的诉求天然契合。