wechat h5 boilerplate
v0.3.6
"Torne a produção H5 tão fácil quanto a produção PPT!"
Wechat-H5-Boilerplate (doravante denominado WHB) é um modelo dinâmico H5, especialmente otimizado para WeChat e adequado para construir rapidamente uma página promocional H5 de rolagem em tela cheia.
Por exemplo, basta uma linha de código para animar um trecho de texto:
<p class="animated" data-ani-name="slideInRight" data-ani-duration="1s" data-ani-delay="0.3s">I'm a coder!</p>
Use seu celular para visitar o endereço abaixo ou escaneie o código QR abaixo
https://panteng.github.io/wechat-h5-boilerplate/
/app
/dist --> 项目文件的分发版本，所有的文件均由Gulp任务生成，请勿手动修改
/audios --> 从app/src/audios复制而来
/fonts --> 从app/src/fonts和在config/vendors.js中指定的第三方字体复制而来
/images --> 由app/src/images下的图片经Imagemin压缩优化生成
/javascripts --> 由app/src/javascripts下的文件经Browserify打包生成
/stylesheets --> 由app/src/scss下的文件编译生成
index.html --> 由app/src/index.html经Gulp-inject插入bundle.(min.).css和bundle.(min.).js后生成
/src --> 项目的源码，所有文件都可编辑
/audios --> 存放音频、视频文件
/fonts --> 存放字体文件
/images --> 存放图片文件
/javascripts --> JS源文件，经Browserify打包后生成app/dist/javascripts/bundle.js
/scss --> SCSS文件，经过编译后生成app/dist/stylesheets/bundle.css
index.html --> 页面HTML，经过Gulp-inject处理后生成app/dist/index.html
/config
vendors.js --> 第三方CSS、JS、Fonts列表，详见vendors.js说明
.gitignore
gulpfile.js --> Gulp任务
package.json
Clone este projeto localmente
Execute no console:
git clone --depth=1 https://github.com/panteng/wechat-h5-boilerplate.git <your-project-name>
cd <your-project-name>
Ou você pode baixar o pacote compactado de código-fonte WHB diretamente da página Release.
Instale pacotes de terceiros
WHB usa NPM para gerenciar pacotes de terceiros
Execute no console:
npm install
Nota 1: Devido ao ambiente de rede ruim na China, o download de pacotes no NPM é muito lento. Recomenda-se usar o espelho CNPM do Taobao NPM. Para o método de instalação do CNPM, consulte as instruções do site oficial. O CNPM v4.2.0 tem um bug nos sistemas Windows (consulte o item 97). Embora o oficial tenha dito que foi corrigido, ainda recebo um erro quando uso o CNPM no Windows para instalar pacotes que exigem. compilação nó-gyp. Também não recomendo usar o CNPM v3.4.1 porque sua versão integrada do NPM é muito antiga. Recomenda-se instalar npm install --registry=https://registry.npm.taobao.org -d diretamente usando o armazém espelho. (-d é adicionado para exibir informações detalhadas durante o processo de instalação. Pessoalmente, costumo usar esse método para determinar se o processo de instalação está travado devido à rede ou outros problemas).
Nota 2: Alguns pacotes de terceiros exigidos pelo WHB dependem do node-gyp Antes de instalar esses pacotes, confirme se o node-gyp foi instalado corretamente em sua máquina. Consulte a documentação oficial do node-gyp para instalação. Os usuários do Windows podem ter alguns problemas, pois instalar o node-gyp no Windows é uma dor.
Nota 3: Usuários do Windows, não coloquem o WHB em um diretório muito profundo no caminho. Como o Windows suporta apenas caminhos com comprimento inferior a 255 caracteres, se você colocar este projeto em um diretório com um caminho profundo, é muito provável que node-gyp falhe na compilação.
Nota 4: Usuários do Windows, se você instalou o node-gyp corretamente, mas ainda recebe um erro ao executar npm install -d e a mensagem de erro é "EPERM, operação não permitida", tente npm install -d --force .
Iniciar o desenvolvimento
Execute no console:
gulp dev
Depois de um momento, a janela do navegador será aberta automaticamente e apontará para o endereço localhost:3000 . Quando você modifica qualquer arquivo em app/src, a página do navegador será atualizada automaticamente.
Executar tarefa gulp prod
Execute no console:
gulp prod
Esta tarefa irá gerar dois novos arquivos bundle.min.css e bundle.min.js na pasta app/dist e excluir os originais bundle.css e bundle.js.
Ao publicar, você só precisa fazer upload dos arquivos da pasta app/dist para o servidor, nenhum outro arquivo é necessário. Os arquivos CSS, JS e de imagem em app/dist são compactados e otimizados.
carregando animação
As páginas H5 geralmente contêm muitas imagens e música de fundo, portanto, é necessária uma animação de carregamento de boa aparência.
Você mesmo pode escrever algumas animações CSS3, inserir o código HTML relacionado à animação em <div class="loading-overlay"></div> em app/src/index.html e integrar o código de animação CSS3 relevante em app/ src/scss.
Se você quiser evitar problemas, o site loading.io pode ajudá-lo a gerar animações de carregamento prontas (se não conseguir abri-lo, passe pela parede). Recomenda-se gerar um arquivo de imagem animado no formato SVG, alterar o arquivo para loading.svg e substituir o arquivo pelo mesmo nome em app/src/images/.
Compartilhe também algumas excelentes bibliotecas de animação de carregamento CSS3:
Efeito de troca de página
Atualmente, a troca de páginas suporta apenas os quatro tipos que acompanham o Swiper: slide, fade, flip e coverflow (o cube não oferece suporte porque não atende a esse cenário). Consulte a seção sobre efeitos na documentação do Swiper para obter detalhes.
O WHB ainda não é capaz de especificar métodos de comutação diferentes para páginas diferentes. Considerarei adicionar esse recurso e mais métodos de comutação interessantes em versões subsequentes.
Animação de elementos (fotos, texto) dentro da página
Adicionar animação a imagens e texto no WHB é muito fácil.
Por exemplo, há um parágrafo de texto na primeira página que precisa ser exibido em animação. O código é o seguinte:
<div class="swiper-slide slide-1">
<p class="animated" data-ani-name="slideInRight" data-ani-duration="1s" data-ani-delay="0.3s">I'm a coder!</p>
</div>
Basta adicionar o nome da classe animated a este texto e especificar os três atributos data-ani-name (nome da animação), data-ani-duration (tempo de execução da animação) e data-ani-delay (tempo de atraso da animação).
A animação do WHB é fornecida por Animate.css. Os nomes das animações suportadas podem ser visualizados no site oficial do Animate.css.
Ícone de fonte
Existem apenas dois ícones no arquivo de ícone de fonte que vem com o WHB, ou seja, o símbolo da música no canto superior direito e o símbolo do prompt de toque para cima na parte inferior da tela. Se precisar de mais ícones, é recomendável usar Icomoon.io para personalização, selecionar os ícones necessários (você também pode projetá-los e carregá-los) e empacotá-los em arquivos de fonte.
A razão pela qual não é recomendado o uso de pacotes de fontes gerais como Font-Awesome é que há muitos ícones no Font-Awesome, então o arquivo de fontes será relativamente grande e a maioria dos ícones não será usada. Arquivos de fontes maiores podem retardar o carregamento de páginas da web nos dispositivos dos usuários.
Otimização de imagem
WHB vem com a função de compactação com perdas de imagens em app/src/images, mas ainda recomendo que você execute a otimização manual necessária nas imagens antes de jogá-las na pasta app/src/images, como Ajustar para o tamanho apropriado, integrar algumas pequenas imagens em sprites, etc.
Compartilhe alguns sites úteis de otimização e processamento de imagens:
música de fundo
Recomenda-se que o formato do arquivo da música de fundo seja mp3 e o tamanho não exceda 1 MB. Você pode usar um software profissional de edição de áudio, como o Adobe Audition, para interceptar e compactar música de fundo.
Se não for necessário, não defina música de fundo para incomodar os usuários.
Depuração de terminal móvel
Primeiro, execute a tarefa gulp dev e encontre o seguinte parágrafo na saída do console:
[BS] Access URLs:
----------------------------------------
Local: http://localhost:3000
External: http://192.168.187.101:3000
----------------------------------------
UI: http://localhost:3001
UI External: http://192.168.187.101:3001
----------------------------------------
Em seguida, certifique-se de que seu dispositivo móvel (celular, tablet, etc.) e computador estejam na mesma LAN (a maneira mais simples é conectar o computador, celular e tablet ao mesmo WIFI; ou o computador está conectado ao roteador com um cabo de rede, e o celular e o tablet estão conectados ao mesmo WIFI enviado pelo roteador).
Por fim, abra o navegador do seu dispositivo móvel e acesse a URL correspondente a Externa na terceira linha acima (observe que sua URL pode ser diferente da que escrevi acima, consulte a URL Externa exibida em seu próprio console).
Agora, contanto que você modifique o arquivo em app/src, todos os dispositivos móveis e computadores que acessam este URL atualizarão automaticamente a página do navegador. As operações realizadas em um dispositivo também são sincronizadas com os outros dispositivos em tempo real (como deslizar o dedo para cima em uma página).
Design responsivo
Recomenda-se usar rem em vez de px para definir o tamanho, margem e tamanho da fonte dos elementos.
No WHB, o valor de px correspondente a 1rem mudará com o tamanho da tela do dispositivo.
Em dispositivos com largura de tela inferior a 400px, 1rem = 16px;
Em dispositivos com largura de tela maior que 400px e menor que 600px, 1rem = 22px;
Em dispositivos com largura de tela superior a 600px, 1rem = 32px;
Veja o código sobre Media Query em app/src/scss/base/_base.scss.
descrição de config/vendors.js
O arquivo vendors.js é usado para registrar informações CSS, JS e fontes de terceiros. Todos os arquivos de terceiros registrados em vendors.js serão adicionados ao projeto de alguma forma. Por exemplo: Se vendors.js agora estiver assim:
module.exports = {
stylesheets: [
'node_modules/normalize.css/normalize.css',
'node_modules/swiper/dist/css/swiper.css',
'node_modules/animate.css/animate.css',
'node_modules/font-awesome/css/font-awesome.css'
],
javascripts: [
'node_modules/jquery/dist/jquery.js'，
'node_modules/swiper/dist/js/swiper.jquery.js'
],
fonts: [
'node_modules/font-awesome/fonts/*'
]
};
Todos os arquivos css nas folhas de estilo de vendors.js serão adicionados ao bundle.css finalmente gerado pelo projeto;
Todos os arquivos js nos javascripts de vendors.js serão adicionados ao bundle.js finalmente gerado pelo projeto;
Todos os arquivos nas fontes de vendors.js serão copiados para a pasta app/dist/fonts.
Lembre-se de que os arquivos registrados em vendors.js serão adicionados primeiro a bundle.css e bundle.js, então você não precisa se preocupar com a substituição dos estilos no SCSS que você escreveu ou com a descoberta de que um objeto de uma biblioteca de terceiros é não encontrado na situação definida em main.js. Os arquivos registrados em vendors.js serão adicionados a bundle.css e bundle.js na ordem de registro, portanto você deve garantir que a ordem de registro esteja correta. Por exemplo, jquery.js deve ser registrado antes de swiper.jquery.js. , porque swiper.jquery .js depende de jquery.js.
Nota 1: O caminho do arquivo é relativo a gulpfile.js, não a vendors.js.
Nota 2: Se você não gosta de importar arquivos JS de terceiros dessa forma e deseja usar o método de escrita require do CommonJS para importá-los, isso também é possível. Por exemplo, introduza jQuery em app/src/javascripts/main.js desta forma:
var $ = require('jquery');
Tarefas de gole
Durante o processo de desenvolvimento, se você descobrir que modificou ou substituiu as imagens, áudio, fontes e outros arquivos no arquivo app/src, mas a página no navegador não mudou de acordo, tente executar gulp dev novamente no console tarefas gulp dev .
MIT
