miniprogram template

modèle de miniprogramme

Un projet de modèle de miniprogramme WeChat est la meilleure pratique avec TypeScript et VSCode

[Meilleures pratiques pour les modèles de mini-programmes (TypeScript+VSCode), créés à l'aide de l'outil miniprogram-build]

---

Obligatoire [environnement requis]

• nodejs : npm >= 6.0 (ou yarn ) Node >= 10
• Editeur : VSCode
• Wechat-Devtools : mini outil de développement de programme (et服务端口ouvert)

Démarrage rapide [Utilisation]

1. créer un projet [Créer un nouveau projet en un clic]

Cliquez sur Utiliser ce modèle pour utiliser ce modèle en un seul clic, ou utilisez la ligne de commande :

 # 不指定`[本地目录]`则在当前目录创建,`-n`表示使用最新模板
npm create miniprogram NewFuture/miniprogram-template -n [本地目录]
# 或者
# yarn create miniprogram NewFuture/miniprogram-template -n [本地目录]

2. démarrer [exécuter sous le fichier de projet]

 # cd [本地目录名]
npm start
# 或者
# yarn start

Après un démarrage normal, l'outil de débogage ouvrira automatiquement l'aperçu dist .

Script [commande]

npm peut être remplacé par yarn

• npm start : Recompilez le projet et mettez-le à jour en temps réel [alias npm run start ]
  • npm run start:test : Utiliser le fichier de configuration de l'environnement de test pour le développement
  • npm run start:prod : utiliser le fichier de configuration de l'environnement de construction pour le développement
• npm run upload : emballez et téléchargez le projet en arrière-plan du mini-programme (configuration de l'environnement de développement)
  • npm run upload:test : utilisez la configuration de l'environnement de test pour empaqueter et télécharger le projet en arrière-plan du mini-programme
  • npm run upload:prod : utilisez la configuration de l'environnement de construction pour empaqueter et télécharger le projet en arrière-plan du mini-programme
• npm run build : reconditionner et compiler (configuration de l'environnement de développement)
  • npm run build:test : reconditionner et compiler
  • npm run build:prod : reconditionner et compiler
• npm test : test [alias npm run test ]
• npm run check : vérification du style de code et du format (prend en charge les vérifications lint distinctes dans différentes langues)
• npm run fix : Résoudre automatiquement les problèmes de charpie et de style de code réparables
• npm run help : Afficher l'utilisation détaillée de l'outil de compilation mp

Toutes les commandes de raccourci package.json

Environnement multiple [Paramètres d'environnement multiples]

Chaque environnement peut être configuré différemment (la configuration de l'environnement peut être augmentée ou réduite selon les besoins)

• Environnement intégré de développement .mpconfig.jsonc
• configuration de l'environnement de test env/test.jsonc
• env/prod.jsonc configuration de l'environnement de production en ligne

S'il n'y a qu'un seul environnement, vous pouvez supprimer le répertoire env et le configurer directement à l'aide de .mpconfig.jsonc

Codage [codage]

Langages [langages de programmation]

js

• .ts (TypeScript) ou .js (JavaScript) ( ts recommandé )
• Eslint + Prettier vérifie le style de code et le formatage automatique
• TS prend en charge / importation de formulaire de chemin absolu

wxml

• .wxml ou .html
• Htmlhit + Prettier vérifie le style du code et le formatage automatique
• Utilisez vscode-minapp pour la vérification et le formatage du code

wxss

• .scss , .sass ou .css ( scss recommandé)
• Stylelint + Prettier vérifie le style du code et le formatage automatique
• Trier automatiquement les propriétés CSS dans un ordre spécifié
• scss peut directement @import le contenu du répertoire des actifs

json

• Annotations .jsonc , .json ou .json5 prises en charge
• Inspection de code plus jolie et formatage automatique

wxs

• .wxts (TypeScript), .wxs (JavaScript) ( wxts recommandé)
• Inspection de code plus jolie et formatage automatique
• miniprogram-wxs effectue la vérification et la qualification du type

Editeur [éditeur]

Utilisez VSCode et installez automatiquement les plug-ins recommandés

1. Installez automatiquement les plug-ins recommandés en fonction des invites lors de la première utilisation
2. Tous les plug-ins ont été configurés et les invites de vérification du code seront automatiquement exécutées et ils seront automatiquement réparés lors de l'enregistrement.
3. Lors de la création d'une nouvelle Page , Component , wxs générera automatiquement des fichiers modèles (le modèle peut être modifié)

CI [Intégration Continue]

Auzre Pipelines, Travis CI et Github Actions ont été configurés par défaut et peuvent être ouverts et modifiés selon les besoins.

• Azure Pipelines Modifier la configuration azure-pipelines.yml selon vos besoins
• Travis-CI modifie configuration.travis.yml si nécessaire
• Actions Github Modifier la configuration selon les besoins.github/workflows/nodejs.yml