（PC、小程序）表单动态渲染方案

背景

1. 原PC、小程序页面开发代码复制粘贴非常严重，页面非常冗余，动辄上千行
2. 双端开发，相同业务，双端同步修改，容易出现遗漏导致不同步情况（之前就有发现，eg：PC必填了，小程非必填等等），并且这种问题极难被主动发现，发现就是线上问题
3. 双端发版周期长，尤其小程序需要等待微信方审核，小修小改同样需要双端发版，流程费事费力
4. 光伏业务的特殊性，施工现场收资可能存在紧急修改场景（eg：去掉||增加某个字段、去掉必填项等等），常规发版很难快速响应支持

现状

PC：原页面全部采用elementUi组件堆叠方式输出，代码非常冗余，新开页面（购入系统到此方案落地前）采用JSON配置生成，所有JSON均单一考虑PC端没有统一口径

小程序：原页面及新开页面全部采用小程序原生组件或者vant组件堆叠方式，没有JSON配置化，更没有统一口径

期望

PC、小程序统一走JSON配置化页面生成，形成完整的组件库及JSON转换器，同业务复用JSON，JSON远端部署(CND\OSS)，随时改随时生效

实现

问题解决

1. JSON版本管理问题，这里主要是指JSON的历史版本以及区分各环境JSON版本

分别建立各环境JSON文件夹分别为dev/test/stag/prod，此文件夹在只会存当前使用的json，历史版本用版本号文件夹存

1. 对于大表单图片资源较多情况，图片加载效率及流量消耗问题

对所有图片均采用懒加载，提升页面访问速度

另外小程序考虑到手机端流量消耗问题，这里我们对所有上传的图片，页面初始渲染统一将图进行压缩，只有在用户点击查看详情时访问到原图。PC: 仅对上传ali oss 文件才能处理 ?x-oss-process=image/format,jpg/quality,q_80

官方文档：OSS图片质量变换参数及示例 - 对象存储 OSS - 阿里云

成果

效率提升

小程序从往前的原生代码堆叠->配置化的转换，效率提升非常显著

一套JSON双端复用，减少重复字段核对工作，开发&测试提效

极速发版

小修小改，直接通过JSON修改即可直接双端生效，省去更新迭代发版时间&微信审核时间，面对施工现场提出来紧急优化需求也能从容面对。

容错&风险规避（规划建设中）

双端统一走同JSON配置，能有效规避掉迭代频繁导致PC和小程序存在略微差异问题

规划中：通过统一的方法对JSON进行校验，避免一些类型或者拼写错误情况