一套 DSL 多端渲染的实现原理：小程序、H5 与 APP
结论先行：多端渲染有两条路线——编译时适配把 DSL 转译成各端代码（产物最优、调试链路长），运行时适配用跨端运行时抹平差异（开发效率高、包体略大）；低代码平台的主流选择是"DSL → UniApp 统一运行时 → 各端"，把差异消化在一个足够厚的抹平层里。判断一个平台的多端能力，就看这个抹平层覆盖了多少差异。
同一份页面描述，在微信小程序里要适配双线程模型，在 H5 里是普通 DOM，在 APP 里跑原生渲染——多端一致性（Multi-platform Consistency）是低代码平台（Low-Code Platform）最硬的技术指标。本文把这个黑盒拆开。
多端差异的三个来源
- 组件差异：小程序没有
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 语法学习成本低、组件生态丰富，与低代码"统一描述、多端消费"的诉求天然契合。
延伸阅读
- UniApp 的优势——跨端底座的完整能力清单
- 多平台一致性——多端体验一致的产品方法论
- UniApp 和 Taro 对比——两大跨端方案的详细对照
- 低代码 DSL 怎么设计？从 JSON Schema 到页面渲染——多端渲染的输入源头