共计 2797 个字符，预计需要花费 7 分钟才能阅读完成。
NutUI& 京东科技前端、UI 设计师通过 2 个多季度的严密合作开发迭代，NutUI-JDT 作为正式京东科技格调的 NutUI 终于和大家见面了，此次创始了两侧通过主题定制的形式实现对不同格调组件库的完满交融，而且在组件的应用体验、易用性、灵活性、升高保护老本上有了十分大的晋升。
背景
随着业务的一直倒退、利用场景的一直裁减，京东科技（简称：科技）在挪动端同一我的项目须要同时反对 H5 端、小程序端的场景也越来越多，科技侧自研的 FindMobile 须要离开保护多端容易造成性能上线工夫不同步、资源老本反复等问题，如何能更好的用一套代码适配多端、达到对立保护上线的课题曾经须要重点留神。通过对团体内泛滥组件库的调研，NutUI 反对多端（H5 和小程序）的个性很适宜科技侧业务研发的需要，通过外部调研研决定联结 NutUI 团队独特打造出京东科技视觉的组件体系 – NutUI-JDT。
指标
本着一套代码适配多端、对立保护、同时公布上线的目标让挪动端多端场景开发更简略，通过对组件库的应用让研发从繁冗反复的根底工作中脱离进去，能更专一于业务逻辑优化、性能晋升，进步研发交付效率、升高开发成本。同时通过京东科技和京东商城两侧更多场景的组件利用与打磨，逐渐将组件库建设的更加完满。
如何交融
科技侧自研 FindMobile 与 NutUI 是两个独立的组件库，在组件视觉格调、组件类型、组件 API 属性的定义都有很大的不同，通过屡次探讨沟通，最终决定采纳共同开发主题定制的计划以达到两侧深度交融、对立保护迭代的目标，以此共识计划为基调两侧 UI 设计和前端开发进行了工作拆解、分工合作，即别离从裁减组件 / 组件属性、主题定制两条路线登程，最终实现实现科技视觉主题开发实现验收上线。
此次科技视觉主题深度定制性能的胜利上线也为后续团体内更多的视觉体系接入 NutUI 做了示范先例，并为保障更疾速、更完满的适配及公布上线打下了根底。
裁减差别组件 / 性能交融
通过对两侧组件一一甄别筛选，咱们排除两侧共有且功能属性雷同组件后，咱们发现了一部分科技侧高频应用但 NutUI 侧尚未使收录的组件，此外还发现了尽管 NutUI 已有雷同组件但需裁减一些 API 接口属性后能力达到反对现有科技侧组件的水平，此外两侧功能属性雷同的组件在 UI 款式格调上还是有较大的区别，所以咱们将交融分为了三大部分—— 1 甄别科技侧须要的组件（NutUI 没有的）、2 甄别开发须要裁减 API 接口属性的组件、3 全量 (70+) 组件 UI 款式差别梳理实现科技格调主题。
1、甄别出 5 个组件（表单、空状态、指示器、宫格、级联选择器）须要减少进入 NutUI 组件库体系；
2、甄别出了 8 个组件须要在 NutUI 原有组件根底上裁减 API 接口属性；
- 按钮：减少 size 属性；
- 单元格：分组新增形容、title 反对插槽、减少 size 属性；
- 对话框：新增款式格调属性 theme；
- 开关：反对自定义图标；
- 吐司：减少题目属性、自定义地位；
- 环形进度条：反对渐变色、两行文本款式；
- 选项卡切换：减少 size 属性、右侧减少滚动暗影、滚动交互；
- 输入框：右侧反对 is-link；
3、全量 (70+) 组件 UI 款式差别梳理：将交融后的总计 70+ 个组件各项 UI 款式差别点进行梳理甄别并一一研发推动调整主题定制为京东科技主题。
主题定制
通过探讨最终决定通过主题定制的形式在同一网站可切换不同格调，这样既保证了交融的统一性又兼容格调的独立性，同时也为后续兼容更多格调的组件库建立胜利案例。
1、确定自定义变量范畴，主题变量数量由原来 300+ 晋升至 700+；
2、自定义变量开发，实现新梳理的变量开发工作；
3、科技视觉主题实现全量组件适配；
科技视觉格调 sketch 组件库插件
科技视觉格调 sketch 组件插件内已将全副组件封装为控件（symbol）不便疾速多场景调取复用；同时插件内页封装定义好了全量存量文字款式、图层款式、色彩款式、不便对文字、图形等进行间接款式笼罩，保障对立 UI 标准输入；
最新插件包含组件 39 个、控件（symbol）500+ 个、文字款式 170+ 个、图层款式 90+ 个、色彩款式 30+ 个；
点击体验资源插件
Sketch 插件如何应用
老司机请疏忽此段内容哈~
装置实现后采纳调用控件（symbol）的形式置入到理论我的项目文件中，通过编辑覆盖层内容（无需解组控件）即可使控件显示所需内容，当组件库有更新时也可一键降级我的项目组件到最新，解决了老我的项目文件页面泛滥且不能疾速替换为最新 UI 款式的问题。
1、sketch 软件内通过设置“首选项 > 组件库 > 增加组件库”将插件实现装置；
2、理论我的项目应用时在菜单抉择“置入”抉择对应组件；
3、在操作面板针对控件内容进行批改，或对文字、图形等进行间接款式笼罩或绝对自在拉伸尺寸；
4、更新组件：组件库迭代更新时在原组件库所在存储文件夹下删旧存新（文件名需保持一致）后续即可调用置入最新组件，sketch 关上我的项目文件 (或旧我的项目文件) 如点击软件右上角“告诉”有“组件库有更新可用”点击确认后我的项目文件即可全量更新到最新组件；
技术看点
For 开发者
始终以来，NutUI 都是以京东红（JD APP）格调为主，本次公布衍生出新的主题生态 - 科技蓝。开发者能够依据本身的业务诉求抉择不同的 UI 格调。
新主题官网
新增京东科技主题，联合科技泛滥的利用场景，快来尝试一下吧。
- 主题切换非常简单，1 秒即可
- 进步科技团队的视觉交互体验
- 建设通⽤的细节设计标准
- 建⽴设计与开发对接的根底规范
- 提⾼产研输入对接的效率，升高输入工作量
差异性
相比之前，咱们在开发层面，咱们在源码外部 style 文件夹下，别离生成了 variables.scss、variables-jdt.scss 等多个主题文件，每个主题的全局的 variables.scss 文件，外部按规范的规定寄存寄存通用款式变量和每个组件的款式变量。本次主题变量数量由原来 300+ 晋升至 700+，强化每个组件的颗粒度定制能力。
如何应用
对于开发者应用形式，咱们保留了原有的形式，开发者有限装置额定插件包，只需批改 vite.config 或者 taro/config 中批改 variables-jdt.scss 主题包名称即可。应用形式：https://nutui.jd.com/jdt/#/guide/theme
后续布局
1、更多组件利用纳入科技视觉 sketch 插件，跟进主题变量
2、NutUI 对立 icon 图标库
共建里程碑
从 2021 年 11 月开始咱们实现了 NutUI 与 Find 的差别（近 70 项）梳理，缺失高频组件的开发（5 个），组件级 UI 定制的开发（抽取 700 余项款式变量），及科技版 UI 的开发和上线。
开源
众人拾柴火焰高，在这里咱们十分欢送感兴趣的同学参加到 NutUI 我的项目的开发，倡议通过提 Pull Request 的形式参加，NutUI 的继续迭代，离不开每一位参加帮忙开发的人，开发者每一次对咱们的认可，就是对咱们最大的激励。
