Wie verwende ich NPM-Paketfunktionen in der WeChat-Applet-Entwicklung?

In diesem Artikel wird die Verwendung der npm-Paketfunktion bei der Entwicklung von WeChat-Miniprogrammen vorgestellt, wodurch die Entwicklungseffizienz von WeChat-Miniprogrammen erheblich verbessert wird. Es handelt sich auch um ein Update der Videoversion der Tutorials der WeChat-Miniprogrammreihe.

Das WeChat Mini-Programm unterstützte npm bei seiner ersten Veröffentlichung nicht. Dies ist auch der Punkt, an dem viele Front-End-Entwickler derzeit das WeChat Mini-Programm kritisieren, nachdem sie sich mit der ökologischen Umgebung von npm vertraut gemacht haben.

Das WeChat-Miniprogramm hat nach Version 2.2.1 Unterstützung für das Laden von npm-Paketen hinzugefügt, sodass das Miniprogramm die Verwendung von npm zum Installieren von Paketen von Drittanbietern unterstützt.

Die Funktionsaktualisierungen des WeChat-Miniprogramms wurden kürzlich aktualisiert und sind sehr leistungsstark. Beispielsweise kann die neue Funktion „Cloud-Entwicklung“ der WeChat-Miniprogramm-Entwicklungsplattform, die Ihnen zuvor vorgestellt wurde, schnell genutzt werden.

Laden des npm-Pakets im Miniprogramm

Das WeChat-Miniprogramm verwendet hier die offizielle Dokumentation zum Laden von npm-Paketen von npm. Die Bibliothek miniprogram-datepicker wird verwendet, um die Datumsauswahlfunktion zwischen dem gregorianischen Kalender und dem Mondkalender zu implementieren, während die offizielle Komponente des WeChat-Applets nur einfach eine gregorianische Kalenderzeit auswählen kann.

Suchen Sie den Projektordner des WeChat-Applets im Terminal und installieren Sie es über den npm-Installationsbefehl.

Stellen Sie sicher, dass Sie hier die Option –Produktion verwenden. Dadurch kann die Notwendigkeit reduziert werden, einige nicht geschäftliche NPM-Pakete zu installieren, wodurch die Größe des gesamten kleinen Programmpakets verringert wird.

Npm-Paket erstellen

Klicken Sie im Menü „Extras“ des WeChat-Applet-Entwicklungstools auf den Befehl „Npm erstellen“, um das NPM-Paket zu erstellen Pakete sind in Pakete eingebaut, die geladen und in kleinen Programmen verwendet werden können.

Um allen die verschiedenen Anforderungen beim Veröffentlichen von NPM-Paketen besser zu verstehen, finden Sie hier eine kurze Einführung in das Prinzip:

Erstens nimmt das Verzeichnis node_modules nicht an der Kompilierung teil. Hochladen und Verpacken, also Wenn ein Miniprogramm das npm-Paket verwenden möchte, muss es den Prozess „Erstellen von npm“ durchlaufen. Unter dem Verzeichnis auf derselben Ebene wie die äußersten node_modules wird ein Verzeichnis „miniprogram_npm“ erstellt, in dem die erstellten und gespeichert werden gepacktes npm-Paket, das das Mini-Programm tatsächlich verwendet.

Das Erstellen und Packen ist in zwei Typen unterteilt: Das Miniprogramm-NPM-Paket kopiert alle Dateien im Build-Datei-Generierungsverzeichnis direkt nach Miniprogram_NPM. Andere NPM-Pakete durchlaufen ab dem die Abhängigkeitsanalyse und den Paketierungsprozess Eintrag js-Datei (ähnlich wie Webpack).

Der Prozess zum Finden von NPM-Paketen ähnelt der Implementierung von NPM. Beginnen Sie in dem Verzeichnis, in dem sich die Dateien befinden, die von NPM-Paketen abhängen, und suchen Sie Schicht für Schicht, bis Sie ein verfügbares NPM-Paket oder das Stammverzeichnis finden des Applets.

Nachdem der Build abgeschlossen ist, müssen Sie bestätigen, dass das Projekt „Npm-Modul verwenden“ aktiviert hat.

Verwendung von Modulen von Drittanbietern im Projekt

In unserem vorherigen tatsächlichen Projekt haben wir dieses NPM-Modul beim Laden der Homepage getestet .

Nachdem Sie die Datumsauswahl auf der Seite angeordnet, die Kompilierung des Projekts gespeichert und abgeschlossen haben, klicken Sie auf die Schaltfläche, um den Ladestatus der Komponente anzuzeigen.

Empfohlen: „Mini-Tutorial zur Programmentwicklung“

Das obige ist der detaillierte Inhalt vonWie verwende ich NPM-Paketfunktionen in der WeChat-Applet-Entwicklung?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!