Die Entwicklererfahrung
Nachdem ich nun Minianwendungen an sich behandelt habe, möchte ich mich auf die Entwicklererfahrung für die verschiedenen Super-App-Plattformen konzentrieren. Die Entwicklung von Minianwendungen auf allen Plattformen erfolgt in IDEs, die von den Super-App-Plattformen kostenlos zur Verfügung gestellt werden. Es gibt zwar noch mehr, aber ich möchte mich auf die vier beliebtesten konzentrieren und zum Vergleich eine fünfte für Quick App.
Minianwendungs-IDEs
Wie bei den Super-Apps sind die meisten IDEs nur auf Chinesisch verfügbar. Sie sollten darauf achten, dass Sie die chinesische Version installieren und nicht eine manchmal verfügbare englische (oder ausländische) Version, da diese möglicherweise nicht auf dem neuesten Stand ist. Wenn Sie macOS-Entwickler sind, beachten Sie, dass nicht alle IDEs signiert sind. Das bedeutet, dass macOS die Ausführung des Installationsprogramms verweigert. Sie können dies auf eigenes Risiko umgehen, wie in der Apple-Hilfe beschrieben .
Minianwendungs-Startprojekte
Um schnell mit der Entwicklung von Minianwendungen zu beginnen, bieten alle Super-App-Anbieter Demo-Apps an, die sofort heruntergeladen und getestet werden können und manchmal auch in die Assistenten für „Neues Projekt“ der verschiedenen IDEs integriert sind.
Entwicklungsablauf
Nach dem Starten der IDE und dem Laden oder Erstellen einer (Demo-)Minianwendung besteht der erste Schritt immer darin, sich anzumelden. Normalerweise müssen Sie nur einen QR-Code mit der Super-App scannen (in der Sie bereits angemeldet sind), der von der IDE generiert wird. Nur sehr selten müssen Sie ein Passwort eingeben. Sobald Sie angemeldet sind, kennt die IDE Ihre Identität und Sie können mit dem Programmieren, Debuggen, Testen und Einreichen Ihrer App zur Überprüfung beginnen. Im Folgenden sehen Sie Screenshots der fünf IDEs, die im vorherigen Absatz erwähnt wurden.
Wie Sie sehen, sind die grundlegenden Komponenten aller IDEs sehr ähnlich. Sie haben immer einen Code
Editor, der auf dem Monaco Editor basiert, demselben Projekt
, das auch VS Code unterstützt. In allen IDEs gibt es einen Debugger, der auf dem Chrome-Entwicklertools-Frontend basiert und einige Änderungen aufweist. Mehr dazu später (siehe Debugger). Die IDEs an sich werden
entweder als NW.js oder als Electron Apps implementiert,
die Simulatoren in den IDEs werden als
NW.js <webview> Tag oder
Electron <webview> Tag realisiert, die wiederum auf
einem Chromium <webview> Tag basieren. Wenn Sie sich für
die Interna der IDE interessieren, können Sie sie oft einfach mit den Chrome-Entwicklertools über die Tastatur
Tastenkombination Strg+Alt+I (oder
Befehl+Option+I auf dem Mac) untersuchen.
<webview>-Tag realisiert ist.
Testen und Debuggen mit Simulator und auf echten Geräten
Der Simulator ist mit dem Gerätemodus der Chrome-Entwicklertools' vergleichbar. Sie können verschiedene Android- und iOS-Geräte simulieren, die Skalierung und Geräteausrichtung ändern, aber auch verschiedene Netzwerkzustände, Speicherauslastung, ein Barcode-Lesen, unerwartete Beendigung und den Dark-Modus simulieren.
Der integrierte Simulator reicht zwar aus, um ein grobes Gefühl dafür zu bekommen, wie sich die App verhält, aber Tests auf Geräten sind wie bei regulären Web-Apps unersetzlich. Das Testen einer Minianwendung in der Entwicklung ist nur einen QR-Code-Scan entfernt. Wenn Sie beispielsweise in ByteDance DevTools einen QR-Code scannen, der dynamisch von der IDE generiert wurde, wird mit einem echten Gerät eine in der Cloud gehostete Version der Minianwendung aufgerufen, die dann sofort auf dem Gerät getestet werden kann. Bei ByteDance funktioniert das so: Die URL hinter dem QR-Code
(Beispiel) leitet zu einer gehosteten Seite
(Beispiel) weiter,
die Links mit speziellen URI-Schemata wie z. B. snssdk1128:// enthält, um eine Vorschau der Mini
anwendung in den verschiedenen Super-Apps von ByteDance wie Douyin oder Toutiao zu sehen
(hier ist ein Beispiel).
Andere Super-App-Anbieter verwenden keine Zwischenseite, sondern öffnen die Vorschau direkt.
Eine noch überzeugendere Funktion ist das cloudbasierte Remote-Debugging der Vorschau. Nachdem Sie einfach einen ebenfalls von der IDE generierten speziellen QR-Code gescannt haben, wird die Minianwendung auf dem physischen Gerät geöffnet. Auf dem Computer wird ein Chrome-Entwicklertools-Fenster für das Remote-Debugging ausgeführt.
Debugger
Fehlerbehebung bei Elementen
Die Fehlerbehebung bei Minianwendungen ist allen bekannt, die schon einmal mit den Chrome-Entwicklertools gearbeitet haben. Es gibt jedoch einige wichtige Unterschiede, die den Workflow auf Minianwendungen zuschneiden. Anstelle des Bereichs „Elemente“ der Chrome-Entwicklertools haben Minianwendungs-IDEs einen benutzerdefinierten Bereich, der auf ihren jeweiligen HTML-Dialekt zugeschnitten ist. Bei WeChat heißt der Bereich beispielsweise „Wxml“, was für WeiXin Markup Language steht. In Baidu DevTools heißt er „Swan Element“. ByteDance DevTools nennt ihn „Bxml“. Alipay nennt ihn AXML und Quick App bezeichnet den Bereich einfach als UX. Ich werde später auf diese Auszeichnungssprachen eingehen.
<image> Elements mit WeChat DevTools.
Benutzerdefinierte Elemente unter der Haube
Bei der Untersuchung der WebView auf einem echten Gerät über about://inspect/#devices
wird deutlich, dass WeChat DevTools die Wahrheit bewusst verschwiegen hat. Wo WeChat DevTools ein
<image> angezeigt hat, sehe ich tatsächlich ein benutzerdefiniertes Element namens <wx-image> mit einem <div>
als einzigem untergeordneten Element. Interessanterweise verwendet dieses benutzerdefinierte Element kein
Shadow DOM. Mehr zu
diesen Komponenten später.
<image>-Elements mit WeChat DevTools wird festgestellt, dass es sich tatsächlich um ein benutzerdefiniertes <wx-image>-Element handelt.
CSS-Fehlerbehebung
Ein weiterer Unterschied ist die neue Längeneinheit rpx für responsive Pixel in den verschiedenen CSS-Dialekten
(mehr zu dieser Einheit später). WeChat DevTools verwendet geräteunabhängige CSS-Längeneinheiten, um die Entwicklung für verschiedene Gerätegrößen intuitiver zu gestalten.
200rpx 0) angegebenen Abstands einer Ansicht mit WeChat DevTools.
Leistungsprüfung
Die Leistung ist für Minianwendungen von entscheidender Bedeutung. Daher ist es nicht verwunderlich, dass WeChat DevTools und einige andere Entwicklertools ein integriertes, von Lighthouse inspiriertes Prüfungstool haben. Die Schwerpunkte der Prüfungen sind „Gesamt“, „Leistung“, „Erfahrung“ und „Best Practice“. Die Ansicht der IDE kann angepasst werden. Im Screenshot unten habe ich den Code-Editor vorübergehend ausgeblendet, um mehr Platz für das Prüfungstool zu haben.
API-Mocking
Anstatt dass der Entwickler einen separaten Dienst einrichten muss, ist das Mocking von API-Antworten direkt in WeChat DevTools enthalten. Über eine benutzerfreundliche Oberfläche kann der Entwickler API-Endpunkte und die gewünschten Mock-Antworten einrichten.
Danksagungen
Dieser Artikel wurde von Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent, und Keith Gu überprüft.