Einführung und ausführliche Erklärung des WeChat Mini-Programms WXML, WXSS und JS

Ich hatte vor ein paar Tagen Probleme. Listen Sie dann einige experimentelle Ergebnisse als Referenz auf.

0. Der Unterschied zwischen der Simulation mit Entwicklungstools und der realen Maschine ist immer noch relativ groß. Ich schlage außerdem vor, dass das Debuggen auf einer echten Maschine zuverlässiger ist.

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 Darstellung selbst festlegen.

1.3 Scroll-oben und links scrollen in 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.

Die 1.4-Eingabe unterstützt derzeit nur Text auf der linken Seite, andere Eingaben sind nicht möglich (der Simulator kann dies). Wenn Sie ein Formular erstellen, wird empfohlen, Eingaben und andere Formularelemente in das Formular einzufügen. Beim Absenden 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 die Checkbox-Gruppe verfügt über ein Änderungsereignis, eine einzelne Checkbox jedoch nicht. Wenn Sie nur eine Checkbox haben und es für problematisch und unansehnlich halten, eine Checkbox-Gruppe außerhalb dieser zu haben, können Sie den Schalter type="checkbox" verwenden. stattdessen. (WeChat-Miniprogramm-Anwendungskonto-Kommunikationsgruppe 563752274)

1.6 Die Kartenkomponente kann derzeit nicht geladen werden, wenn sie 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 fühlt sich an, als würde eine native Komponente über der Webansicht abgedeckt. Sie können nicht überfüllt oder mit Elementen bedeckt werden, egal wie hoch der Z-Index ist, er kann nicht darüber platziert werden. 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. 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 im Folgenden 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 Derzeit sind die im Test eingeführten Schriftarten nicht verfügbar und 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) und base64 kann verwendet werden. (WeChat-Miniprogramm-Anwendungskonto-Kommunikationsgruppe 563752274)

2.5 Die WXSS-Regel unterstützt keine Mengenzuordnung. 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. Es unterstützt jedoch Schreibmethoden wie li.current {color: red;} und After- und Before-Pseudoklassen, unterstützt jedoch keine Pseudoklassen wie First-Child, Last-Child, Nth-Child.

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

3.JS

3.1 Die laufende Umgebung von JS und die laufende Umgebung 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 hat derzeit das große Problem, dass es nicht in der Lage ist, die Breite und Höhe der Seite auf px-Ebene zu ermitteln. Die Einheiten aller Ereignisrückrufe sind px-Ebene anstelle von rpx, die Konvertierungsbeziehung zwischen dem aktuellen rpx und px jedoch nicht bekannt. Beispielsweise verwenden Sie 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 Wenn Sie zum Springen Navigieren verwenden, können Sie queryString verwenden, um der relativen Adresse zu folgen. Das onLoad-Ereignis wird im Eingabeparameter übergeben (es wird in ein Objekt konvertiert), 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 Die Entwicklertools wurden von nw geschrieben. Ich habe mir den Quellcode des Rocks angesehen. Der WXML in den Entwicklertools 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.

Vielen Dank fürs Lesen, ich hoffe, das hilft allen und vielen Dank für Ihre Unterstützung dieser Website!

Weitere Artikel zur Einführung und detaillierten Erläuterung von WXML, WXSS und JS in WeChat-Miniprogrammen finden Sie auf der chinesischen PHP-Website!