Detaillierte Einführung in das WeChat-Applet wxapp Canvas Canvas

In diesem Artikel werden hauptsächlich relevante Informationen zur Einführung und detaillierte Erklärung von WXML, WXSS und JS des WeChat-Applets vorgestellt.

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

0. Es gibt einen großen Unterschied zwischen der Simulation mit Entwicklungstools und der realen Maschine. 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 Die Scroll-Oben- und Links-Scroll-Funktionen der Scroll-Ansicht können die Scroll-Position der Scroll-Ansicht ändern. Nachdem der Benutzer jedoch gescrollt hat, ändert das Applet die Zuweisung von „Scroll-oben“ und „Scroll-links“ nicht (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 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, 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, ein einzelnes Kontrollkästchen jedoch nicht. Wenn Sie nur ein Kontrollkästchen haben und es für lästig und unansehnlich halten, eine Kontrollkästchen-Gruppe außerhalb zu haben, können Sie switch verwenden Geben Sie stattdessen „checkbox“ ein.

Die Kartenkomponente 1.6 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 ist so, als würde man eine native Komponente in der Webansicht abdecken. Sie können nicht überfüllt oder mit Elementen bedeckt werden. Sie können davon ausgehen, dass der Z-Index nicht darüber platziert werden kann. 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 Satzzuordnung. 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;} sowie 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 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 Daten zu ändern.

3.2 JS hat derzeit ein großes Problem, da 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 statt rpx, aber die aktuellen rpx und px sind 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 Navigieren findet jedoch keine offizielle Datenkommunikation statt zurück. 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 überdecken sie dann in Webview. 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, es kann Ihnen helfen, vielen Dank für Ihre Unterstützung dieser Website!

Weitere ausführliche Einführungsartikel zum WeChat-Applet WXApp Canvas Canvas finden Sie auf der chinesischen PHP-Website!