WeApp Workflow
1.0.0
WeApp-Workflow : workflow de développement frontal d'applets WeChat basé sur Gulp
WeApp-Workflow est un workflow de développement front-end spécialement créé pour le développement de mini-programmes WeChat. Il est développé sur la base de Gulp 4 et vise à résoudre les problèmes liés à l'écriture de code front-end dans le processus de développement de mini-programmes WeChat via un workflow. .
Page d'accueil du projet : https://github.com/Jeff2Ma/WeApp-Workflow
Introduction de l'article : https://devework.com/weapp-workflow.html
Utilisez le préprocesseur Sass pour rendre l'écriture CSS plus fluide. Le fichier .scss sera compilé en temps réel en un fichier .wxss pris en charge par l'applet WeChat.
En utilisant l'iPhone 6 officiellement recommandé comme format de conception standard, vous pouvez le convertir automatiquement en rpx en écrivant px directement pendant le développement.
// 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`单位则不会转换 */
}Compressez les images en temps réel et utilisez des méthodes incrémentielles pour éviter une compression répétée.
L'applet ne prend pas en charge les références d'image avec des chemins relatifs, mais uniquement les chemins absolus avec en-têtes de protocole https . Ce flux de travail peut télécharger les images de chemin relatif référencées dans les fichiers WXML et WXSS vers le CDN de stockage cloud ou les télécharger sur l'espace serveur personnel via le protocole FTP/SFTP. Prend actuellement en charge Tencent Cloud et 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 >L'applet ne prend pas en charge les fichiers de polices avec des chemins relatifs. Ce workflow peut transcoder les fichiers de polices référencés en CSS en base64 et remplacer les chemins d'origine.
// 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");
}
Cette fonctionnalité est pilotée par le plug-in postcss-lazysprite. Après avoir préparé l'image pendant le développement, écrivez simplement un code comme @lazysprite "xxxx" pour construire automatiquement l'image du sprite et générer le CSS correspondant.
// 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 ;
}
}Utilisez les nouvelles fonctionnalités de la dernière version de Gulp 4 pour accélérer votre flux de travail.
Le noyau n'a qu'une seule tâche par défaut. Le mécanisme raisonnable de correspondance des tâches réduit les processus fastidieux et les allers-retours du terminal, rendant le développement plus pratique.
Présentation de la compilation incrémentielle de Sass et du mécanisme de mise à jour incrémentielle des tâches liées aux images pour accélérer l'exécution du flux de travail.
.
├── 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 目录编译后生成的文件目录，也是小程序开发的项目目录
Il est recommandé que la version de Node soit v4 ou supérieure. Ce flux de travail impliquant des dépendances tierces, il est recommandé de fonctionner dans un environnement Internet scientifique.
0. Veuillez d'abord suivre Gulp-cli globalement.
npm install gulp-cli -g
1. Téléchargez le fichier du projet via git clone .
git clone https://github.com/Jeff2Ma/WeApp-Workflow
2. Il est recommandé de supprimer le répertoire .git (les utilisateurs Windows doivent le supprimer manuellement)
cd WeApp-Workflow
rm -rf .git
3. Installez les modules nécessaires
npm i
4. Commencer le développement
Il est recommandé de copier config.js et de le renommer en config.custom.js , puis de réécrire les informations de configuration pertinentes en fonction de vos besoins réels (chaque élément de configuration comporte un commentaire). Ensuite, exécutez la commande suivante dans le terminal pour l'activer :
gulp
Tâches restantes : gulp clean : effacer les dossiers dist , tmp .
Après avoir effectué les opérations ci-dessus, vous devez effectuer les réglages appropriés dans les « Outils de développement Web WeChat » (basés sur la v1.x et n'est plus compatible avec la v0.x).
1. Créez un nouveau projet et sélectionnez directement l'intégralité du répertoire du projet, c'est-à-dire le répertoire où se trouve project.config.json , comme répertoire du projet.
Ensuite, vous pouvez entrer dans un développement régulier. Pendant le processus de développement, utilisez un éditeur tiers (WebStorm, Sublime Text, etc.) pour éditer les fichiers dans le répertoire src . Après avoir enregistré les modifications, le processus gulp les compilera en temps réel à l'emplacement correspondant dist annuaire. L'outil de développement Web WeChat sera automatiquement compilé et actualisé, et ne sert pour le moment que de fonction de prévisualisation .
Points clés du développement :
Développement SCSS : Modifiez page-name.scss directement sous src/pages/page-name , il sera automatiquement converti en page-name.wxss et placé à l'emplacement correspondant du répertoire dist . Pendant le processus de développement, où des valeurs numériques sont impliquées, écrivez directement les unités px (selon l'iPhone6 comme projet de conception standard), et elles seront automatiquement calculées et converties en unités rpx . Si vous ne souhaitez pas effectuer de conversion dans des circonstances particulières, veuillez écrire PX en lettres majuscules.
Développement WXML : Il n'y a pas d'exigence particulière sauf que la fonction image CDN nécessite l'écriture d'un chemin d'image spécial.
WebFont : créez d'abord une image de sprite sur un site Web comme fontell.com, puis récupérez le fichier au format ttf dans src/assets/fonts . Ensuite, il peut être automatiquement transcodé en base64 en le citant de la manière normale.
Images CDN : (Cette fonction est désactivée par défaut et doit être activée dans les paramètres.) wxss ou wxml dans l'applet WeChat ne prend pas en charge les images avec des chemins relatifs et nécessite un chemin absolu commençant par https. Ce workflow vous permet d'écrire des chemins relatifs directement pendant le développement, et le workflow vous aidera à télécharger sur CDN et à remplacer le chemin d'origine. Ces images doivent être placées sous src/assets/images , puis écrire le chemin en wxml ou CSS en utilisant %ASSETS_IMG%/filename.png . %ASSETS_IMG% est un répertoire personnalisé pour le remplacement ultérieur de chaînes.
Images de sprite : Tout d'abord, il n'est pas recommandé d'utiliser des images de sprite dans de petits programmes. Il est préférable d'utiliser des images uniques ou directement WebFont. Si vous devez l'utiliser, suivez l'exemple de petit programme dans le code pour placer le répertoire des petites images sous src/assets/sprites , puis appelez-le via @lazysprite "xxxx" dans SCSS (il est recommandé de mettre le code appelant sous app.scss ). Pour une utilisation avancée des images de sprites, veuillez cliquer ici.
Q : Pourquoi n'y a-t-il pas de fonction AutoPrefixer dans le flux de travail ?
R : Parce que l'option « Achèvement du style » dans le « Projet » des outils de développement WeChat fournit déjà cette fonction ;
Q : Pourquoi n'y a-t-il pas de fonction de conversion ES6 vers ES5 de babel configurée dans le flux de travail ?
R : Comme ci-dessus, des outils de développement WeChat ont été fournis.
Q : Quels sont les avantages par rapport aux petits frameworks de développement de programmes tels que WePY ?
R : WePY développé par l'équipe de paiement WeChat est en effet un bon outil. Par rapport à WePY au même niveau, WeApp-Workflow n'a aucun avantage. WeApp-Workflow est un outil de workflow, pas un framework de développement. Il se concentre sur le développement de CSS dans de petits programmes. Pour certains développeurs, leurs petits programmes n'ont pas besoin d'un framework de développement aussi lourd que WePY.
Q : WeApp-Workflow n'a pas de tâches de compilation spéciales correspondantes (similaires à gulp build , npm run build ) ?
R : Oui, car WeApp-Workflow est adapté au développement de « petits » petits programmes plutôt que de petits programmes complexes. Par conséquent, compte tenu de la vitesse de développement, de la quantité de code, etc., il n'y a pas d'étape de développement particulière ni une seule tâche (développement). Une tâche de compilation supplémentaire (buid) est ajoutée lors de la phase de réalisation. Juste une tâche.
Ces petits programmes utilisent WeApp-Workflow comme workflow de développement (vous pouvez envoyer des PR pour ajouter des cas) :
flux de travail tmt
QMUI_Web
postcss-lazysprite
gulp-qcloud-upload
Ajouter des tests unitaires
Réécriture ES6
Fonction de téléchargement vers le serveur FTP/SFTP
CDN prenant en charge le stockage cloud Qiniu
Si vous avez des commentaires ou des suggestions de fonctionnalités, vous êtes invités à créer un problème ou à envoyer une demande de tirage. Merci pour votre soutien et votre contribution.
