Spezifische Schritte zur Verwendung des Vant-Frameworks im WeChat-Applet

1. Wenn wir über das Vant-Framework sprechen, glaube ich, dass jeder damit vertraut sein sollte. Freunde, die bereits Erfahrung mit der Entwicklung mobiler Endgeräte haben, sollten es alle kennen.

2. Vant ist eine Open-Source-Bibliothek für Mobilkomponenten, die vom Front-End-Team von Youzan entwickelt wurde. Sie wurde 2017 als Open Source freigegeben und wird seit 4 Jahren gepflegt. Vant führt alle Kerngeschäfte von Youzan intern durch und bedient extern mehr als 100.000 Entwickler. Es ist eine der wichtigsten Mobilkomponentenbibliotheken der Branche.

3. Lassen Sie uns keine weitere Zeit verlieren und direkt zum heutigen Thema kommen. Wie verwenden wir die Vant-Komponentenbibliothek im WeChat-Applet?

Erste

Öffnen wir zunächst die Vant Weapp-Website. Hier gebe ich Ihnen die Website-Adresse. Vant Weapp-Website

Nachdem Sie die Website geöffnet haben, klicken Sie auf „Schnell loslegen“. Die obigen Schritte zeigen Ihnen, wie Sie die Vant-Komponentenbibliothek im Miniprogramm verwenden.

Als Nächstes werde ich Ihnen vorstellen, wie ich die Vant-UI-Komponentenbibliothek installiere und verwende.

1. Öffnen Sie das Projektverzeichnis unseres Applets und öffnen Sie dann den Speicherort der Datei.

2. Projektdateien initialisieren

Hier initialisiere ich über das cmd-Fenster

3. Geben Sie den Befehl zum Initialisieren des Projekts ein

 npm init

An diesem Punkt werden Sie feststellen, dass sich in Ihrem Verzeichnis eine zusätzliche Datei package.json befindet

4. Abhängigkeiten installieren

4.1 Installieren Sie vant/weapp über npm

 npm ich @vant/weapp -S --Produktion

4.2 Installation des Miniprogramms

 npm ich miniprogramm-sm-crypto --Produktion

Nach Abschluss der Installation finden Sie einige weitere Dateien in Ihrem Verzeichnis.

4.3 App.json ändern

Entfernen Sie "style": "v2" in app.json, da die neue Version der Basiskomponenten des Miniprogramms zwangsweise viele Stile hinzufügt, die schwer abzudecken sind. Wenn es nicht geschlossen wird, führt dies zu Verwirrung bei den Stilen einiger Komponenten.

4.4 Ändern Sie project.config.json

Bei Projekten, die mit Entwicklertools erstellt wurden, ist miniprogramRoot standardmäßig auf miniprogram eingestellt und package.json liegt außerhalb davon, sodass npm build nicht richtig funktioniert. Sie müssen die folgende Konfiguration manuell zu project.config.json hinzufügen, damit die Entwicklertools den Speicherort der NPM-Abhängigkeiten korrekt indizieren können.

 {
  ...
  "Einstellung": {
    ...
    "packNpmManually": wahr,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./miniprogram/"
      }
    ]
  }
}

 4.5 Build npm Wir klicken auf die Symbolleiste in der oberen linken Ecke

Nach erfolgreichem Build wird der folgende Bildschirm angezeigt

4.6 Klicken Sie dann oben rechts auf Details --- Lokale Einstellungen --- npm-Modul verwenden

5. Komponenten verwenden

Ich registriere einen Button global und verwende ihn dann. Registrieren Sie sich zunächst in app.json

Hier werde ich nach dem Zufallsprinzip eine Seite suchen, auf der ich diese Schaltflächenkomponente verwenden kann.

Sie können sehen, dass ich es erfolgreich verwendet habe.

Damit ist dieser Artikel über die spezifischen Schritte zur Verwendung des Vant-Frameworks in WeChat-Miniprogrammen abgeschlossen. Weitere Inhalte zur Verwendung des Vant-Frameworks in Miniprogrammen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!