wxapp boilerplate

wxapp-boilerplate

WeChat/Alipay-Miniprogramm-Projektgerüst, entwickelt mit webpack , babel , scss

Funktion

• Unterstützt die Referenzierung von node_modules -Modulen
• Unterstützt die Konfiguration von alias , um Modulverweise wie ../../../ zu vermeiden.
• Unterstützt eine umfassendere ES6 Kompatibilität durch babel , einschließlich async/await
• Eingebautes promise und lodash ( lodash führt entsprechende Module bei Bedarf ein, nicht alle)
• Verwenden Sie scss , um .wxss Dateien zu schreiben, mit einigen nützlichen integrierten mixins und extends
• Stellen Sie die globalen Konstanten __DEV__ und process.env.NODE_ENV zur Unterstützung der Entwicklung bereit
• Unterstützt die automatische Kompilierung in WeChat- und Alipay-Applets
• Geben Sie die globalen Konstanten __WECHAT__ und __ALIPAY__ an, um zu bestimmen, ob es sich um ein WeChat-Applet oder ein Alipay-Applet handelt
• Erstellen Sie schnell WeChat-Applet-Seiten über die Befehlszeile
• Unterstützt das Komprimieren von Code in production

Fangen Sie an

Stellen Sie sicher, dass Node.js (>= v4.2 ) und Yarn oder NPM installiert sind

1. git clone dieses Projekt
2. Verwenden Sie das Befehlszeilentool, cd und yarn auszuführen, um abhängige Module zu installieren.
3. Führen Sie yarn start aus, um die Entwicklung zu starten
4. Fügen Sie über die WeChat-Entwicklertools dist/wechat zum Projekt hinzu

Integrierte Befehle

• yarn start startet webpack , um WeChat-Applet-Projekte zu entwickeln, die Dateiänderungen überwachen und automatisch neu kompilieren können
• yarn start:alipay startet webpack , um ein Alipay-Applet-Projekt zu entwickeln, das Dateiänderungen überwachen und automatisch neu kompilieren kann
• yarn build kompiliert und generiert den Code für production für dist/wechat und dist/alipay
• yarn lint:build führt den Befehl yarn build aus und verwendet Eslint und Stylelint, um Codespezifikationen zu überprüfen
• yarn prettier führt prettier aus, um den Code im src-Verzeichnis zu formatieren
• yarn create-page erstellt schnell eine WeChat-Applet-Seite (weitere Informationen zur Verwendung von create-page finden Sie unter create-wxapp-page).

Kompatibel mit den Miniprogrammen WeChat und Alipay

Entwickler können eine Reihe von Quellcodes auswählen, um WeChat- und Alipay-Applets zu entwickeln. Dieses Gerüst unterstützt die automatische Kompilierung wxml in axml , die Konvertierung von wx:attr in a:attr , die Konvertierung von API wx in my und umgekehrt. Allerdings unterscheiden sich einzelne Schnittstellen auf der Plattform geringfügig und Entwickler können sie dynamisch über __WECHAT__ oder __ALIPAY__ verwalten.

Dateikopie

Wenn wxml oder axml über dynamisch importierte Dateien verfügt (z. B. src="{{'images/' + type + '.png'}}" ), kann Webpack diese nicht dynamisch importieren, sodass nach dem Packen möglicherweise Dateien fehlen .

Wenn Sie auf diese Situation stoßen, können Sie sie über das Copy-Webpack-Plugin lösen und das gesamte images nach dist kopieren.

Dieses Plugin verfügt bereits über dieses Plug-in, das in dieses Gerüst integriert ist. Zur Vereinfachung der Verwendung können Sie package.json auch ein copyWebpack String-Array hinzufügen, um Verzeichnisse oder Dateien automatisch zu kopieren. Zum Beispiel:

package.json

 {
  // ...
  "copyWebpack" : [ "images" , "icons" ]
}

Durch Ausführen yarn start oder yarn build werden die Verzeichnisse src/images und src/icons automatisch in dist/wechat/images und dist/wechat/icons kopiert (dasselbe gilt für das Alipay-Applet).

Änderungsprotokoll

Änderungsprotokoll

Verwandte Projekte

• create-wxapp-page
• React-Lib-Boilerplate
• Front-End-Lib-Boilerplate
• Node-Cli-Boilerplate

Lizenz

MIT