Syntaxzusammenfassung der WXML-Vorlage des WeChat-Applets

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

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

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: