WeChat-Miniprogramme (Komponenten – Benutzerdefinierte Komponenten)
Vorwort
Grund:
Die Oberfläche des Applets setzt sich aus einer Reihe von Komponenten zusammen. Die Mini Program Basic Library bietet eine Reihe grundlegender Komponenten, um die grundlegenden Anforderungen von Entwicklern zu erfüllen. Da die Entwicklung kleiner Programme jedoch immer komplexer wird, wird es immer unbequemer, einfach Basiskomponenten für die Entwicklung zu verwenden.
Beispielsweise haben komplexere Applets häufig einige gemeinsame interaktive Module, wie z. B. "Dropdown-Auswahlliste", "Suchfeld", "Datumsauswahl" und so weiter. Diese Schnittstelleninteraktionsmodule können auf mehreren Seiten verwendet werden, und die Logik ist relativ unabhängig. Es ist jedoch sehr umständlich, ein solches Modul mit herkömmlichen Applet-Entwicklungsmethoden zu implementieren.
Benutzerdefinierte Komponenten:
Angesichts dieser Situation bietet die Mini Program Basic Library die Funktion, mit der Entwickler selbst Schnittstellenkomponenten erstellen können, die als "benutzerdefinierte Komponenten" bezeichnet werden. Durch diese Funktion können Entwickler solche Interaktionsmodule in Schnittstellenkomponenten abstrahieren, was die Organisation des Schnittstellencodes sehr flexibel macht.
Versionsanforderungen:
Ab Version 1.6.3 der Applet-Basisbibliothek unterstützen Applets einfache komponentenbasierte Programmierung. Entwickler können die funktionalen Module auf der Seite in benutzerdefinierte Komponenten zur Wiederverwendung auf verschiedenen Seiten abstrahieren; sie können auch komplexe Seiten in mehrere Low-Coupling-Module aufteilen, was für die Codewartung hilfreich ist.
Hinweis: Benutzerdefinierte Komponenten sind Basiskomponenten sehr ähnlich, wenn sie verwendet werden
Jede benutzerdefinierte Komponente besteht aus vier Codedateien:
①json-Datei wird verwendet, um einige grundlegende Komponentenkonfigurationen zu platzieren
②wxml-Datei Komponentenvorlage
③wxss-Datei Komponentenstil, der nur auf die internen Knoten der Komponente wirkt (diese Datei ist optional ④ js-Datei JS-Code der Komponente, die die Hauptlogik der Komponente trägt
Diese vier Dateien sind den vier Dateien, die beim Schreiben einer Seite verwendet werden, sehr ähnlich, es gibt jedoch Unterschiede. Als Nächstes stellen wir vor, wie Sie diese vier Dateien verwenden, um eine einfache benutzerdefinierte Komponente zu schreiben.
(1) Speicherort des Ordners
Zunächst müssen Sie den Speicherort der Datei bestimmen. Der Offizielle gibt nicht an, wo die benutzerdefinierten Komponentendateien abgelegt werden sollen, aber für Sie oder das Team wird empfohlen, dass Sie ein Komponentenverzeichnis unter dem Stammverzeichnis erstellen zum Speichern aller benutzerdefinierten Komponenten.
(2) Erstellen Sie eine Gruppendatei
Erstellen Sie eine neue myComponent-Gruppendatei unter dem Komponentenordner, um benutzerdefinierte Komponenten zu enthalten, wie unten gezeigt
(3) Komponentenkonfiguration
Ähnlich wie eine Seite besteht eine benutzerdefinierte Komponente aus 4 Dateien: json, wxml, wxss und js. Um eine benutzerdefinierte Komponente zu schreiben, müssen Sie zuerst die benutzerdefinierte Komponente in der json-Datei deklarieren (setzen Sie das Feld „component“ auf „true“, um die Gruppe von Dateien als benutzerdefinierte Komponente festzulegen) und konfigurieren Sie die json-
Datei
(4) Komponentenvorlage
Schreiben Sie die Komponentenvorlage in die wxml-Datei und fügen Sie den Komponentenstil in die wxss-Datei hinzu.Ihre Schreibmethode ist ähnlich der der Seite.
Die Komponentenvorlage wird genauso geschrieben wie die Seitenvorlage, und diese Vorlage rendert ein Kontrollkästchen und eine Bezeichnung in der Komponente
(5) Komponentenstil
Ähnlich wie bei Seiten kann der Stil von Komponentenknoten in der wxss-Datei angegeben werden. Die darin enthaltenen Stile werden nur innerhalb der Komponente wirksam. Beachten Sie, dass Stile nur über Klassenselektoren (wie .the-class-name ) angegeben werden können.
Hinweis:
① Komponenten und Seiten, die auf Komponenten verweisen, können keine ID-Selektoren (#a), Attribut-Selektoren ([a]) und Tag-Namen-Selektoren verwenden, verwenden Sie stattdessen Klassen-Selektoren.
②Die Verwendung von untergeordneten Selektoren (.a .b) in Komponenten und Seiten, die auf Komponenten verweisen, kann in einigen extremen Fällen zu einer unerwarteten Leistung führen. Wenn dies der Fall ist, vermeiden Sie es bitte, sie zu verwenden.
③Geerbte Stile, wie Schriftart und Farbe, werden von außerhalb der Komponente an das Innere der Komponente vererbt.
④ Zusätzlich zum Vererben von Stilen sind die Stile in app.wxss und die Stile der Seite, auf der sich die Komponente befindet, nicht für benutzerdefinierte Komponenten gültig (es sei denn, die Isolationsoption für Komponentenstile wird geändert).
(6) Komponentendefinition
Die Komponentendefinition muss in der JS-Datei der Komponente enthalten sein. Verwenden Sie den Komponentenkonstruktor beim Definieren von:
(7) Rufen Sie benutzerdefinierte Komponenten auf
Fall: Einführen einer benutzerdefinierten Komponente (pages/myself/check) auf der persönlichen Authentifizierungsseite
Schritt 1 Schritt 1:
Fügen Sie der json-Datei eine benutzerdefinierte Komponentendeklaration hinzu, die der Seite entspricht, die diese Komponente verwenden muss.
Rufen Sie zum Beispiel benutzerdefinierte Komponenten auf der persönlichen Authentifizierungsseite auf und führen Sie sie ein. 
Schritt 2 Schritt 2:
Verwenden Sie sie einfach in der wxml-Datei, die der Seite entspricht
Zusammenfassen
Dieser Abschnitt stellt hauptsächlich das Erstellen und Aufrufen von benutzerdefinierten Komponenten vor.
①Erstellen Sie einen Ordner und bestimmen Sie den Speicherort der benutzerdefinierten Gruppendatei.
②Erstellen Sie die Gruppendatei der benutzerdefinierten Komponente.
③json-Komponentenkonfiguration, öffnen Sie die Komponenteneigenschaften, d
④wxml-Komponente Vorlagenschreiben
⑤Wxss-Komponentenstil schreiben
⑥Komponentendefinition, Komponentenkonstruktor verwenden (Eigenschaftenattributliste, Datendaten, Methodenmethode)
⑦Benutzerdefinierte Komponenten aufrufen (①json benutzerdefinierte Komponentendeklaration hinzufügen; ②wxml-Vorlagendatei aufrufen)