Einführung und Verwendung des Vant-Frameworks in Applets

Erstens, Vant-Framework

Das vantUI-Framework wird häufig zum Erstellen der Basisbibliothek mobiler Seitenkomponenten verwendet. Um Benutzern ein nativeres Erlebnis zu ermöglichen, ist es eine sehr gute Lösungswahl.

In Bezug auf dieses Framework gibt es nicht nur eine Version, die für mobiles Vue-Gerüst geeignet ist, sondern auch eine Webanwendungsversion, die mit der Entwicklung kleiner Programme kompatibel ist. Im Zusammenhang mit weniger nativen Komponenten von WeChat-Applets verwenden wir dieses Framework normalerweise als Haupt-UI-Framework für die Entwicklung bei der Entwicklung von WeChat-Applets, was Zeit und Aufwand spart und den Entwicklungszyklus erheblich verkürzt.

Da sich die Umgebung kleiner Programme stark von der Umgebung gewöhnlicher Vue-Projekte unterscheidet, ist es nicht möglich, npm zum direkten Erstellen des vant-Frameworks zu verwenden, wenn Sie es in ein kleines Programm einführen möchten. Dies wird etwas mühsamer sein, also Im folgenden Inhalt wird detailliert beschrieben, wie Vant im WeChat-Applet eingeführt und verwendet wird.

2. Stellen Sie Vant über das Paket vor und verwenden Sie es

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

Fügen Sie hier eine Bildbeschreibung ein
②Öffnen Sie das Befehlszeilenfenster, geben Sie npm init ein , um die Paketdatei zu erstellen, und verwalten Sie das Plug-in-Paket über die Konfigurationsdatei.

③ Als nächstes installieren Sie die Abhängigkeiten auf die gleiche Weise wie das Vue-Projekt.

npm i @vant/weapp -S --production

④ Ändern Sie die Datei app.json

Entfernen Sie „style“: „v2“ in app.json, und die neue Version der Basiskomponenten des Applets fügt zwangsweise viele Stile hinzu, die schwer zu überschreiben sind. Wenn sie nicht geschlossen sind, werden die Stile einiger Komponenten verwechselt.

⑤ Ändern Sie project.config.json

Bei Projekten, die mit Entwicklertools erstellt wurden, ist miniprogramRoot standardmäßig miniprogram, package.json liegt außerhalb davon und npm build funktioniert nicht ordnungsgemäß.

Sie müssen die folgende Konfiguration manuell in project.config.json hinzufügen, damit die Entwicklertools den Speicherort, von dem npm abhängig ist, korrekt indizieren können.


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

Die Änderung dieser Datei hängt hauptsächlich von der von uns verwendeten kleinen Programmvorlage ab. Die von verschiedenen Vorlagen generierten Dateiverzeichnisse sind unterschiedlich. Einige Vorlagenverzeichnisse in der neuen Version können dazu führen, dass das kleine Programm den Speicherort unseres npm-Pakets findet, daher benötigen wir um etwas mit dieser Datei zu tun. einige Anpassungen.

⑥Öffnen Sie die WeChat-Entwicklertools, klicken Sie auf Extras -> NPM erstellen und aktivieren Sie die Option zur Verwendung von NPM-Modulen. Nachdem der Build abgeschlossen ist, können Sie Komponenten importieren.

Fügen Sie hier eine Bildbeschreibung ein

3. Verwenden Sie das Vant-Framework

Am Beispiel der Button-Komponente müssen Sie nur den dem Button entsprechenden Pfad in app.json oder index.json konfigurieren.

// app.json
"usingComponents": {
    
    
  "van-button": "@vant/weapp/button/index"
}

<van-button type="primary">按钮</van-button>