Detaillierte Einführung in WXML, WXSS und JS für die WeChat-Entwicklung

Dieser Artikel stellt hauptsächlich die relevanten Informationen zur Einführung und detaillierten Erklärung von WXML, WXSS und JS des WeChat-Applets vor.

Ich habe vor ein paar Tagen viel Zeit damit verbracht . Listen Sie dann einige experimentelle Ergebnisse als Referenz auf.

Es gibt einen großen Unterschied zwischen der Simulation mit Entwicklungstools und der realen Maschine. Ich schlage außerdem vor, dass es zuverlässiger ist, das Debugging auf einer echten Maschine durchzuführen.

1. WXML (HTML)

1.1 Das WXML des Miniprogramms ist nicht so tolerant wie HTML und das einzelne Tag muss mit /> enden ;. Andernfalls wird ein Fehler gemeldet.

1.2 Das offiziell empfohlene Basis-Tag ist ein Block-Tag und . Und der WXML-Parser entfernt alle Attribute des Tags, die nicht auf der Whitelist stehen. Klasse, ID und Daten sollten alle in der Whitelist sein, aber es wird kein href oder ähnliches geben, wenn Sie also herkömmliche HTML-Tags verwenden Es ist theoretisch möglich, eine Seite zu erstellen, aber es handelt sich hierbei um Inline-Tags und Sie müssen die Anzeige selbst festlegen.

1.3 Die Scroll-Oben- und Links-Scroll-Funktionen der Scroll-Ansicht können die Scroll-Position der Scroll-Ansicht ändern. Nachdem der Benutzer einen Bildlauf durchgeführt hat, ändert das Applet jedoch nicht die Zuweisung von „Bildlauf nach oben“ und „Bildlauf nach links“ (es handelt sich nicht um eine bidirektionale Synchronisierung). Wenn Sie zu diesem Zeitpunkt setData verwenden, um es zu ändern, ist die Zuweisung von Scroll-Top und Scroll-Links dieselbe wie beim letzten Wert. Das Applet wendet diese Änderung nicht an, sodass die Einstellung aufgrund der Leistung nicht wirksam wird. Zu diesem Zeitpunkt können Sie nur zuerst einen anderen Wert festlegen und ihn dann zurücksetzen (dies kann auch widerspiegeln, dass die setData-Methode synchron ist). scroll-view erhält die Scroll-Position, die nur über die Rückruffunktion bindscroll abgerufen werden kann. Wenn Sie also die Scroll-Position benötigen, speichern Sie sie bitte selbst. Scroll-View hat immer noch das stinkende Problem des Scrollens von Webview. Wenn die erste Aktion darin besteht, an der oberen Position nach unten zu scrollen, kann die Hand nicht scrollen, egal wie Sie Scroll-Top auf 0 setzen. aber zu 1. ok.

1.4-Eingabe unterstützt derzeit nur Text auf der linken Seite, andere sind nicht möglich (der Simulator kann). Wenn Sie ein Formular erstellen, wird empfohlen, die Eingabe und andere Formularelemente in das Formular einzufügen. Beim Senden von from-Triggern wird der Name-Wert aller internen Formularelemente zurückgegeben. Andernfalls kann es nur durch Binden der Änderungsereignisse aller Formularelemente erreicht werden, was sehr mühsam ist.

1.5 Nur eine Checkbox-Gruppe hat ein Änderungsereignis, ein einzelnes Checkbox-Ereignis jedoch nicht. Wenn Sie nur ein Checkbox-Element haben und es Ihrer Meinung nach lästig und unansehnlich ist, eine Checkbox-Gruppe außerhalb zu haben, können Sie switch verwenden Geben Sie stattdessen „checkbox“ ein. (WeChat-Miniprogramm-Anwendungskonto-Kommunikationsgruppe 563752274)

1.6 Die Kartenkonstruktion führt derzeit zu Ladefehlern, wenn direkt auf der ersten Seite der App geladen wird. Muss nach onLoad hinzugefügt werden. Sie können zuerst wx:if="false" verwenden und es dann nach onLoad in true ändern.

1.7 Map, Canvas ist so, als würde man eine native Komponente in der Webansicht abdecken. Sie können nicht durch Überlauf und Elemente abgedeckt werden. Sie können denken, dass z-index nicht darüber platziert werden kann, egal wie hoch es geschrieben wird. Daher wird nicht empfohlen, elastische Ebenen und Maskierungsebenen auf der Seite zu erstellen. Die Leinwand kann nicht in der Bildlaufansicht platziert werden und der Bildlauf wird an der Anfangsposition positioniert. Wenn Sie die Hintergrundfarbe für die Leinwand festlegen, werden Sie feststellen, dass der Hintergrundfarbblock mitläuft, das Bild jedoch nicht.

2. WXSS(CSS)

2.1 WXSS ist CSS sehr ähnlich, grundsätzlich wird alles CSS unterstützt und das Miniprogramm stellt auch die Rpx-Einheit bereit . Eine Bildschirmbreite beträgt 750rpx. Es wird empfohlen, dies als Layout zu verwenden. Es gibt jedoch einige kleinere Unterschiede, die ich unten auflisten werde

2.2 WXSS unterstützt keine verschachtelten Klammern ({{}}). Keyframes und CSS-Animationen sind also nicht verfügbar, aber Übergänge sind verfügbar.

2.3 Die im aktuellen Test eingeführten Schriftarten sind ebenfalls nicht verfügbar. Die zuvor in WXML genannten Inhalte können nicht in SVG verwendet werden. Daher können Icons derzeit nur in Form von Bildern erstellt werden.

2.4 Lokale Ressourcen können nicht in WXSS eingeführt werden, es können nur Online-Ressourcen verwendet werden (der Simulator ist verfügbar, aber glauben Sie es nicht), Sie können base64 verwenden. (WeChat-Applet-Anwendungskonto-Kommunikationsgruppe 563752274)

2.5 Die WXSS-Regel unterstützt keine festgelegte Verbindung. Sie können body .main {background:#000;} also nicht so schreiben. Es ist also ziemlich mühsam zu schreiben. Jede Klasse ist sehr lang, sonst besteht die Gefahr doppelter Namen. Allerdings wird das Schreiben wie li.current {color: red;} unterstützt, und nach und before Pseudoklassen werden unterstützt, aber first-child last- Child nth wird nicht unterstützt.

2.6 Die Abdeckungsbeziehung zwischen app.wxss und dem wxss jeder Seite ist: Wenn es eine Regel mit demselben Namen gibt, überschreibt die Seite die App, nicht die Zusammenführung.

3. JS

3.1 Die Laufumgebung von JS und die Laufumgebung von View sind isoliert. JS kann die Ansicht nur über den Zeitpunkt der Ereigniserfassung und die setData-Methode ändern, um die Daten zu ändern.

3.2 JS Derzeit besteht ein großes Problem darin, dass die Breite und Höhe der Seite auf px-Ebene nicht ermittelt werden kann. Die Einheiten aller Ereignisrückrufe sind px-Ebene statt rpx, aber die Konvertierungsbeziehung zwischen dem aktuellen rpx und px ist nicht bekannt. Beispielsweise verwenden Sie eine Leinwand zum Zeichnen von Bildern. Man weiß nicht einmal, wo die Grenze ist, was wirklich ärgerlich ist.

3.3 Wie oben erwähnt, löst die setData-Methode keine Ansichtsänderung aus, wenn der vorherige Wert und der nächste Wert gleich sind (siehe 1.3)

3.4 Kann verwendet werden, wenn „Navigieren“ zum Springen verwendet wird Die queryString-Methode folgt der relativen Adresse und das onLoad-Ereignis wird im Eingabeparameter übergeben (der in ein Objekt konvertiert wird). Beim Zurücknavigieren gibt es jedoch keinen offiziellen Datenkommunikationsmechanismus. Sie können getApp() verwenden, um das globale Objekt abzurufen, ihm etwas hinzuzufügen und es selbst zu implementieren. Ich werde nicht über die maximale Anzahl von 5 Navigatoren sprechen.

3.5 Nachdem Canvas getActions aufgerufen wurde, werden die Aktionen gelöscht. Das heißt, getActions wird zweimal hintereinander aufgerufen und das zweite Mal ist ein leeres Array.

3.6 Das Entwicklertool wurde von nw geschrieben. Ich habe mir den Quellcode des Rocks angesehen. Der WXML im Entwicklertool verfügt über einen Parser- und Reassemblierungsprozess. Dies bedeutet jedoch nicht, dass das Gadget nativ ist und einige Fehler in Webview ähneln. Ich denke immer noch, dass es wie Webview aussieht, aber Komponenten wie Karte und Canvas verwenden die native Ansicht und decken sie dann in Webview ab. Gefühl. Aber wie dem auch sei, die Tatsache, dass der Autofokus die Tastatur automatisch aufrufen kann, ist schon ein großes Kompliment.

[Verwandte Empfehlungen]

1. Quellcode der WeChat-Plattform herunterladen

2 🎜> 3. WeChat Lala Takeaway 2.2.4 entschlüsselt die Open-Source-Version des WeChat Rubik's Cube-Quellcodes

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in WXML, WXSS und JS für die WeChat-Entwicklung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!