以下文章来源于京东零售技术 ，作者金融科技群徐建平
一 项目背景 随着业务的不断发展、应用场景的不断扩充，京东科技（简称：科技）在移动端同一项目需要同时支持 H5 端、小程序端的场景也越来越多，科技侧自研的 FindMobile 需要分开维护，多端容易造成功能上线时间不同步、资源成本重复等问题，如何能更好的用一套代码适配多端、达到统一维护上线的课题已经需要重点注意。通过对集团内众多组件库的调研，NutUI 支持多端（H5和小程序）的特性很适合科技侧业务研发的需求，经过内部调研决定联合 NutUI 团队共同打造出京东科技视觉的组件体系：NutUI-JDT。
二 项目目标 本着一套代码适配多端、统一维护、同时发布上线的目的让移动端多端场景开发更简单，通过对组件库的使用，让研发从繁杂重复的基础工作中脱离出来，能更专注于业务逻辑优化、性能提升，提高研发交付效率、降低开发成本。同时通过京东科技和京东商城两侧更多场景的组件应用与打磨，逐步将组件库建设地更加完美。
三 组件库如何融合？ 科技侧自研 FindMobile 与 NutUI 是两个独立的组件库，在视觉风格、组件类型、组件 API 属性的定义都有很大的不同。经过多次讨论沟通，最终决定采用共同开发主题定制的方案以达到两侧深度融合、统一维护迭代的目的。以此共识方案为基调，两侧 UI 设计和前端开发进行了任务拆解、分工合作，即分别从扩充组件/组件属性、主题定制两条路线出发，最终实现完成科技视觉主题开发完成，并验收上线。此次科技视觉主题深度定制功能的成功上线，也为后续集团内更多的视觉体系接入 NutUI 做了示范先例，并为保证更快速、更完美的适配及发布上线打下了基础。
1、扩充差异组件/功能融合通过对两侧组件逐个甄别筛选，排除两侧共有且功能属性相同组件后，我们梳理了出了急需要解决的问题：部分科技侧高频使用但 NutUI 侧尚未收录的组件；虽然 NutUI 已有相同组件，但需扩充一些 API 接口属性，才能达到支持现有科技侧组件的程度；两侧功能属性相同的组件在 UI 样式风格上还是有较大的区别。最终，我们将融合分为了三大部分—— 甄别科技侧需要的组件（NutUI没有的) ; 甄别开发需要扩充 API 接口属性的组件; 全量组件 UI 样式差异梳理，并完成科技风格主题设计。(1) 甄别需要增加进入 NutUI 组件库体系:5个（表单、空状态、指示器、宫格、级联选择器）；
- 按钮：增加 size 属性；
- 单元格：分组新增描述、title 支持插槽、增加 size 属性；
- 对话框：新增样式风格属性 theme；
- 开关：支持自定义图标；
- 吐司：增加标题属性、自定义位置；
- 环形进度条：支持渐变色、两行文本样式；
- 选项卡切换：增加 size 属性、右侧增加滚动阴影、滚动交互；
- 输入框 ：右侧支持 is-link；
(3) 全量组件 UI 样式差异梳理：将融合后组件各项UI样式差异点进行梳理甄别，并逐个研发推进调整主题定制为京东科技主题，累计70+。
四 组件库展示 科技视觉风格 sketch 组件插件内已将全部组件封装为控件（symbol），方便快速多场景调取复用；同时插件内页封装定义好了全量存量文字样式、图层样式、颜色样式，方便对文字、图形等进行直接样式覆盖，保证统一UI规范输出；
最新插件包括：组件 39 个、控件（symbol） 500+ 个、文字样式 170+ 个、图层样式 90+ 个、颜色样式30+ 个；（文字尾部有资源插件下载方式~）
五 使用方式 以下内容，老司机请忽略～安装完成后采用调用控件（symbol）的方式置入到实际项目文件中，通过编辑覆盖层内容（无需解组控件）即可使控件显示所需内容，当组件库有更新时，也可一键升级项目组件到最新，解决了老项目文件页面众多且不能快速替换为最新UI样式的问题。
六 规划与总结 未来，我们还将不断对组件库进行升级，将更多组件应用纳入科技视觉 sketch 插件，跟进主题变量；NutUI 统一 icon 图标库等。自 2021 年 11 月开始，我们完成了 NutUI 与 Find 的差异梳理（近70项）、缺失高频组件的开发（5个、组件级UI定制的开发（抽取700余项样式变量）、及科技版 UI 的开发和上线。
京东科技组件体系网址：
https://nutui.jd.com/jdt/?theme=jdt#/
