Komponentendesignspezifikationen für die Entwicklung von WeChat-Miniprogrammen

Designspezifikationen für WeChat Mini-Programmkomponenten

Der Gedanke der komponentenbasierten Entwicklung zieht sich durch meinen Entwicklungs- und Designprozess. Von dieser Denkweise habe ich lange profitiert.

1. Wiederverwendbare Komponenten – reduziert die Menge an doppeltem Code
2. Komponenten als eigenständige Funktionseinheiten - leicht zu warten
3. Die Komponente wird als Vorlage verwendet, mit der verschiedene Attribute einfach berechnet werden können, anstatt wxs in wxml einzuführen
   

Im täglichen Prozess der Entwicklung von Komponenten für kleine Programme halte ich im Allgemeinen die folgenden Regeln ein:

1. Stilunabhängigkeit und Abhängigkeitsunabhängigkeit

Während der Komponentenentwicklung können Komponenten auf globale Stile zurückgreifen. Wenn Komponenten eingeführt werden, werden sie sowohl mit dem Seitenstil als auch mit dem globalen Stil gerendert.

Optionen:
    addGlobalClass: true,
    mehrereSlots: true
}

Aufgrund der Portabilität von Komponenten wird jedoch empfohlen, jede Komponente so zu konfigurieren, dass sie nicht auf globale Stile angewiesen ist.

Optionen:
    addGlobalClass: false,
    mehrereSlots: true
}

Wählen Sie für jede Komponente in der WXSS-Konfiguration dieser Komponente den gewünschten Stil aus.

Während der Komponentenentwicklung können Komponenten in app.js eingeführt werden, basierend auf

const app = getApp();

Im Hinblick auf die Portierbarkeit ist es jedoch sinnvoller, Storge zum Abrufen globaler Daten in Komponenten zu verwenden.

Auch wenn es von einigen JS-Dateien abhängt, können Sie die Datei im Komponentenverzeichnis ablegen und importieren.

Listener zum Festlegen von Eigenschaftswerten

Die Komponente kann von der Seite übergebene Werte empfangen, das Datenformat in der Komponente entspricht jedoch möglicherweise nicht den Anzeigeanforderungen der Seite und es müssen einige Anpassungen vorgenommen werden. Es wird empfohlen, diese Anpassungen in der Komponente zu implementieren. Änderungen an den Daten innerhalb der Komponente wirken sich nicht auf die Daten auf der Seite aus.

Eigenschaften:
    aktiv:{
      Typ: Nummer,
      Beobachter:Funktion(neuerWert,alterWert){
        //Daten vorverarbeiten}
    }
}

3. Alle Vorgänge, die den Seitenstapel ändern, werden von der Seite ausgeführt

Durch Klicken auf Komponente C auf Seite A gelangen Sie zu Seite E

Durch Klicken auf Komponente C auf Seite B gelangen Sie zu Seite F

In diesem Fall kann das Klickereignis zur Verarbeitung an die Seite übergeben werden und die Komponente gibt lediglich eine Ereignisbenachrichtigung aus. Das konkrete Sprungereignis wird durch die Funktion innerhalb der Seite umgesetzt.

Verwendung in Bauteilen:

this.triggerEvent('klicken',args)

Seite A:

<c-component bind:click="navtoPageE" />

Seite B:

<c-component bind:click="navtoPageF" />

Versuchen Sie, Komponenten nicht in Komponenten zu verschachteln

In der Komponente wurde eine Ladekomponente verwendet, die Anzeige der Ladekomponente wurde jedoch über Parameter gesteuert. Als das Problem auftrat, dass die Komponente nicht ausgeblendet werden konnte, konnte die spezifische Komponente nicht gefunden werden.

Komponenten definieren eine einheitliche Klasse

Dies soll den einheitlichen Aufruf einer Methode in der Komponente erleichtern, die häufig als Vorlage verwendet wird.

Lassen Sie acmp = this.selectAllComponents('.card')
acmp.forEach(Funktion (Element, Index) {
    ele.closeActionBar();
})

Verwenden des Komponentenlebenszyklus

Die Komponente unterstützt den Lebenszyklus. Einige Daten- oder Zählerfunktionen, die nur einmal initialisiert werden müssen, sollten im Anhang vervollständigt werden.

Lebensdauern:
    beigefügt(){
      dies.setData({
        openid:app.globalData.openid
      })
    }
}

Referenzdokumentation

WeChat Mini-Programme - So übertragen Sie Informationen und rufen Funktionen zwischen Seiten und Komponenten auf

WeChat Mini-Programme - Ein paar Tipps zur Beschleunigung der Entwicklung von Mini-Programmen

Zusammenfassen

Dies ist das Ende dieses Artikels über Komponentendesignspezifikationen für die Entwicklung von WeChat-Miniprogrammen. Weitere relevante Inhalte zu WeChat-Miniprogrammkomponenten finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!