Artikelverzeichnis
Grundlegende Verwendung der Entwicklung kleiner Programmkomponenten
Idee zur Komponierung kleiner Programme
Verwendung von Komponenten-Slot-Definitionen
Als das Applet gerade gestartet wurde, unterstützte es keine Komponentenisierung, was ebenfalls kritisiert wurde :
Aber seit v1.6.3 unterstützt Applet die Entwicklung benutzerdefinierter Komponenten, was es für uns auch bequemer macht, die Komponentenisierung im Programm zu verwenden.
Die Anwendung des Komponentendenkens :
Mit der Idee der Komponentisierung werden wir diese in der weiteren Entwicklung voll ausschöpfen.
Teilen Sie die Seite so weit wie möglich in kleine, wiederverwendbare Komponenten auf.
Dadurch ist unser Code einfacher zu organisieren und zu verwalten und skalierbarer.
Daher sind Komponenten derzeit ein sehr wichtiges Kapitel in der Entwicklung kleiner Programme, und Sie müssen sie sorgfältig studieren ( aber die Idee der Komponentenisierung kleiner Programme ist im Grunde dieselbe wie die Idee der Komponentenisierung von Vue ) .
Der Prozess der Anpassung von Komponenten
Ähnlich wie Seiten bestehen benutzerdefinierte Komponenten aus 4 Dateien json wxml wxss js .
Gemäß meinen persönlichen Gewohnheiten werden wir zuerst einen Ordner components im Stammverzeichnis erstellen und die öffentlichen Komponenten, die wir später anpassen, in dieser Datei speichern;
Eine gemeinsame benutzerdefinierte Komponente enthält die entsprechenden vier Dateien;
Schritte zum Anpassen von Komponenten :
1. Zuerst müssen Sie eine benutzerdefinierte Komponente in der JSON-Datei deklarieren (setzen Sie das Komponentenfeld auf „true“, und dieser Satz von Dateien kann als benutzerdefinierte Komponente festgelegt werden).
2. Schreiben Sie das eigene Template unserer eigenen Komponente in wxml
<!--components/section-info/section-info.wxml-->
<view class="section">
<view class="title">我是标题</view>
<view class="content">我是内容: 哈哈哈哈</view>
</view>
3. Schreiben Sie die relevanten Stile, die zu unserer Komponente gehören, in wxss
/* components/section-info/section-info.wxss */
.title {
color: skyblue;
font-size: 40rpx;
font-weight: 700;
}
.content {
color: #333;
font-size: 30rpx;
}
4. In der js-Datei können Sie Daten oder zugehörige Logik innerhalb der Komponente definieren (derzeit nicht verwendet ) .
Nachdem wir die Komponente definiert haben, können wir die benutzerdefinierte Komponente verwenden
usingComponentsWir müssen die Eigenschaften der JSON-Datei der Seite unter der Seite konfigurieren, auf der wir die benutzerdefinierte Komponente verwenden möchten
usingComponentsDie Eigenschaft entspricht einem Objekt, der Schlüssel repräsentiert den Namen der zu verwendenden Komponente und der Wert repräsentiert den Pfad der zu verwendenden Komponente
- Wenn ich beispielsweise benutzerdefinierte Komponenten auf der Indexseite verwenden möchte, muss ich sie in der JSON-Datei der Indexseite konfigurieren
Nachdem die Konfiguration abgeschlossen ist, können Sie die benutzerdefinierte Komponente in der wxml-Datei der Konfigurationsseite verwenden
<section-info />
<section-info />
<section-info />
<section-info />
Hinweise :
Benutzerdefinierte Komponenten können auch auf andere benutzerdefinierte Komponenten verweisen, und die Referenzmethode ähnelt der Art und Weise, wie Seiten auf benutzerdefinierte Komponenten verweisen (unter Verwendung von
usingComponentsFeldern).Dem Stammverzeichnisnamen des Projekts, in dem sich benutzerdefinierte Komponenten und Seiten befinden, darf kein „wx-“ vorangestellt werden, andernfalls wird ein Fehler gemeldet.
Wenn eine in usingComponents von app.json deklarierte Komponente eine globale Komponente ist, können alle Seiten und Komponenten diese Komponente direkt verwenden, ohne sie separat auf der Seite zu registrieren.
Details zur Implementierung des Komponentenstils
Thema 1: Beeinflusst der Stil innerhalb der Komponente den Stil außerhalb der Komponente?
Schlussfolgerung 1: Der Klassenstil in der Komponente wirkt sich nur auf die Knoten in der Komponenten-wxml aus und wirkt sich nicht auf die Page-Seite aus, die auf die Komponente verweist.
- Wir verwenden weiterhin die oben beschriebenen Komponenten zum Testen
Schlussfolgerung 2: Der ID-Selektor, der Attribut-Selektor und der Tag-Selektor können nicht in der Komponente verwendet werden (können auf der Seite verwendet werden ), versuchen Sie es mit dem Klassen-Selektor
Thema 2: Einfluss externer Stile auf Stile in Komponenten
Fazit 1: Der Stil der extern verwendeten Klasse gilt nur für die Klasse des externen wxml und wirkt sich nicht innerhalb der Komponente aus.
Schlussfolgerung 2: Der extern verwendete ID-Selektor und der Attribut-Selektor wirken sich nicht auf die Komponente aus
Schlussfolgerung 3: Der Tag-Selektor wird extern verwendet, was sich auf die Komponente auswirkt ( daher wird der Tag-Selektor nicht empfohlen ) .
Thema 3: Wie man Klassen dazu bringt, sich gegenseitig zu beeinflussen
Im Component-Objekt können Sie eine options-Eigenschaft übergeben, die eine styleIsolation-Eigenschaft in der options-Eigenschaft hat.
styleIsolation hat drei Werte:
isoliert bedeutet, dass die Stilisolierung innerhalb und außerhalb der benutzerdefinierten Komponente aktiviert wird, die durch die Klasse angegebenen Stile beeinflussen sich nicht gegenseitig (Standardwert) ;
apply-shared bedeutet, dass der wxss-Stil der Seite die benutzerdefinierte Komponente beeinflusst, aber der in der benutzerdefinierten Komponente wxss angegebene Stil sich nicht auf die Seite auswirkt;
gemeinsam bedeutet, dass der WXSS-Stil der Seite die benutzerdefinierte Komponente beeinflusst und der in der WXSS der benutzerdefinierten Komponente angegebene Stil sich auch auf die Seite und andere Einstellungen auswirkt ( beide beeinflussen sich gegenseitig ) .
// components/section-info/section-info.js
Component({
options: {
styleIsolation: "shared"
}
})