Autor: JD Retail Tong Es
Este artículo presenta cómo usar la biblioteca de componentes NutUI para crear un conjunto de bibliotecas de componentes comerciales para estilos comerciales exclusivos.
NutUI es una biblioteca de componentes móviles de estilo JD. NutUI actualmente es compatible con las pilas de tecnología Vue y React, y es compatible con la adaptación multiterminal de Taro.
implementación actual
Las bibliotecas de componentes generales proporcionarán a los usuarios una forma de modificar el tema. Por ejemplo, en la biblioteca de componentes NutUI, los usuarios cuentan con dos métodos:
- Modifique las variables CSS, la biblioteca de componentes NutUI admite la personalización de temas a través del componente de configuración global ConfigProvider;
const customTheme = {
nutuiBadgeBorderRadius: '12px 12px 12px 0',
}
<ConfigProvider theme={customTheme}>
<Badge value="NEW">
<Avatar icon="my" shape="square" />
</Badge>
</ConfigProvider>
- A través de las variables SCSS, la biblioteca de componentes NutUI proporciona un conjunto de archivos de estilo de tema personalizados para sobrescribir directamente los archivos de estilo existentes para completar la personalización del tema.
// 新建一个 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";`,
}
}
]
}
Problemas actuales y soluciones
Los dos métodos anteriores son relativamente simples para que implementemos un solo proyecto, pero si es necesario acceder a todos los proyectos de nuestra línea de negocios de esta manera, entonces este método de acceso parecerá torpe.
Entonces, ¿cómo podemos acceder a él con gracia?
Nuestra idea es que NutUI y el lado comercial generarán conjuntamente un conjunto de bibliotecas de componentes que pertenecen a su propio estilo comercial. Entre ellos, NutUI proporciona una biblioteca de componentes para admitir las capacidades de configuración y compilación de la personalización de temas, y el lado comercial genera interacción y especificaciones visuales para completar conjuntamente el esquema de adaptación de la biblioteca de componentes, generar el paquete NPM de la biblioteca de componentes personalizados y luego brindar apoyo en proyectos empresariales.
De esta manera, en el desarrollo de negocios, ya no necesita prestar atención al tema de la personalización del tema.
plano de aterrizaje
Después de aclarar la dirección, dimos un plan de revisión basado en la estructura de la biblioteca de componentes existente. El proceso de clasificación es el siguiente:
A continuación, desmontaremos el plan de implementación para un mejor acceso.
Capa de adaptación: agregar configuración de compilación y script de ejecución
En la capa de adaptación, esperamos reducir el costo para que los desarrolladores construyan proyectos de biblioteca de componentes y brindarles a los desarrolladores un conjunto de herramientas de secuencias de comandos de construcción rápida. Por ejemplo, puede usar npm run dev para iniciar rápidamente proyectos locales, npm run test para iniciar la verificación de prueba única y npm run dev:taro:weapp para iniciar proyectos de Taro adaptados localmente.
Sobre esta base, hemos agregado elementos de compilación que se adaptan a la línea de negocio. Por ejemplo, puede usar npm run dev:taro:weapp:jmapp para iniciar el proyecto local "adapt Taro" que "se adapta al estilo Jingmai business (jmapp) " ".
La implementación específica es la siguiente:
"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",
Es decir, al configurar la variable de entorno projectId='jmapp', informe a la línea comercial que el script de compilación se está ejecutando actualmente para adaptarse a los archivos de variables de tema o archivos de fuentes de los que depende la línea comercial. Por ejemplo, nos referiremos a información de archivo diferente según projectId en el archivo load-style.js, de la siguiente manera:
const projectId = process.env.VITE_APP_PROJECT_ID
if (nameLowerCase === 'icon') {
rewrite =
`import '../../../styles/font${
projectId ? `-${projectId}` : ''
}/iconfont.css'\n` + rewrite
}
Del mismo modo, modificaremos los archivos generados por el tema, etc. en consecuencia. Al mismo tiempo, también completaremos el esquema de adaptación de la demostración de demostración en esta capa, es decir, modificaremos la ruta del archivo variable introducida en la aplicación de demostración.tsx, y el método es similar.
Capa de componentes: agregue archivos variables, adapte los componentes de acuerdo con las especificaciones de la visión comercial
1. Agregar archivos variables
Después de completar la capa de adaptación, debemos agregar los archivos de variables y archivos de fuentes requeridos en el directorio correspondiente.Podemos copiar directamente el tema original y modificarlo con el nombre que necesitamos, como variables-jmapp.scss. En este momento, inicie npm run dev:taro:weapp:jmapp y verá una presentación de demostración consistente con el tema predeterminado.
A continuación, es necesario revisar los valores de las variables CSS extraídos en valores de variables en la visión comercial de acuerdo con la especificación visual proporcionada por la parte comercial, como por ejemplo:
// 默认品牌色-京东主题色
$brand-color: var(--nutui-brand-color, #fa2c19) !default;
// 修订后品牌色-京麦主题色
$brand-color: var(--nutui-brand-color, #3768fa) !default;
Use esto para presionar, verificar y revisar los valores de las variables uno por uno. Verá tal cambio en efecto, del tema Jingdong a la derecha al tema Jingmai a la izquierda, como se muestra en la figura:
Pantalla de diferencia de tema
2. Adaptar los componentes según las especificaciones de la visión empresarial
En general, habrá algunos métodos de interacción especiales en el lado comercial, y si estos métodos de interacción se pueden transformar en métodos de interacción generales, se recomienda poner estos métodos de interacción en la implementación de la biblioteca de componentes, lo que significa que la biblioteca de componentes tiene se ha reforzado la salida de la función. Y esta es también una parte que lleva mucho tiempo al hacer la adaptación de especificaciones comerciales en la biblioteca de componentes.
A través de una cooperación profunda con el equipo de Jingmai esta vez, también hemos agregado más de 20 funciones de componentes nuevos y mejorado la adaptabilidad de la biblioteca de componentes de NutUI. Para obtener más detalles, consulte la nueva demostración de NutUI.
Capa de salida: paquete de personalización de temas comerciales y de demostración
En la capa de componentes, iniciamos el script de ejecución local para mostrar una demostración de demostración completa. A través de la demostración de demostración, verificamos rápidamente si la biblioteca de componentes actual ha cubierto la especificación de visión empresarial. Si se confirma que la verificación se ha completado por completo, entonces estamos listos para publicar Condiciones para paquetes de personalización de temas.
A continuación, solo necesitamos compilar y publicar el paquete del tema. Entre ellos, la parte del script de compilación es similar al lanzamiento del paquete predeterminado y la lógica de configuración se refiere al primer paso de la capa de adaptación.
Para el proceso de publicación, consulte lo siguiente. Durante la fase de prueba, recomendamos lanzar versiones beta.
Capa de usuario: paquete personalizado de tema de autenticación
Para verificar el paquete del tema, al igual que con otros paquetes comunes, importamos el paquete, lo instalamos y lo ejecutamos, y luego podemos ver el efecto de nuestro uso.
resumen
A través de las operaciones anteriores, podemos personalizar el tema para nuestra línea de negocio, de una vez por todas, los miembros del equipo ya no necesitan hacer un compromiso entre el uso de la biblioteca de componentes y la personalización del tema.
No sé si te conmueves. Si está interesado, intente usar NutUI para completar su propio conjunto de paquetes de temas comerciales.