wechat h5 boilerplate
v0.3.6
"Rendez la production H5 aussi simple que la production PPT !"
Wechat-H5-Boilerplate (ci-après dénommé WHB) est un modèle dynamique H5, spécialement optimisé pour WeChat et adapté à la création rapide d'une page promotionnelle H5 à défilement plein écran.
Par exemple, il suffit d’une seule ligne de code pour animer un texte :
<p class="animated" data-ani-name="slideInRight" data-ani-duration="1s" data-ani-delay="0.3s">I'm a coder!</p>
Utilisez votre téléphone portable pour visiter l'adresse ci-dessous ou scannez le code QR ci-dessous
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
Cloner ce projet localement
Exécuter dans la console :
git clone --depth=1 https://github.com/panteng/wechat-h5-boilerplate.git <your-project-name>
cd <your-project-name>
Ou vous pouvez télécharger le package compressé du code source WHB directement à partir de la page Release.
Installer des packages tiers
WHB utilise NPM pour gérer les packages tiers
Exécuter dans la console :
npm install
Remarque 1 : En raison du mauvais environnement réseau en Chine, le téléchargement des packages sur NPM est très lent. Il est recommandé d'utiliser le miroir CNPM de Taobao NPM. Pour la méthode d'installation de CNPM, veuillez vous référer aux instructions du site officiel. CNPM v4.2.0 a un bug sur les systèmes Windows (voir #97). Les utilisateurs de Windows ne devraient pas utiliser cette version. Bien que le responsable ait dit qu'il a été corrigé, j'obtiens toujours une erreur lorsque j'utilise CNPM sur Windows pour installer des packages qui le nécessitent. compilation nœud-gyp. Je ne recommande pas non plus d'utiliser CNPM v3.4.1 car sa version NPM intégrée est trop ancienne. Il est recommandé d'installer npm install --registry=https://registry.npm.taobao.org -d directement à l'aide de l'entrepôt miroir. (-d est ajouté pour afficher des informations détaillées pendant le processus d'installation. Personnellement, j'utilise souvent cette méthode pour déterminer si le processus d'installation est bloqué en raison de problèmes de réseau ou d'autres).
Remarque 2 : Certains packages tiers requis par WHB dépendent de node-gyp Avant d'installer ces packages, veuillez confirmer que node-gyp a été correctement installé sur votre machine. Veuillez vous référer à la documentation officielle de node-gyp pour l'installation. Les utilisateurs de Windows peuvent avoir des problèmes car l'installation de node-gyp sur Windows est pénible.
Remarque 3 : Utilisateurs Windows, veuillez ne pas placer WHB dans un répertoire trop profond dans le chemin. Étant donné que Windows ne prend en charge que les chemins d'une longueur inférieure à 255 caractères, si vous placez ce projet dans un répertoire avec un chemin profond, il est très probable que la compilation de node-gyp échoue.
Remarque 4 : Utilisateurs Windows, si vous avez correctement installé node-gyp, mais que vous obtenez toujours une erreur lors de l'exécution npm install -d et que le message d'erreur est "EPERM, opération non autorisée", veuillez essayer npm install -d --force .
Commencer le développement
Exécuter sur console :
gulp dev
Après un moment, la fenêtre du navigateur s'ouvrira automatiquement et pointera vers l'adresse localhost:3000 . Lorsque vous modifiez un fichier sous app/src, la page du navigateur s'actualisera automatiquement.
Exécuter la tâche gulp prod
Exécuter dans la console :
gulp prod
Cette tâche générera deux nouveaux fichiers bundle.min.css et bundle.min.js dans le dossier app/dist et supprimera les bundle.css et bundle.js d'origine.
Lors de la publication, il vous suffit de télécharger les fichiers du dossier app/dist sur le serveur, aucun autre fichier n'est requis. Les fichiers CSS, JS et image dans app/dist sont compressés et optimisés.
chargement de l'animation
Les pages H5 contiennent généralement beaucoup d'images et de musique de fond, une belle animation de chargement est donc nécessaire.
Vous pouvez écrire vous-même des animations CSS3, insérer le code HTML lié à l'animation dans <div class="loading-overlay"></div> dans app/src/index.html et intégrer le code d'animation CSS3 pertinent dans app/ src/scss.
Si vous souhaitez éviter des ennuis, le site Web chargement.io peut vous aider à générer des animations de chargement prêtes à l'emploi (si vous ne pouvez pas l'ouvrir, veuillez traverser le mur). Il est recommandé de générer un fichier image animée au format SVG, de changer le fichier en chargement.svg et de remplacer le fichier par le même nom sous app/src/images/.
Partagez également quelques excellentes bibliothèques d'animations de chargement CSS3 :
Effet de changement de page
Le changement de page ne prend actuellement en charge que les quatre types fournis avec Swiper : slide, fade, flip et coverflow (cube ne le prend pas en charge car il ne répond pas à ce scénario). Voir la section sur les effets dans la documentation de Swiper pour plus de détails.
WHB n'est pas encore en mesure de spécifier différentes méthodes de commutation pour différentes pages. J'envisagerai d'ajouter cette fonctionnalité et des méthodes de commutation plus intéressantes dans les versions ultérieures.
Animation des éléments (images, texte) au sein de la page
Ajouter une animation aux images et au texte dans WHB est très simple.
Par exemple, il y a un paragraphe de texte sur la première page qui doit être affiché en animation. Le code est le suivant :
<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>
Ajoutez simplement le nom de la classe animated à ce texte et spécifiez les trois attributs data-ani-name (nom de l'animation), data-ani-duration (temps d'exécution de l'animation) et data-ani-delay (temps de retard de l'animation).
L'animation de WHB est fournie par Animate.css. Les noms d'animation pris en charge peuvent être consultés sur le site officiel d'Animate.css.
Icône de police
Il n'y a que deux icônes dans le fichier d'icônes de police fourni avec WHB, à savoir le symbole de musique dans le coin supérieur droit et le symbole d'invite de mouvement vers le haut en bas de l'écran. Si vous avez besoin de plus d'icônes, il est recommandé d'utiliser Icomoon.io pour la personnalisation, de sélectionner les icônes dont vous avez besoin (vous pouvez également les concevoir et de les télécharger vous-même) et de les regrouper dans des fichiers de polices.
La raison pour laquelle il n'est pas recommandé d'utiliser des packages de polices généraux tels que Font-Awesome est qu'il existe de nombreuses icônes dans Font-Awesome, donc le fichier de police sera relativement volumineux et la plupart des icônes ne seront pas utilisées. Des fichiers de polices plus volumineux peuvent ralentir le chargement des pages Web sur les appareils des utilisateurs.
Optimisation des images
WHB est livré avec la fonction de compression avec perte des images sous app/src/images, mais je vous recommande quand même d'effectuer l'optimisation manuelle nécessaire sur les images avant de les jeter dans le dossier app/src/images, comme Ajuster à la taille appropriée, intégrer quelques petites images en sprites, etc.
Partagez quelques sites Web utiles d’optimisation et de traitement d’images :
musique de fond
Il est recommandé que le format de fichier de musique de fond soit mp3 et que sa taille ne dépasse pas 1 Mo. Vous pouvez utiliser un logiciel d'édition audio professionnel tel qu'Adobe Audition pour intercepter et compresser la musique de fond.
Si cela n'est pas nécessaire, veuillez ne pas définir de musique de fond pour déranger les utilisateurs.
Débogage du terminal mobile
Tout d’abord, exécutez la tâche gulp dev et recherchez le paragraphe suivant dans la sortie de la 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
----------------------------------------
Ensuite, assurez-vous que votre appareil mobile (téléphone mobile, tablette, etc.) et votre ordinateur sont sur le même réseau local (le moyen le plus simple est de connecter l'ordinateur, le téléphone mobile et la tablette au même WIFI ; ou l'ordinateur est connecté au routeur. avec un câble réseau, et le téléphone mobile et la tablette sont connectés au même WIFI émis par le routeur).
Enfin, ouvrez le navigateur sur votre appareil mobile et accédez à l'URL correspondant à Externe dans la troisième ligne ci-dessus (notez que votre URL peut être différente de ce que j'ai écrit ci-dessus, veuillez vous référer à l'URL Externe affichée dans votre propre console).
Désormais, tant que vous modifiez le fichier sous app/src, tous les appareils mobiles et ordinateurs qui accèdent à cette URL actualiseront automatiquement la page du navigateur. Les opérations que vous effectuez sur un appareil sont également synchronisées avec les autres appareils en temps réel (comme faire glisser votre doigt vers le haut sur une page).
Conception réactive
Il est recommandé d'utiliser rem au lieu de px pour définir la taille, la marge et la taille de la police des éléments.
Dans WHB, la valeur px correspondant à 1rem changera avec la taille de l'écran de l'appareil.
Sur les appareils dont la largeur d'écran est inférieure à 400 px, 1rem = 16 px ;
Sur les appareils avec une largeur d'écran supérieure à 400 px et inférieure à 600 px, 1rem = 22 px ;
Sur les appareils dont la largeur d'écran est supérieure à 600 px, 1rem = 32 px ;
Consultez le code sur Media Query dans app/src/scss/base/_base.scss.
description de config/vendors.js
Le fichier supplier.js est utilisé pour enregistrer les informations CSS, JS et polices tierces. Tous les fichiers tiers enregistrés dans supplier.js seront ajoutés au projet sous une forme ou une autre. Par exemple : Si le fichier sellers.js ressemble maintenant à ceci :
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/*'
]
};
Tous les fichiers CSS dans les feuilles de style de supplier.js seront ajoutés au bundle.css finalement généré par le projet ;
Tous les fichiers js dans les javascripts de supplier.js seront ajoutés au bundle.js finalement généré par le projet ;
Tous les fichiers des polices de supplier.js seront copiés dans le dossier app/dist/fonts.
N'oubliez pas que les fichiers enregistrés dans supplier.js seront d'abord ajoutés à bundle.css et bundle.js, vous n'avez donc pas à vous soucier de l'écrasement des styles dans SCSS que vous avez écrits ou de constater qu'un objet d'une bibliothèque tierce est introuvable dans la situation définie par main.js. Les fichiers enregistrés dans supplier.js seront ajoutés à bundle.css et bundle.js par ordre d'enregistrement, vous devez donc vous assurer que l'ordre d'enregistrement est correct. Par exemple, jquery.js doit être enregistré avant swiper.jquery.js. , car swiper.jquery .js dépend de jquery.js.
Remarque 1 : le chemin du fichier est relatif à gulpfile.js, et non à supplier.js.
Remarque 2 : Si vous n'aimez pas importer des fichiers JS tiers de cette manière et souhaitez utiliser la méthode d'écriture requise de CommonJS pour les importer, c'est également possible. Par exemple, introduisez jQuery dans app/src/javascripts/main.js de cette manière :
var $ = require('jquery');
Tâches d'avaler
Pendant le processus de développement, si vous constatez que vous avez modifié ou remplacé les images, l'audio, les polices et autres fichiers sous le fichier app/src, mais que la page du navigateur n'a pas changé en conséquence, veuillez réessayer d'exécuter gulp dev dans la console. tâches gulp dev .
MIT
