So verwenden Sie weniger im WeChat-Applet (optimale Methode)

Vorwort

Ich bin es gewohnt, Less/Sass zu schreiben, aber jetzt fehlt mir beim Entwickeln kleinerer Programme immer noch CSS, was ich nicht gewohnt bin.

Die Tutorials, die ich online gesucht habe, drehten sich entweder um Gulp oder das Easy-less-Plug-in für vscode.

Traditionelle Methode

Vergleichen wir die Vor- und Nachteile dieser beiden Methoden.

Schluck

Ersteres erfordert grundlegende Kenntnisse von Gulp, aber für das mittlerweile beliebte Webpack verwenden immer weniger Leute Gulp und es ist mit einem gewissen Lernaufwand verbunden, bietet jedoch glücklicherweise einen hohen Grad an Anpassungsmöglichkeiten und Sie können Take nach Belieben hinzufügen.

Einfaches Plugin von VScodd

Ohne etwas zu sagen, es ist ziemlich gut. Installieren Sie einfach das Easy-Less-Plugin in vscode und dann seting.json, und Sie können Less problemlos verwenden. Speichern Sie es und Sie können eine .wxss-Datei im selben Verzeichnis generieren. Der Nachteil ist, dass es in vscode verwendet werden muss, was bedeutet, dass Sie während der Entwicklung zwei Editoren öffnen müssen, einen, um Less in vscode zu schreiben, und den anderen, um mit den WeChat-Entwicklertools eine Vorschau anzuzeigen ... emmmmm, das Bild ist zu schön, um es sich vorzustellen

Ein neuer Ansatz

Durch Zufall habe ich im Internet einen Screenshot unter „Möchten Sie in Ihrem Miniprogramm weniger verwenden?“ (VScode-Version) gesehen.

Easy-less, das direkt in WeChat Developer Tools verwendet werden kann, verfügt über dieselben Funktionen wie die in vscode verwendeten. Ich war so erstaunt, dass ich in der offiziellen Dokumentation nachsah, dass WeChat Developer Tools bereits ab Version 1.03.2004271 Erweiterungstools unterstützt.

Und Sie können einfach die Erweiterung von vscode verwenden, was sehr praktisch ist

Nach einer Reihe von Operationen ist bewiesen, dass es möglich ist.

Schritt

1. Installieren Sie Easy-less in Vscode

2. Erweiterter Ordner

Der entpackte Ordner befindet sich unter ~/.vscode/extensions (macOS-System) oder C:\Benutzer\Benutzername.vscode\extensions (Microsoft Windows-System).

Kopieren Sie die Datei mrcrowl.easy-less-1.6.3 in das WeChat-Entwicklertool

3. Fügen Sie den Erweiterungsordner ein

Öffnen Sie WeChat Developer Tools, obere Leiste, Einstellungen > Erweiterungseinstellungen > Erweiterungen > Benutzerdefinierte Erweiterungen

Klicken Sie auf „Erweiterungsordner öffnen“. Dann wird ein Ordner geöffnet, den Sie einfach hier einfügen können.

4. Legen Sie output.wxss fest

Es bleibt nur noch ein letzter Schritt. Da Easy-less standardmäßig CSS ausgibt, das Applet jedoch .wxss-Dateien verwenden muss, legen Sie einfach das Ausgabedateisuffix fest.

5. WeChat Developer Tools neu starten

Nachdem die Einstellung erfolgreich war, schließen Sie das Applet und öffnen Sie es erneut. Suchen Sie dann eine Seite im Seitenverzeichnis und erstellen Sie ein neues „index.less“, schreiben Sie etwas CSS und speichern Sie es, um zu sehen, ob es eine Änderung in „index.wxss“ gibt …

Endergebnis

siehe:

• Offizielle Dokumentation - Editor-Erweiterungen
• vscode-einfach-weniger
• Möchten Sie in Ihrem Miniprogramm weniger verwenden? (VScode-Version)
• Weniger chinesische Website

Zusammenfassen

Dies ist das Ende dieses Artikels zur Verwendung von „less“ in WeChat-Miniprogrammen (der beste Weg). Weitere Informationen zur Verwendung von „less“ in WeChat-Miniprogrammen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!