Autor: JD Retail Tong En
Este artigo apresenta como usar a biblioteca de componentes NutUI para construir um conjunto de bibliotecas de componentes de negócios para estilos de negócios exclusivos.
NutUI é uma biblioteca de componentes móveis estilo JD. NutUI atualmente oferece suporte a pilhas de tecnologia Vue e React e oferece suporte à adaptação multiterminal Taro.
implementação atual
As bibliotecas de componentes gerais fornecerão aos usuários uma maneira de modificar o tema. Por exemplo, na biblioteca de componentes NutUI, os usuários recebem dois métodos:
- Modificar variáveis CSS, a biblioteca de componentes NutUI suporta customização de temas através do componente de configuração global ConfigProvider;
const customTheme = {
nutuiBadgeBorderRadius: '12px 12px 12px 0',
}
<ConfigProvider theme={customTheme}>
<Badge value="NEW">
<Avatar icon="my" shape="square" />
</Badge>
</ConfigProvider>
- Por meio de variáveis SCSS, a biblioteca de componentes NutUI fornece um conjunto de arquivos de estilo de tema personalizado para sobrescrever diretamente os arquivos de estilo existentes para concluir a personalização do 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 e soluções atuais
Os dois métodos acima são relativamente simples para implementarmos um único projeto, mas se todos os projetos em nossa linha de negócios precisarem ser acessados dessa maneira, esse método de acesso parecerá desajeitado.
Então, como podemos acessá-lo graciosamente?
Nossa ideia é que a NutUI e o lado comercial produzam em conjunto um conjunto de bibliotecas de componentes que pertencem ao seu próprio estilo comercial. Entre eles, o NutUI fornece uma biblioteca de componentes para suportar os recursos de configuração e compilação da personalização do tema, e o lado comercial gera interação e especificações visuais para concluir em conjunto o esquema de adaptação da biblioteca de componentes, gerar o pacote NPM da biblioteca de componentes personalizados e em seguida, fornecer suporte em projetos de negócios.
Dessa forma, no desenvolvimento de negócios, você não precisa mais se preocupar com a questão da customização do tema.
plano de pouso
Depois de esclarecer a direção, demos um plano de revisão com base na estrutura da biblioteca de componentes existente. O processo de classificação é o seguinte:
Abaixo, vamos desmontar o plano de implementação para melhor acesso.
Camada de adaptação: adicione configuração de compilação e script de execução
Na camada de adaptação, esperamos reduzir o custo para os desenvolvedores criarem projetos de biblioteca de componentes e fornecer aos desenvolvedores um conjunto de ferramentas de script de construção rápida. Por exemplo, você pode usar npm run dev para iniciar rapidamente projetos locais, npm run test para iniciar a verificação de teste único e npm run dev:taro:weapp para iniciar projetos Taro adaptados localmente.
Com base nisso, adicionamos itens de compilação que se adaptam à linha de negócios. Por exemplo, você pode usar npm run dev:taro:weapp:jmapp para iniciar o projeto local "adaptar Taro" que "se adapta ao estilo Jingmai business (jmapp) " ".
A implementação específica é a seguinte:
"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",
Ou seja, ao definir a variável de ambiente projectId='jmapp', informe a linha de negócios que o script de compilação está sendo executado no momento para se adaptar aos arquivos de variáveis temáticas ou arquivos de fontes dos quais a linha de negócios depende. Por exemplo, vamos nos referir a diferentes informações de arquivo de acordo com projectId no arquivo load-style.js, como segue:
const projectId = process.env.VITE_APP_PROJECT_ID
if (nameLowerCase === 'icon') {
rewrite =
`import '../../../styles/font${
projectId ? `-${projectId}` : ''
}/iconfont.css'\n` + rewrite
}
Da mesma forma, modificaremos os arquivos gerados pelo tema, etc. de acordo. Ao mesmo tempo, também completaremos o esquema de adaptação da demonstração de demonstração nesta camada, ou seja, modificaremos o caminho do arquivo variável introduzido no demo app.tsx, e o método é semelhante.
Camada de componentes: adicione arquivos variáveis, adapte componentes de acordo com as especificações da visão de negócios
1. Adicione arquivos variáveis
Depois de completar a camada de adaptação, precisamos adicionar os arquivos de variáveis e arquivos de fonte necessários no diretório correspondente, podemos copiar diretamente o tema original e modificá-lo para o nome que precisamos, como variables-jmapp.scss. Neste momento, inicie o npm run dev:taro:weapp:jmapp e você verá uma apresentação de demonstração consistente com o tema padrão.
Em seguida, é necessário revisar os valores das variáveis CSS extraídas em valores variáveis na visão de negócios de acordo com a especificação visual fornecida pela parte comercial, como:
// 默认品牌色-京东主题色
$brand-color: var(--nutui-brand-color, #fa2c19) !default;
// 修订后品牌色-京麦主题色
$brand-color: var(--nutui-brand-color, #3768fa) !default;
Use isso para empurrar, verificar e revisar os valores das variáveis um por um. Você verá essa mudança em vigor, do tema Jingdong à direita para o tema Jingmai à esquerda, conforme mostrado na figura:
Exibição de diferença de tema
2. Adaptar os componentes de acordo com as especificações da visão de negócios
Geralmente, haverá alguns métodos de interação especiais no lado comercial e, se esses métodos de interação puderem ser transformados em métodos de interação gerais, é recomendável colocar esses métodos de interação na implementação da biblioteca de componentes, o que significa que a biblioteca de componentes tem foi reforçada a saída da função. E essa também é uma parte que leva muito tempo ao fazer a adaptação de especificações de negócios na biblioteca de componentes.
Por meio de uma cooperação profunda com a equipe Jingmai desta vez, também adicionamos mais de 20 novas funções de componentes e aprimoramos a adaptabilidade da biblioteca de componentes NutUI. Para obter mais detalhes, consulte a NutUI New Demo.
Camada de saída: pacote de personalização de tema de demonstração e negócios
Na camada do componente, iniciamos o script local em execução para exibir uma demonstração de demonstração completa. Por meio da demonstração de demonstração, verificamos rapidamente se a biblioteca de componentes atual atendeu à especificação da visão de negócios. Se for confirmado que a verificação foi totalmente concluída, então estamos prontos para publicar Condições para pacotes de personalização de temas.
Em seguida, só precisamos compilar e publicar o pacote do tema. Entre eles, a parte do script de compilação é semelhante ao lançamento do pacote padrão, e a lógica de configuração refere-se à primeira etapa da camada de adaptação.
Para o processo de publicação, consulte o seguinte. Durante a fase de testes, recomendamos o lançamento de versões beta.
Camada de usuário: pacote personalizado de tema de autenticação
Para verificar o pacote do tema, assim como usar outros pacotes comuns, importamos o pacote, instalamos e executamos, e então podemos ver o efeito de nosso uso.
resumo
Através das operações acima, podemos personalizar o tema para nossa linha de negócios, de uma vez por todas, os membros da equipe não precisam mais fazer uma troca entre o uso da biblioteca de componentes e a personalização do tema.
Não sei se você está emocionado. Se você estiver interessado, tente usar NutUI para completar seu próprio conjunto de pacotes de temas de negócios.