X

联系客服

公众号

下载源码

关注官方公众号
扫码联系客服

一套表单配置,PC 和手机共用:低代码引擎多端渲染怎么做

时间:2026-10-10

同一个业务,往往要两套表单:现场巡检在手机上填,管理员在电脑后台看。手机端图省事,把字段砍掉一半,和后台对不上;后台要导出、要统计,又得重新组织。两套页面各写各的,字段一改,两边都要动。

这个矛盾,本质是「把表单写死在页面里」造成的。页面是给某个端、某个尺寸写的,换个端就得重写。低代码引擎的思路正好相反:把表单抽象成一份配置,渲染交给引擎,同一个配置在不同端各自渲染。

一套表单配置,PC 和手机共用

多端各写一套,到底贵在哪

多端各写一套,代价不只是「多写一遍」。

  • 字段不一致:手机端砍了字段,后台多了字段,两边对不上,导出报表时对不齐;
  • 改造成本翻倍:加一个字段、调一条校验,PC 改一遍、移动端改一遍;
  • 逻辑漂移:两端各自维护联动规则,时间一长,手机端的规则悄悄落后于后台。

根子在于:页面把「表单长什么样」和「表单渲染在哪」绑死了。要解绑,就得把「长什么样」抽出来,变成配置。

引擎怎么做:配置和渲染分离

低代码引擎的核心,是把表单描述成一份与端无关的配置,再由渲染器按端适配。

同一份配置里,字段、类型、校验、联动规则都是中性的,不写死「在 PC 上长什么样」「在手机上长什么样」。渲染时,PC 端按桌面布局展开,移动端按竖屏单列堆叠——不是两套配置,是同一套配置的两种渲染。

这也是 FcDesigner 和 FormCreate 的分工:设计器产出这份中性的 JSON 配置,渲染器把它画到具体的端上。改配置,两端同时生效。

同一份配置在 PC 预览中的巡检表单

移动端特有的能力,怎么挂进引擎

移动端和 PC 的区别,不只在布局,还在能力:手机上要拍照、定位、手写签名,PC 上要表格、批量、导出。

这些「端特有的能力」,引擎用自定义组件来承接。拍照上传、地图选点、电子签名,做成自定义组件挂进引擎,配置里照常引用,渲染到移动端时用移动端的实现。表单结构不变,只是某个字段在手机上变成了「拍照」这种交互。公式、角色权限等进阶能力见 FcDesigner Pro 文档。

移动端预览:拍照、定位与手写签名

巡检数据从哪来:远程数据联动

巡检表单不是孤立的。巡检点位、设备台账、上次巡检记录,都存在后端。表单里的下拉选项、设备信息,不该写死在配置里,而是通过远程数据联动,在打开表单时从接口动态加载。

这样设备新增、点位调整,改的是后端数据,不是表单配置。选了点位,设备信息、上次异常记录自动带出来,巡检员照着填,不用在手机上一个字一个字敲。

巡检点位远程选项联动带出设备与异常

入门示例:设备巡检一份配置两端用

背景:现场用手机填巡检,后台用 PC 看同一张单;点位来自台账接口,选点位后带出设备名和上次异常。

步骤(设计器里):

  1. 拖入 巡检点位(选择器),选项接远程数据或先写演示选项。
  2. 按点位联动带出 设备名称、上次异常(只读)。
  3. 再加 现场拍照(上传)、定位信息、巡检员签名,以及状态、时间。
  4. 点 预览,用电脑端 / 移动端切换核对同一配置的两种渲染。

预期:改点位后设备信息跟着变;移动端能看到拍照、定位、签名字段。

常见问题

问:一份配置真的能两端都好看吗?
能。配置描述的是字段、校验、联动这些业务信息,布局由渲染器按端适配;两端共用业务逻辑,各自做端上适配。

问:移动端的拍照、定位怎么加?
通过自定义组件扩展,把端特有的交互做成组件挂进引擎,配置里照常引用,渲染到对应端时生效。

问:和现有业务系统怎么对接?
远程数据联动从后端接口加载下拉选项和主数据;表单提交的数据再回传业务系统,巡检记录、设备台账保持同步。