Feature-Installationsschritte für Labrador, das Entwicklungs-Framework für WeChat-Miniprogrammkomponenten

Funktionen

Mithilfe des Labrador-Frameworks können die WeChat-Entwicklertools das Laden großer NPM-Pakete unterstützen

Unterstützen Sie ES6/7-Standardcode und verwenden Sie async/await, um die Callback-Hölle effektiv zu vermeiden

Komponentenwiederverwendung, das WeChat-Applet-Framework wird neu gekapselt, wodurch die Wiederverwendung und Verschachtelung von Komponenten realisiert wird

Automatisiertes Testen, es ist sehr einfach, Unit-Test-Skripte zu schreiben, und automatisierte Tests können ohne zusätzliche Konfiguration durchgeführt werden

Verwenden Sie Editor Config und ESLint, um den Codestil zu standardisieren, um die Teamzusammenarbeit zu erleichtern

Installation

Installieren Sie zuerst Node.js und npm v3 in Ihrem System und laden Sie es herunter Führen Sie dann den folgenden Befehl aus: Der Befehl installiert das Labrador-Befehlszeilentool global.

npm install -g labrador-cli

Projekt initialisieren

mkdir demo           # 新建目录
cd demo              # 跳转目录
npm init             # 初始化npm包
labrador init        # 初始化labrador项目

Projektverzeichnisstruktur

demo                 # 项目根目录├── .labrador        # Labrador项目配置文件├── .babelrc         # babel配置文件├── .editorconfig    # Editor Config├── .eslintignore    # ESLint 忽略配置├── .eslintrc        # ESLint 语法检查配置├── package.json
├── dist/            # 目标目录├── node_modules/
└── src/             # 源码目录
    ├── app.js
    ├── app.json
    ├── app.less
    ├── components/  # 通用组件目录
    ├── pages/       # 页面目录
    └── utils/

Hinweis: Alle Dateien im dist-Verzeichnis werden vom Labrador-Befehl kompiliert und generiert. Bitte ändern Sie sie nicht direkt.

Entwicklungstools konfigurieren

Verwenden Sie nach der Initialisierung des Projekts Ihre bevorzugte IDE wie WebStorm oder Sublime, um das Stammverzeichnis des Projekts zu öffnen. Öffnen Sie dann das WeChat-Webentwicklertool, um ein neues Projekt zu erstellen, und wählen Sie das dist-Zielverzeichnis als lokales Entwicklungsverzeichnis aus.

Entwicklungsprozess

Bearbeiten Sie den Quellcode im src-Verzeichnis in einer IDE wie WebStorm oder Sublime, führen Sie dann den Labrador-Build-Befehl im Projektstammverzeichnis aus, um das Projekt zu erstellen, und debuggen Sie dann Klicken Sie im WeChat-Webentwicklertool auf die Schaltfläche „Neu starten“ im linken Menü der Benutzeroberfläche, um den Effekt anzuzeigen.

Während unserer Entwicklung werden die WeChat Web Developer Tools nur zum Debuggen und zur Vorschau verwendet. Ändern Sie den Code in der Bearbeitungsoberfläche der WeChat Web Developer Tools nicht.

Die WeChat-Webentwicklertools machen gelegentlich Fehler, die sich dadurch bemerkbar machen, dass beim Klicken auf die Schaltfläche „Neu starten“ keine Reaktion erfolgt. Die Debugging-Konsole gibt eine große Anzahl von Fehlern aus, für die keine Dateien erforderlich sind, und die Codedateien werden nicht im angezeigt Bearbeitungsoberfläche. Dies liegt daran, dass der Labrador-Build-Befehl das gesamte dist-Verzeichnis aktualisiert und das WeChat-Webentwicklertool bei der Überwachung von Codeänderungen auf Ausnahmen stößt. In diesem Fall müssen Sie nur das WeChat-Webentwicklertool schließen und erneut starten.

Wir können auch den Befehl labrador watch verwenden, um den Code im src-Verzeichnis zu überwachen und ihn automatisch zu erstellen, wenn Änderungen auftreten. Es ist nicht erforderlich, labrador build jedes Mal manuell auszuführen, nachdem der Code bearbeitet wurde.

Die beste Haltung ist also:

Labrador Watch im Projekt ausführen

Code in WebStorm speichern, speichern

Zu den WeChat-Webentwicklertools wechseln Debuggen und Vorschau anzeigen in WebStorm

und kehren Sie dann zum Codieren in WebStorm

Das obige ist der detaillierte Inhalt vonFeature-Installationsschritte für Labrador, das Entwicklungs-Framework für WeChat-Miniprogrammkomponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!