wechat h5 boilerplate
v0.3.6
"¡Haz que la producción de H5 sea tan fácil como la producción de PPT!"
Wechat-H5-Boilerplate (en adelante, WHB) es una plantilla dinámica H5, especialmente optimizada para WeChat y adecuada para crear rápidamente una página promocional H5 con desplazamiento en pantalla completa.
Por ejemplo, solo se necesita una línea de código para animar un fragmento de texto:
<p class="animated" data-ani-name="slideInRight" data-ani-duration="1s" data-ani-delay="0.3s">I'm a coder!</p>
Utilice su teléfono móvil para visitar la dirección a continuación o escanee el código QR a continuación
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
Clonar este proyecto localmente
Ejecutar en consola:
git clone --depth=1 https://github.com/panteng/wechat-h5-boilerplate.git <your-project-name>
cd <your-project-name>
O puede descargar el paquete comprimido del código fuente de WHB directamente desde la página de lanzamiento.
Instalar paquetes de terceros
WHB usa NPM para administrar paquetes de terceros
Ejecutar en consola:
npm install
Nota 1: Debido al deficiente entorno de red en China, la descarga de paquetes en NPM es muy lenta. Se recomienda utilizar el espejo CNPM de Taobao NPM. Para conocer el método de instalación de CNPM, consulte las instrucciones del sitio web oficial. CNPM v4.2.0 tiene un error en los sistemas Windows (consulte el n.° 97). Los usuarios de Windows no deberían usar esta versión. Aunque el funcionario dijo que se ha solucionado, sigo recibiendo un error cuando uso CNPM en Windows para instalar paquetes que lo requieren. compilación nodo-gyp. Tampoco recomiendo usar CNPM v3.4.1 porque su versión NPM incorporada es demasiado antigua. Se recomienda instalar npm install --registry=https://registry.npm.taobao.org -d directamente utilizando el almacén espejo. (Se agrega -d para mostrar información detallada durante el proceso de instalación. Personalmente, suelo utilizar este método para determinar si el proceso de instalación se bloquea debido a problemas de red u otros problemas).
Nota 2: Algunos paquetes de terceros requeridos por WHB dependen de node-gyp. Antes de instalar estos paquetes, confirme que node-gyp se haya instalado correctamente en su máquina. Consulte la documentación oficial de node-gyp para la instalación. Los usuarios de Windows pueden tener algunos problemas ya que instalar node-gyp en Windows es complicado.
Nota 3: usuarios de Windows, no coloquen WHB en un directorio demasiado profundo en la ruta. Debido a que Windows solo admite rutas con una longitud inferior a 255 caracteres, si coloca este proyecto en un directorio con una ruta profunda, es muy probable que node-gyp no se pueda compilar.
Nota 4: Usuarios de Windows, si instalaron correctamente node-gyp, pero aún reciben un error al ejecutar npm install -d y el mensaje de error es "EPERM, operación no permitida", intenten npm install -d --force .
Iniciar desarrollo
Ejecutar en consola:
gulp dev
Después de un momento, la ventana del navegador se abrirá automáticamente y apuntará a la dirección localhost:3000 . Cuando modifique cualquier archivo en app/src, la página del navegador se actualizará automáticamente.
Ejecutar tarea de trago
Ejecutar en consola:
gulp prod
Esta tarea generará dos archivos nuevos Bundle.min.css y Bundle.min.js en la carpeta app/dist y eliminará los archivos originales Bundle.css y Bundle.js.
Al publicar, solo necesita cargar los archivos en la carpeta app/dist al servidor, no se requieren otros archivos. Los archivos CSS, JS y de imagen en app/dist están comprimidos y optimizados.
cargando animacion
Las páginas H5 suelen contener muchas imágenes y música de fondo, por lo que es necesaria una animación de carga atractiva.
Puede escribir algunas animaciones CSS3 usted mismo, insertar el código HTML relacionado con la animación en <div class="loading-overlay"></div> en app/src/index.html e integrar el código de animación CSS3 relevante en app/ src/scss.
Si desea evitar problemas, el sitio web loading.io puede ayudarlo a generar animaciones de carga listas para usar (si no puede abrirlo, atraviese la pared). Se recomienda generar un archivo de imagen animada en formato SVG, cambiar el archivo a cargando.svg y reemplazar el archivo con el mismo nombre en app/src/images/.
Comparta también algunas excelentes bibliotecas de animación de carga de CSS3:
Efecto de cambio de página
Actualmente, el cambio de página solo admite los cuatro tipos que vienen con Swiper: deslizar, desvanecer, voltear y cubrir (cube no lo admite porque no cumple con este escenario). Consulte la sección sobre efectos en la documentación de Swiper para obtener más detalles.
WHB aún no puede especificar diferentes métodos de cambio para diferentes páginas. Consideraré agregar esta función y más métodos de cambio interesantes en versiones posteriores.
Animación de elementos (imágenes, texto) dentro de la página.
Agregar animación a imágenes y texto en WHB es muy fácil.
Por ejemplo, hay un párrafo de texto en la primera página que debe mostrarse en animación. El código es el siguiente:
<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>
Simplemente agregue el nombre de la clase animated a este texto y especifique los tres atributos data-ani-name (nombre de la animación), data-ani-duration (tiempo de ejecución de la animación) y data-ani-delay (tiempo de retraso de la animación).
La animación de WHB es proporcionada por Animate.css. Los nombres de las animaciones admitidas se pueden ver en el sitio web oficial de Animate.css.
Icono de fuente
Solo hay dos íconos en el archivo de íconos de fuente que viene con WHB, a saber, el símbolo de música en la esquina superior derecha y el símbolo de trazo ascendente en la parte inferior de la pantalla. Si necesita más íconos, se recomienda utilizar Icomoon.io para personalizarlos, seleccionar los íconos que necesita (también puede diseñarlos y cargarlos usted mismo) y empaquetarlos en archivos de fuentes.
La razón por la que no se recomienda utilizar paquetes de fuentes generales como Font-Awesome es que hay muchos iconos en Font-Awesome, por lo que el archivo de fuente será relativamente grande y la mayoría de los iconos no se utilizarán. Los archivos de fuentes más grandes pueden ralentizar la carga de páginas web en los dispositivos de los usuarios.
Optimización de imagen
WHB viene con la función de compresión con pérdida de imágenes en app/src/images, pero aún así recomiendo que realice la optimización manual necesaria en las imágenes antes de colocarlas en la carpeta app/src/images, como Ajustar al tamaño apropiado, integrar algunas imágenes pequeñas en sprites, etc.
Comparta algunos sitios web útiles de optimización y procesamiento de imágenes:
música de fondo
Se recomienda que el formato de archivo de la música de fondo sea mp3 y el tamaño no supere 1 MB. Puede utilizar un software de edición de audio profesional como Adobe Audition para interceptar y comprimir la música de fondo.
Si no es necesario, no establezca música de fondo para molestar a los usuarios.
Depuración de terminales móviles
Primero, ejecute la tarea gulp dev y busque el siguiente párrafo en la salida de la consola:
[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
----------------------------------------
Luego, asegúrese de que su dispositivo móvil (teléfono móvil, tableta, etc.) y computadora estén en la misma LAN (la forma más sencilla es conectar la computadora, teléfono móvil y tableta al mismo WIFI; o la computadora está conectada al enrutador). con un cable de red, y el teléfono móvil y la tableta están conectados al mismo WIFI emitido por el enrutador).
Finalmente, abra el navegador en su dispositivo móvil y acceda a la URL correspondiente a Externa en la tercera línea de arriba (tenga en cuenta que su URL puede ser diferente de la que escribí anteriormente; consulte la URL externa que se muestra en su propia consola).
Ahora, siempre que modifique el archivo en app/src, todos los dispositivos móviles y computadoras que accedan a esta URL actualizarán automáticamente la página del navegador. Las operaciones que realiza en un dispositivo también se sincronizan con los otros dispositivos en tiempo real (como deslizar el dedo hacia arriba en una página).
Diseño responsivo
Se recomienda utilizar rem en lugar de px para establecer el tamaño, el margen y el tamaño de fuente de los elementos.
En WHB, el valor de px correspondiente a 1rem cambiará con el tamaño de la pantalla del dispositivo.
En dispositivos con un ancho de pantalla inferior a 400 px, 1rem = 16 px;
En dispositivos con un ancho de pantalla superior a 400 px y inferior a 600 px, 1rem = 22 px;
En dispositivos con un ancho de pantalla superior a 600 px, 1 rem = 32 px;
Consulte el código sobre Media Query en app/src/scss/base/_base.scss.
Descripción de config/vendors.js
El archivo proveedores.js se utiliza para registrar información CSS, JS y fuentes de terceros. Todos los archivos de terceros registrados en proveedores.js se agregarán al proyecto de alguna forma. Por ejemplo: si proveedores.js ahora tiene este aspecto:
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 los archivos CSS en las hojas de estilo de proveedores.js se agregarán al paquete.css finalmente generado por el proyecto;
Todos los archivos js en los javascripts de proveedores.js se agregarán al paquete.js finalmente generado por el proyecto;
Todos los archivos de las fuentes de sellers.js se copiarán a la carpeta app/dist/fonts.
Recuerde que los archivos registrados en proveedores.js se agregarán primero a Bundle.css y Bundle.js, por lo que no necesita preocuparse de que los estilos en SCSS que escribió se sobrescriban o de que un objeto de una biblioteca de terceros se sobrescriba. no encontrado en la situación definida de main.js. Los archivos registrados en sellers.js se agregarán a Bundle.css y Bundle.js en orden de registro, por lo que debe asegurarse de que el orden de registro sea correcto. Por ejemplo, jquery.js debe registrarse antes que swiper.jquery.js. , porque swiper.jquery .js depende de jquery.js.
Nota 1: La ruta del archivo es relativa a gulpfile.js, no a proveedores.js.
Nota 2: Si no le gusta importar archivos JS de terceros de esta manera y desea utilizar el método de escritura requerida de CommonJS para importarlos, también es posible. Por ejemplo, introduzca jQuery en app/src/javascripts/main.js de esta manera:
var $ = require('jquery');
Tareas de trago
Durante el proceso de desarrollo, si descubre que ha modificado o reemplazado las imágenes, el audio, las fuentes y otros archivos en el archivo app/src, pero la página en el navegador no ha cambiado en consecuencia, intente ejecutar gulp dev nuevamente en la consola. tareas gulp dev .
MIT
