WeApp Workflow
1.0.0
WeApp-Workflow: fluxo de trabalho de desenvolvimento de front-end de miniaplicativo WeChat baseado em Gulp
WeApp-Workflow é um fluxo de trabalho de desenvolvimento front-end criado especialmente para o desenvolvimento de miniprogramas WeChat. Ele é desenvolvido com base no Gulp 4 e tem como objetivo resolver os problemas de escrita de código front-end no processo de desenvolvimento de miniprogramas WeChat por meio de fluxo de trabalho. .
Página inicial do projeto: https://github.com/Jeff2Ma/WeApp-Workflow
Introdução do artigo: https://devework.com/weapp-workflow.html
Use o pré-processador Sass para tornar a escrita CSS mais suave. O arquivo .scss será compilado em tempo real em um arquivo .wxss suportado pelo miniaplicativo WeChat.
Usando o iPhone 6 oficialmente recomendado como formato de design padrão, você pode convertê-lo automaticamente para rpx escrevendo px diretamente durante o desenvolvimento.
// Input: src/pages/index/index.scss
. index__header {
font-size : 14 px ;
margin-top : 20 PX ; /* 如果为大写的`PX`单位则不会转换 */
}
// Output: dist/pages/index/index.wxss
. index__header {
font-size : 28 rpx ;
margin-top : 20 PX ; /* 如果为大写的`PX`单位则不会转换 */
}Comprima imagens em tempo real e use métodos incrementais para evitar compactação repetida.
O miniaplicativo não suporta referências de imagem com caminhos relativos, mas apenas caminhos absolutos com cabeçalhos de protocolo https . Este fluxo de trabalho pode fazer upload das imagens de caminho relativo referenciadas em arquivos WXML e WXSS para CDN de armazenamento em nuvem ou carregá-las para o espaço do servidor pessoal por meio do protocolo FTP/SFTP. Atualmente oferece suporte a Tencent Cloud e Qiniu Cloud.
// Input: src/pages/index/index.wxml
< image src =" %ASSETS_IMG%/t.png " > </ image >
// Output: dist/pages/index/index.wxml
< image src =" https://cdn.devework.com/weapp/devework/t.png " > </ image >O miniaplicativo não oferece suporte a arquivos de fontes com caminhos relativos. Este fluxo de trabalho pode transcodificar os arquivos de fontes referenciados em CSS em base64 e substituir os caminhos originais.
// Input: src/pages/index/index.scss
@font-face {
font-family: 'fontello';
src: url("assets/fonts/fontello.ttf") format('truetype');
}
// Output: dist/pages/index/index.wxss
@font-face {
font-family: 'fontello';
src: url(data:application/font-sfnt;charset=utf-8;base64,AAEAAAAPAIAA....FsASNsQIARAAA) format("truetype");
}
Este recurso é impulsionado pelo plug-in postcss-lazysprite. Após preparar a imagem durante o desenvolvimento, basta escrever um código como @lazysprite "xxxx" para construir automaticamente a imagem sprite e gerar o CSS correspondente.
// Input: src/app.scss
@lazysprite "filetype" ;
/ / Output : d is t / app. wxss
. icon-filetype-doc {
background-image : url(.. / sprites/filetype.png);
background-position : 0 0 ;
width : 80 px ;
height : 80 px ;
}
. icon-filetype-pdf {
background-image : url(.. / sprites/filetype.png);
background-position : -90 px 0 ;
width : 80 px ;
height : 80 px ;
}
@media only screen and ( -webkit-min-device-pixel-ratio : 2 ) , only screen and ( min-device-pixel-ratio : 2 ) {
. icon-filetype-doc {
background-image : url (.. / sprites / filetype@ 2 x.png);
background-position : 0 0 ;
background-size : 170 px 170 px ;
}
. icon-filetype-pdf {
background-image : url (.. / sprites / filetype@ 2 x.png);
background-position : -90 px 0 ;
background-size : 170 px 170 px ;
}
}Use os novos recursos da versão mais recente do Gulp 4 para acelerar seu fluxo de trabalho.
O núcleo tem apenas uma tarefa padrão. O mecanismo razoável de correspondência de tarefas reduz processos complicados e idas e vindas do terminal, tornando o desenvolvimento mais conveniente.
Apresentando a compilação incremental do Sass e o mecanismo de atualização incremental de tarefas relacionadas a imagens para tornar o fluxo de trabalho mais rápido.
.
├── config.custom.js // gulp自定义配置，会覆盖config.js
├── config.js // gulp 配置文件
├── gulpfile.js
├── package.json
├── src // 开发目录
│ ├── app.js
│ ├── app.json
│ ├── app.scss
│ ├── assets // 开发相关的静态文件原始资源
│ │ ├── fonts //字体文件
│ │ ├── images // 图片文件，可被上传到CDN
│ │ ├── scss // 一般放置SCSS 的minxins 等被import 的SCSS 文件
│ │ └── sprites // 生成雪碧图小图的目录
│ ├── image // 小程序专用的图片资源（如tabbar icon）目录
│ ├── pages
│ └── utils
├── tmp // 通过src 目录编译后生成的缓存目录
└── dist // 通过src 目录编译后生成的文件目录，也是小程序开发的项目目录
A versão do Node é recomendada como v4 ou superior. Como esse fluxo de trabalho envolve dependências de terceiros, é recomendável operar em um ambiente científico de Internet.
0. Siga o Gulp-cli globalmente primeiro.
npm install gulp-cli -g
1. Baixe o arquivo do projeto através de git clone .
git clone https://github.com/Jeff2Ma/WeApp-Workflow
2. Recomenda-se excluir o diretório .git (usuários do Windows, excluam-no manualmente)
cd WeApp-Workflow
rm -rf .git
3. Instale os módulos necessários
npm i
4. Comece o desenvolvimento
Recomenda-se copiar config.js e renomeá-lo para config.custom.js e, em seguida, reescrever as informações de configuração relevantes de acordo com suas necessidades reais (cada item de configuração tem um comentário). Em seguida, execute o seguinte comando no terminal para habilitá-lo:
gulp
Tarefas restantes: gulp clean : limpar dist , pastas tmp .
Depois de concluir as operações acima, você precisa fazer as configurações relevantes nas "Ferramentas de desenvolvedor da Web WeChat" (com base na v1.x e não é mais compatível com a v0.x).
1. Crie um novo projeto e selecione diretamente todo o diretório do projeto, ou seja, o diretório onde project.config.json está localizado, como o diretório do projeto.
Em seguida, você pode entrar no desenvolvimento regular. Durante o processo de desenvolvimento, use um editor de terceiros (WebStorm, Sublime Text, etc.) para editar os arquivos no diretório src . Após salvar as modificações, o processo gulp irá compilá-los em tempo real no local correspondente dist diretório. A ferramenta de desenvolvedor web WeChat será compilada e atualizada automaticamente e, no momento, serve apenas como uma função de visualização .
Pontos-chave do desenvolvimento:
Desenvolvimento SCSS : Edite page-name.scss diretamente em src/pages/page-name , ele será automaticamente convertido em page-name.wxss e colocado no local correspondente do diretório dist . Durante o processo de desenvolvimento, onde estão envolvidos valores numéricos, escreva diretamente as unidades px (de acordo com o iPhone6 como rascunho de design padrão), e elas serão automaticamente calculadas e convertidas em unidades rpx . Se você não deseja converter em circunstâncias especiais, escreva PX em letras maiúsculas.
Desenvolvimento WXML : Não há requisitos especiais, exceto que a função de imagem CDN requer a gravação de um caminho de imagem especial.
WebFont : Primeiro crie uma imagem sprite em um site como fontell.com e depois obtenha o arquivo no formato ttf para src/assets/fonts . Em seguida, ele pode ser transcodificado automaticamente em base64, citando-o da maneira normal.
Imagens CDN : (Esta função está desativada por padrão e precisa ser ativada nas configurações.) wxss ou wxml no miniaplicativo WeChat não oferece suporte a imagens com caminhos relativos e requer um caminho absoluto começando com https. Este fluxo de trabalho permite que você escreva caminhos relativos diretamente durante o desenvolvimento, e o fluxo de trabalho ajudará a fazer upload para CDN e substituir o caminho original. Essas imagens devem ser colocadas em src/assets/images e, em seguida, escrever o caminho em wxml ou CSS usando %ASSETS_IMG%/filename.png . %ASSETS_IMG% é um diretório customizado para substituição subsequente de strings.
Imagens Sprite : Em primeiro lugar, não é recomendado usar imagens Sprite em programas pequenos. É melhor usar imagens individuais ou WebFont diretamente. Se você precisar usá-lo, siga o exemplo do programa pequeno no código para colocar o diretório de imagens pequenas em src/assets/sprites e então chame-o através de @lazysprite "xxxx" no SCSS (é recomendado colocar o código de chamada em app.scss ). Para uso avançado de imagens sprite, clique aqui.
P: Por que não há função AutoPrefixer no fluxo de trabalho?
R: Porque a opção "Style Completion" no "Project" das WeChat Developer Tools já fornece esta função;
P: Por que não há função de conversão ES6 para ES5 do babel configurada no fluxo de trabalho?
R: Como acima, foram fornecidas ferramentas de desenvolvedor WeChat.
P: Quais são as vantagens em comparação com estruturas de desenvolvimento de pequenos programas, como o WePY?
R: O WePY desenvolvido pela equipe de pagamentos do WeChat é realmente uma boa ferramenta. Se comparado ao WePY no mesmo nível, o WeApp-Workflow não tem nenhuma vantagem. WeApp-Workflow é uma ferramenta de fluxo de trabalho, não uma estrutura de desenvolvimento. Ele se concentra no desenvolvimento de CSS em pequenos programas. Para alguns desenvolvedores, seus pequenos programas não precisam de uma estrutura de desenvolvimento tão pesada quanto o WePY.
P: O WeApp-Workflow não possui tarefas especiais de compilação correspondentes (semelhantes a gulp build , npm run build )?
R: Sim, porque o WeApp-Workflow é adequado para desenvolver programas pequenos "pequenos" em vez de programas pequenos e complexos. Portanto, considerando a velocidade de desenvolvimento, quantidade de código, etc., não há estágio de desenvolvimento especial e uma tarefa (desenvolvimento). Uma tarefa de compilação adicional (buid) é adicionada durante a fase de conclusão. Apenas uma tarefa.
Esses pequenos programas usam WeApp-Workflow como fluxo de trabalho de desenvolvimento (você pode enviar PR para adicionar casos):
fluxo de trabalho tmt
QMUI_Web
postcss-lazysprite
gulp-qcloud-upload
Adicionar testes unitários
Reescrita ES6
Função de upload para servidor FTP/SFTP
CDN com suporte para armazenamento em nuvem Qiniu
Se você tiver comentários ou sugestões de recursos, fique à vontade para criar um problema ou enviar uma solicitação pull. Obrigado por seu apoio e contribuição.
