miniprogram template

Miniprogramm-Vorlage

Ein Wechat-Miniprogramm-Vorlagenprojekt, das die beste Praxis mit TypeScript und VSCode darstellt

[Best Practice für Miniprogrammvorlagen (TypeScript+VSCode), erstellt mit dem Miniprogram-Build-Tool]

---

Erforderlich [erforderliche Umgebung]

• nodejs: npm >= 6.0 (oder yarn ) Node >= 10
• Herausgeber: VSCode
• Wechat-Devtools: Mini-Programmentwicklungstool (und offener服务端口)

Schnellstart [Verwendung]

1. Projekt erstellen [Mit einem Klick ein neues Projekt erstellen]

Klicken Sie auf „Diese Vorlage verwenden“, um diese Vorlage mit einem Klick zu verwenden, oder verwenden Sie die Befehlszeile:

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

2. starten [unter Projektdatei ausführen]

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

Nach dem normalen Start öffnet das Debugging-Tool automatisch die dist -Vorschau.

Skript [Befehl]

npm kann durch yarn ersetzt werden

• npm start : Kompilieren Sie das Projekt neu und aktualisieren Sie es in Echtzeit [alias npm run start ]
  • npm run start:test : Verwenden Sie die Konfigurationsdatei der Testumgebung für die Entwicklung
  • npm run start:prod : Verwenden Sie die Konfigurationsdatei der Build-Umgebung für die Entwicklung
• npm run upload : Packen Sie das Projekt und laden Sie es in den Hintergrund des Miniprogramms hoch (Konfiguration der Entwicklungsumgebung).
  • npm run upload:test : Verwenden Sie die Testumgebungskonfiguration, um das Projekt zu packen und in den Hintergrund des Miniprogramms hochzuladen
  • npm run upload:prod : Verwenden Sie die Build-Umgebungskonfiguration, um das Projekt zu verpacken und in den Hintergrund des Miniprogramms hochzuladen
• npm run build : Neu verpacken und kompilieren (Konfiguration der Entwicklungsumgebung)
  • npm run build:test : Neu verpacken und kompilieren
  • npm run build:prod : neu verpacken und kompilieren
• npm test : test [alias npm run test ]
• npm run check : Überprüfung des Codestils und -formats (unterstützt separate lint -Prüfungen in verschiedenen Sprachen)
• npm run fix : Korrigierbare Lint- und Codestilprobleme werden automatisch behoben
• npm run help : Detaillierte Verwendung des Kompilierungstools mp anzeigen

Alle Verknüpfungsbefehle package.json

Mehrere Umgebungen [Mehrere Umgebungseinstellungen]

Jede Umgebung kann unterschiedlich konfiguriert werden (die Umgebungskonfiguration kann je nach Bedarf erhöht oder reduziert werden).

• .mpconfig.jsonc integrierte Entwicklungsumgebung
• env/test.jsonc Testumgebungskonfiguration
• env/prod.jsonc Online-Produktionsumgebungskonfiguration

Wenn nur eine Umgebung vorhanden ist, können Sie das env -Verzeichnis löschen und es direkt mit .mpconfig.jsonc

Kodierung [Kodierung]

Sprachen [Programmiersprachen]

js

• .ts (TypeScript) oder .js (JavaScript) ( ts empfohlen )
• Eslint + Prettier prüft den Codestil und die automatische Formatierung
• TS unterstützt den / absoluten Pfadimport

wxml

• .wxml oder .html
• Htmlhit + Prettier prüft den Codestil und die automatische Formatierung
• Verwenden Sie vscode-minapp zur Codeprüfung und Formatierung

wxss

• .scss , .sass oder .css ( scss empfohlen)
• Stylelint + Prettier überprüft den Codestil und die automatische Formatierung
• Sortieren Sie CSS-Eigenschaften automatisch in einer bestimmten Reihenfolge
• scss kann den Inhalt des Assets-Verzeichnisses direkt @import

json

• .jsonc , .json oder .json5 Annotationen werden unterstützt
• Schönere Code-Inspektion und automatische Formatierung

wxs

• .wxts (TypeScript), .wxs (JavaScript) ( wxts empfohlen)
• Schönere Code-Inspektion und automatische Formatierung
• miniprogram-wxs führt Typprüfung und Qualifizierung durch

Herausgeber [Herausgeber]

Verwenden Sie VSCode und installieren Sie automatisch empfohlene Plug-Ins

1. Installieren Sie empfohlene Plug-Ins automatisch gemäß den Eingabeaufforderungen, wenn Sie es zum ersten Mal verwenden
2. Alle Plug-Ins wurden konfiguriert, es werden automatisch Eingabeaufforderungen zur Codeüberprüfung durchgeführt und beim Speichern automatisch repariert.
3. Beim Erstellen einer neuen Page oder Component generiert wxs automatisch Vorlagendateien (die Vorlage kann geändert werden).

CI [Kontinuierliche Integration]

Auzre Pipelines, Travis CI und Github Actions wurden standardmäßig konfiguriert und können nach Bedarf geöffnet und geändert werden.

• Azure Pipelines Ändern Sie die Konfiguration azure-pipelines.yml nach Bedarf
• Travis-CI ändert die Datei „configuration.travis.yml“ nach Bedarf
• Github-Aktionen: Ändern Sie die Konfiguration nach Bedarf.github/workflows/nodejs.yml