共计 2714 个字符,预计需要花费 7 分钟才能阅读完成。
作者:京东批发 佟恩
本文介绍,如何应用 NutUI 组件库,搭建一套为专属业务格调的业务组件库。
NutUI 是一款京东格调的挪动端组件库。NutUI 目前反对 Vue 和 React 技术栈,反对 Taro 多端适配。
当下的实现形式
个别组件库,都会给用户提供批改主题的形式。比方在 NutUI 组件库中,给用户提供了两种形式:
- 批改 CSS 变量,NutUI 组件库反对通过全局配置组件 ConfigProvider 组件实现主题定制;
const customTheme = {nutuiBadgeBorderRadius: '12px 12px 12px 0',}
<ConfigProvider theme={customTheme}>
<Badge value="NEW">
<Avatar icon="my" shape="square" />
</Badge>
</ConfigProvider>
- 通过 SCSS 变量,NutUI 组件库提供通过编写一套自定义主题的款式文件,间接笼罩现有款式文件,实现主题定制。
// 新建一个 SCSS 文件 custom_theme.scss 进行自定义
// 主色调
$primary-color: #478EF2;
$primary-color-end: #496AF2;
// vue 版本
{test: /\.(sa|sc)ss$/,
use: [
{
loader: 'sass-loader',
options: {
// 留神:在 sass-loader 不同版本,这个选项名是 是不一样的,具体可参考 sass-loader 对应的版本文档
data: `@import "@/assets/custom_theme.scss";@import "@nutui/nutui-react/dist/styles/variables.scss";`,
}
}
]
}
以后问题与解决思路
以上两种形式,对于咱们实现单个我的项目来讲,还是比较简单的,然而如果咱们业务条线下的每一个我的项目都须要这样接入,那这个接入形式就会显得蠢笨起来。
那咱们怎么能力优雅的接入呢?
咱们的思路是,NutUI 与业务侧一起,独特输入一套属于本人业务格调的组件库。 其中,NutUI 提供组件库反对主题定制的配置和编译能力,业务侧输入交互与视觉标准,共同完成组件库的适配计划,输入定制化组件库的 NPM 包,进而在业务我的项目中提供反对。
这样,在业务开发中,就再也不必关注主题定制实现的问题了。
落地计划
明确方向后,咱们基于现有组件库的架构,给到了订正计划,梳理流程如下:
以下,咱们将拆解落地计划,以便大家更好的接入。
适配层:减少编译配置和执行脚本
在适配层,咱们心愿能够缩小开发者构建组件库我的项目的老本,为开发者提供一套疾速的构建脚本工具。比方,能够应用 npm run dev 能够疾速的启动本地我的项目,npm run test 可启动单测验证,而 npm run dev:taro:weapp 能够启动本地适配 Taro 的我的项目。
在此基础上,咱们减少了适配业务线的编译项,如可应用 npm run dev:taro:weapp:jmapp 来启动本地「适配京麦业务(jmapp)格调」的「适配 Taro」的我的项目」。
具体实现如下:
"dev:taro:weapp:jmapp": "VITE_APP_PROJECT_ID=jmapp npm run generate:file:taro:pages && cd ./src/sites/mobile-taro && npm run dev:weapp:jmapp",
即通过设置环境变量 projectId=’jmapp’ 的形式,告知编译脚本以后所运行的业务线,以适配业务线所依赖的主题变量文件或字体文件等。如咱们会在 load-style.js 文件中依据 projectId 援用不同的文件信息,如下:
const projectId = process.env.VITE_APP_PROJECT_ID
if (nameLowerCase === 'icon') {
rewrite =
`import '../../../styles/font${projectId ? `-${projectId}` : ''}/iconfont.css'\n` + rewrite
}
同样,咱们会按此批改 theme 生成文件等。与此同时,咱们也会在这一层实现 demo 演示的适配计划,即批改 demo app.tsx 里引入的变量文件门路,办法相似。
组件层:减少变量文件、按业务视觉标准适配组件
1、减少变量文件
在实现适配层后,须要在相应的目录下,减少须要的变量文件和字体文件,咱们能够间接拷贝原主题,并批改为咱们须要的名字,如 variables-jmapp.scss。这时,启动 npm run dev:taro:weapp:jmapp,就会看到和默认主题统一的 demo 出现。
接下来,就须要依照业务方提供的视觉标准,将已提取的 CSS 变量值订正为业务视觉中的变量值,如:
// 默认品牌色 - 京东主题色
$brand-color: var(--nutui-brand-color, #fa2c19) !default;
// 订正后品牌色 - 京麦主题色
$brand-color: var(--nutui-brand-color, #3768fa) !default;
以此来推,一一 check 并订正变量值。你就会看到这样的成果转变,从一开始右侧的京东主题变为左侧的京麦主题,如图示:
主题差别展现
2、按业务视觉标准适配组件
个别,业务侧会有一些非凡的交互方式,而如果这些交互方式能够转化为通用交互方式时,就会倡议把这些交互方式落到组件库的实现里,那这时候就意味着组件库有增强性能的输入。而这也是在组件库做业务标准适配时,耗时较多的一环。
本次通过与京麦团队的深度单干,咱们也减少了 20+ 组件性能的新增,加强了 NutUI 组件库的适配能力,更多细节可参看 NutUI 新增 Demo 演示。
输入层:Demo 与业务主题定制包
在组件层,咱们启动本地运行脚本,即可展现残缺的 Demo 演示,咱们通过 Demo 演示,疾速 check 以后组件库是否曾经笼罩业务视觉标准,如确定已齐全实现验证,这时,咱们就具备了公布主题定制包的条件。
接下来咱们只须要编译并公布主题包即可。其中,编译脚本局部相似默认包的公布,配置逻辑参考第一步适配层。
而公布流程,参考如下。在测试阶段,咱们倡议公布 beta 版本。
用户层:验证主题定制包
验证主题包,如应用其余一般包一样,咱们引入包并装置运行,就能够看到咱们的应用成果了。
小结
通过以上操作,咱们就能够为咱们的业务线来定制主题了,堪称一劳永逸,团队小伙伴再也不必在应用组件库与主题定制之间做衡量了。
不知你心动了没。如果心动,就来尝试应用 NutUI 来实现本人的一套业务主题包吧。