Syntaxzusammenfassung der WXML-Vorlage des WeChat-Applets

Dieser Artikel vermittelt Ihnen relevantes Wissen über das WeChat Mini-Programm, das hauptsächlich die relevanten Inhalte zur WXML-Vorlagensyntax vorstellt, einschließlich Datenbindung, Ereignisbindung, bedingtem Rendering, Listenrendering und anderen Themen Ich hoffe, es wird für alle hilfreich sein. 🔜

1 Prinzipien der Bindung

① Definieren Sie Daten in Daten ② Verwenden Sie Daten in WXML

2

Daten

Definitionsseite Die Daten

liegen vor Definieren Sie in der .js -Datei, die der Seite entspricht, einfach die Daten im data

-Objekt:

3. Moustache Grammatisches Format Binden Sie die Daten in atData auf die zu rendernde Seite und verwenden Sie

mustache Grammatik (doppelte Klammern), um die Variablen einzuschließen. Ähnlich wie beim Interpolationsausdruck in Vue lautet das Syntaxformat:

4. Anwendungsszenarien von Moustache Syntax

Bind-Inhalt

Bind-Attribute Operation (ternäre Operationen , arithmetische Operationen usw.) 5. 6.

TERARY OFFICE

WXML

Vorlagensyntax

- Ereignisbindung:

1.

Was sind Veranstaltungen

                                                                                                                                                                      

1.

Was sind Events? Durch Ereignisse kann das Verhalten des Benutzers in der Rendering-Schicht zur Geschäftsverarbeitung an die Logikschicht zurückgemeldet werden. 2. Häufig verwendete Ereignisse in Miniprogrammen. Bindungsmethode tap

bindtap

oder

binden:tippen Unmittelbar nach dem Berühren des Fingers verlassen, ähnlich wie bei HTML klicken

Ereignis

input

bindinput oder bind:input

Eingabeereignis des Textfelds

Veränderung

bindchange oder bind:change

Wird ausgelöst, wenn sich der Status ändert

3. Attributliste des Ereignisobjekts

Wenn der Ereignisrückruf ausgelöst wird, wird ein Ereignisobjekt event empfangen. Seine detaillierten Attribute werden in der folgenden Tabelle angezeigt:

Eigenschaft	Typ	Beschreibung
Typ	String	Ereignistyp
Zeitstempel	Ganzzahl	Die Anzahl der Millisekunden, die seit dem Öffnen der Seite bis zum Ereignis vergangen sind wurde ausgelöst
target	Object	Eine Sammlung einiger Eigenschaftswerte der Komponente, die das Ereignis ausgelöst hat
currentTarget	Objekt	Eine Sammlung einiger Attributwerte der aktuellen Komponente
Detail	Objekt	Extrainformationen
Berührungen Array	Touch-Ereignisse, Array aktuell geänderter Touchpoint-Informationen	4. Der Unterschied zwischen Ziel und aktuellem Ziel aktuelles Ziel ist das aktuelles Ereignis Die gebundene Komponente . Ein Beispiel ist wie folgt: Wenn Sie auf die innere Schaltfläche klicken, breitet sich das Klickereignis in einer Blase nach außen aus und löst auch den Ereignishandler tap des äußeren aus ansehen . Zu diesem Zeitpunkt für die äußere Ansicht : 1.target zeigt auf die Quellkomponente, die das Ereignis ausgelöst hat, daher ist e.target intern Die Schaltfläche Komponente 2.currentTarget zeigt auf die Komponente, die gerade das Ereignis auslöst, daher ist e.currentTarget die aktuelle Ansicht . Komponente 5 . Das Syntaxformat von bindtap Im Miniprogramm gibt es in HTML kein onclick Mausklick-Ereignis, sondern die Maus Click-Ereignis wird durchgeleitet Tippen Sie auf Ereignis , um auf das Berührungsverhalten des Benutzers zu reagieren. ①Über bindtap können Sie tap Touch-Ereignisse an Komponenten binden. Die Syntax lautet wie folgt: ② Im .js der Seite Die entsprechende Ereignisverarbeitungsfunktion ist in der Datei definiert, und die Ereignisparameter werden über den formalen Parameter event empfangen (normalerweise wird als e abgekürzt): 6. Weisen Sie die Daten in data in der Event-Handler-Funktion zu Durch Aufruf von this.setData(dataObject ) Methode, Sie können die geben Seite Die Daten in data werden neu zugewiesen, das Beispiel ist wie folgt:                                     Parameter an den Event-Handler beim Binden des Events . Beispielsweise funktioniert der folgende Code nicht ordnungsgemäß: , da das Applet die Attributwerte von bindtap als Ereignisnamen behandelt, was dem Aufrufen eines Ereignisses mit Namen entspricht btnHandler(123) Ereignisbehandlungsfunktion. Sie können data- * benutzerdefinierte Attributparameter für Komponenten bereitstellen, wobei * den Namen des Parameters darstellt. Der Beispielcode lautet wie folgt: Finally : 1 Info wird als Parameter Name 2 Wert 2 geparst wird als Parameterwert analysiert. In der Ereignisverarbeitungsfunktion kann der Wert von spezifischem Parameter über event.target.dataset.Parametername, Beispielcode As abgerufen werden folgt: 8. Das Syntaxformat von bindinput , antworten Sie auf das Textfeld über das Ereignis input Nehmen Sie an der Veranstaltung teil, Das Grammatikformat ist wie folgt: ① Bindinput kann das Eingabeereignis für das Textfeld binden: ② . Dateibearbeitung Funktion: 9. Datensynchronisierung zwischen Textfeld und Daten implementieren Implementierungsschritte: ① Daten definieren ② ​​Rendering-Struktur ③ Verschönerungsstil Bindung: Eingabe: Ereignishandler: 1. wx:if Verwenden Sie im Miniprogramm wx:if="{ { condition }}" Um festzustellen, ob der Codeblock gerendert werden muss: Sie Sie können auch wx:elif und wx:else verwenden, um else Judgement: ​​​​​ ​​​​​ hinzuzufügen Steuern Sie die Anzeige und Ausblenden mehrerer Komponenten gleichzeitig , können Sie ein -Tag verwenden, um mehrere Komponenten einzuschließen, und wx:if verwenden, um Attribute auf dem zu steuern Tag, Beispiele sind wie folgt:    # Führen Sie kein Rendering auf der Seite durch. 3. Versteckt " kann auch die Ein- und Ausblendung steuern Elemente:            4. wx:if und versteckt    ① Betriebsmethoden sind unterschiedlich1 wx:if mit Elemente dynamisch erstellen und entfernen , Anzeige und Ausblenden von Elementen steuern2 ausgeblendet Elemente steuern durch Stilwechsel ( Anzeige: keine/blockieren; ) Ein- und Ausblenden ② Verwendungsvorschläge1 Beim häufigen Wechsel wird empfohlen, versteckt zu verwenden. 2 Kontrollbedingungen sind komplex Wann , es wird empfohlen, wx:if mit wx:elif 、wx:else zu verwenden Zwischen Anzeigen und Ausblenden wechseln ​​​​​​via wx:for kann auf dem angegebenen Array basieren, Schleife zum Rendern wiederholter Komponentenstrukturen, das Syntaxbeispiel lautet wie folgt:                 2. Geben Sie den Index und den Variablennamen des aktuellen Elements manuell an Der Index des aktuellen Schleifenelements Der Variablenname von 2 kann mit wx:for-item angegeben werden. Der Variablenname von aktuelles Element lautet wie folgt: 3 . Die Verwendung von wx:key ähnelt der Verwendung von :key beim Rendern von Vue Beim Implementieren der Listenwiedergabe im Applet wird ebenfalls empfohlen, die gerenderte Liste zu verwenden. Das Element gibt einen eindeutigen Schlüsselwert an, wodurch die Rendering-Effizienz verbessert wird. Der Beispielcode lautet wie folgt:

Das obige ist der detaillierte Inhalt vonSyntaxzusammenfassung der WXML-Vorlage des WeChat-Applets. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!