Der gesamte Prozessbericht zur Einführung des Vant-Frameworks in das WeChat-Applet

Vorwort

Manchmal habe ich das Gefühl, dass die native Benutzeroberfläche der WeChat-Miniprogramme etwas zu wünschen übrig lässt. Können wir also ein Framework von Drittanbietern einführen? Dieser Artikel nimmt die Einführung von Vant als Beispiel, die insgesamt 8 Schritte umfasst. Die Verwendung erfolgt unabhängig davon, ob es sich um ein Cloud-Entwicklungsprojekt handelt oder nicht.

Implementierungsschritte

1. Öffnen Sie das WeChat-Applet-Entwicklungstool und geben Sie das Projekt ein. Klicken Sie mit der rechten Maustaste auf den Stammordner des Projekts. Wählen Sie „Im Terminal öffnen“ aus. (Beachten Sie, dass es sich um das Stammverzeichnis handelt.)

2. Geben Sie npm init in das Befehlsfenster ein. Anschließend werden sämtliche Einstellungen entsprechend der Standardkonfiguration vorgenommen, es genügt ein Klick auf die Eingabetaste.

3. Geben Sie zum Erstellen npm install in das Befehlsfenster ein. Bei Erfolg werden die Dateien package.json und package-lock.json im Stammverzeichnis generiert.

4. Fahren Sie als Nächstes mit der Installation des Vant-Frameworks fort. Die Schritte können gemäß der offiziellen Website vant-contrib.gitee.io/vant-weapp/… befolgt werden.

4.1 npm ich @vant/weapp -S --production

4.2 npm ich vant-weapp -S --Produktion

4.3 App.json ändern

4.4 Ändern Sie project.config.json

5. Kehren Sie zu den WeChat Developer Tools zurück und suchen Sie in der Spalte „Tools“ nach „Build npm“. Warten Sie, bis der Build erfolgreich ist.

6. Schließlich müssen wir das npm-Modul verwenden. Suchen Sie unter „Details“ nach „npm-Modul verwenden“ und aktivieren Sie es.

7. Verwenden Sie Vant-Komponenten und führen Sie sie in app.json oder index.json ein. Weitere Informationen finden Sie auf der offiziellen Vant-Website Quick Start

8. Um es auf der Seite zu verwenden, importieren Sie die Komponente einfach direkt.

··· Zwischenspiel···

Da es sich um ein mit einer Test-AppId erstelltes Projekt handelt, habe ich keine Cloud-Entwicklung verwendet. Dies hat zur Folge, dass nach Abschluss der nachfolgenden Schritte eine Fehlermeldung ausgegeben wird! Die Fehlermeldung ist wie in der Abbildung unten (1) dargestellt. Dann wurde mir klar, dass das Projektverzeichnis nicht mit dem Dateiverzeichnis eines anderen von mir in der Cloud entwickelten Projekts übereinstimmte, was dazu führte, dass die Datei nicht gefunden wurde. Den genauen Grund kenne ich nicht. Aber mein Cloud-Entwicklungsprojekt war erfolgreich, wie in Abbildung (2) unten gezeigt. Die Schritte sind genau dieselben wie oben beschrieben.

Daraus können wir schließen, dass jeder versuchen sollte, die offizielle AppId zu verwenden (also die AppId nach erfolgreicher Registrierung auf der öffentlichen Plattform des Mini-Programms). Vermeiden Sie, später noch mehr Ärger zu bekommen.

Ursprünglich wollte ich das Cloud-Entwicklungsprojekt nutzen, um es erneut zu betreiben und die endgültigen erfolgreichen Ergebnisse bereitzustellen, anstatt eine problematische Notiz aufzuzeichnen. Aber nachdem ich darüber nachgedacht habe, ist das keine schlechte Idee. Es erinnert mich daran, diesen Fehler beim nächsten Mal nicht noch einmal zu machen. Und nun stelle ich euch allen endlich diesen Blog vor. Ich hoffe, dass dies für alle auch als Erinnerung dienen kann, auf Details zu achten und nicht nachlässig zu sein.

··· Eine magische Szene···

Am nächsten Tag öffnete ich die WeChat-Entwicklertools und stellte fest, dass das Projekt mit der Testnummer AppId wieder funktionierte und die Konsolenfehlermeldung verschwunden war. Das ist sehr peinlich! Ich verstehe nicht wirklich, was los ist (wenn es jemand weiß, geben Sie mir einfach die Antwort! Ich habe Angst zu sprechen …). Direkt auf dem Bild, wie unten gezeigt (3);

Abbildung (1): Fehlermeldung

Abbildung (2): Erfolgreiches Cloud-Entwicklungsprojekt mit Vant-Komponenten

Abbildung (3): Testnummer AppId nutzt erfolgreich Vant Framework

Zusammenfassen

Dies ist das Ende dieses Artikels über die Einführung des Vant-Frameworks in das WeChat-Miniprogramm. Weitere relevante Inhalte zur Einführung des Vant-Frameworks in das WeChat-Miniprogramm 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!