Für Entwickler
Nachdem ich nun per se Mini-Apps behandelt habe, möchte ich mich auf die Entwicklererfahrung für die verschiedenen Super-App-Plattformen konzentrieren. Mini-Apps werden auf allen Plattformen in IDEs entwickelt, die von den Super-App-Plattformen kostenlos bereitgestellt werden. Es gibt noch mehr. Ich möchte mich auf die vier beliebtesten und auf eine fünfte für Quick App konzentrieren.
Mini-App-IDEs
Wie die Super-Apps sind die meisten IDEs nur auf Chinesisch verfügbar. Sie sollten sicherstellen, dass Sie die chinesische Version und keine manchmal verfügbare englische oder ausländische Version installieren, da diese möglicherweise nicht auf dem neuesten Stand ist. Beachten Sie als macOS-Entwickler, dass nicht alle IDEs signiert sind. Das bedeutet, dass macOS das Installationsprogramm ablehnt. Sie können dies auf eigenes Risiko umgehen, wie in der Apple-Hilfe beschrieben.
- WeChat-Entwicklertools
- Alipay-Entwicklertools
- Baidu-Entwicklertools
- ByteDance-Entwicklertools
- Quick App-Entwicklertools
Mini-App-Startprojekte
Für einen schnellen Einstieg in die Entwicklung von Mini-Apps 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-)Mini-App besteht der erste Schritt immer der Anmeldung. Normalerweise müssen Sie nur einen von der IDE generierten QR-Code mit der Super-App (in der Sie bereits angemeldet sind) scannen. In äußerst seltenen Fällen muss ein Passwort eingegeben werden. Sobald Sie angemeldet sind, kennt die IDE Ihre Identität und Sie können mit dem Programmieren, Debuggen und Testen beginnen und Ihre App zur Überprüfung einreichen. Im Folgenden finden Sie Screenshots der fünf IDEs, die im obigen Absatz erwähnt wurden.
![Anwendungsfenster der WeChat-Entwicklertools mit Simulator, Code-Editor und Debugger.](https://web.dev/static/articles/mini-apps/mini-app-devtools/image/wechat-devtools-applicati-e7bdd4cc5967b.png?authuser=6&hl=de)
![Anwendungsfenster der Alipay DevTools mit Code-Editor, Simulator und Debugger.](https://web.dev/static/articles/mini-apps/mini-app-devtools/image/alipay-devtools-applicati-6f47f9ec8e0f1.png?authuser=6&hl=de)
![Baidu DevTools-Anwendungsfenster mit Simulator, Code-Editor und Debugger.](https://web.dev/static/articles/mini-apps/mini-app-devtools/image/baidu-devtools-applicatio-f4c5cc799b3e1.png?authuser=6&hl=de)
![Anwendungsfenster der ByteDance-Entwicklertools mit Simulator, Code-Editor und Debugger.](https://web.dev/static/articles/mini-apps/mini-app-devtools/image/bytedance-devtools-applic-1f60b6ef6e2c7.png?authuser=6&hl=de)
![Quick App DevTools-Anwendungsfenster mit Code-Editor, Simulator und Debugger.](https://web.dev/static/articles/mini-apps/mini-app-devtools/image/quick-app-devtools-applic-5d28bf9a61062.png?authuser=6&hl=de)
Wie Sie sehen, sind die grundlegenden Komponenten aller IDEs sehr ähnlich. Sie haben immer einen Codeeditor, der auf dem Monaco-Editor basiert. Das ist dasselbe Projekt, das auch VS Code unterstützt. In allen IDEs gibt es einen Debugger, der auf dem Front-End der Chrome-Entwicklertools basiert, mit einigen Änderungen, zu denen später mehr (siehe Debugger). Die IDEs per se werden entweder als NW.js- oder Electron-Anwendungen implementiert. Die Simulatoren in den IDEs werden als NW.js <webview>
-Tag oder Electron <webview>
-Tag implementiert, die wiederum auf einem Chromium <webview>
-Tag basieren. Wenn Sie sich für die IDE-internen Elemente interessieren, können Sie sie oft einfach mit den Chrome-Entwicklertools überprüfen. Dazu verwenden Sie die Tastenkombination Strg + Alt + I (oder Befehlstaste + Wahltaste + I auf dem Mac).
![Chrome-Entwicklertools, mit denen die Entwicklertools von Baidu geprüft werden. Im Bereich „Elemente“ ist das WebView-Tag des Simulators zu sehen.](https://web.dev/static/articles/mini-apps/mini-app-devtools/image/chrome-devtools-used-ins-107c9e255b2fa.png?authuser=6&hl=de)
<webview>
-Tag realisiert ist.
Simulator und Tests auf echten Geräten sowie Fehlerbehebung
Der Simulator ist mit dem Gerätemodus der Chrome-Entwicklertools vergleichbar. Du kannst verschiedene Android- und iOS-Geräte simulieren, den Maßstab und die Geräteausrichtung ändern, aber auch verschiedene Netzwerkzustände, Speicherauslastung, ein Barcode-Leseereignis, eine unerwartete Beendigung und den dunklen Modus simulieren.
Der integrierte Simulator kann zwar ausreichen, um ein ungefähres Gefühl für das Verhalten der App zu bekommen, aber Tests auf dem Gerät sind wie bei normalen Webanwendungen unersetzlich. Zum Testen einer Mini-App in der Entwicklung
ist nur ein QR-Code-Scan entfernt. Wenn beispielsweise in den ByteDance-Entwicklertools ein von der IDE dynamisch generierter QR-Code mit einem echten Gerät gescannt wird, gelangt er zu einer in der Cloud gehosteten Version der Mini-App, die sofort auf dem Gerät getestet werden kann. Bei ByteDance funktioniert dies so, dass die URL hinter dem QR-Code (Beispiel) zu einer gehosteten Seite (Beispiel) weiterleitet, die Links mit speziellen URI-Schemata wie z. B. snssdk1128://
enthält, um die Mini-App in den verschiedenen ByteDance-Super-Apps wie Douyin oder Toutiao als Vorschau anzusehen (Beispiel).
Bei anderen Super-App-Anbietern gibt es keine Zwischenseite, sondern öffnen die Vorschau direkt.
![ByteDance DevTools mit einem QR-Code, den der Nutzer mit der Douyin App scannen kann, um die aktuelle Mini-App auf seinem Gerät zu sehen](https://web.dev/static/articles/mini-apps/mini-app-devtools/image/bytedance-devtools-showin-5971d90f52171.png?authuser=6&hl=de)
![Zwischen-Landingpage für die Vorschau einer ByteDance-Mini-App in verschiedenen Super-Apps des Unternehmens, geöffnet in einem regulären Desktop-Browser für das Reverse Engineering des Prozesses.](https://web.dev/static/articles/mini-apps/mini-app-devtools/image/intermediate-landing-page-406369c8a848.png?authuser=6&hl=de)
Eine noch überzeugendere Funktion ist die cloudbasierte Fehlerbehebung per Fernzugriff. Nachdem einfach ein spezieller, ebenfalls IDE-generierter QR-Code gescannt wurde, wird die Mini-App auf dem physischen Gerät geöffnet. Auf dem Computer läuft ein Chrome-Entwicklertools-Fenster für das Remote-Debugging.
![Auf einem Smartphone wird eine Mini-App ausgeführt, auf der Teile der Benutzeroberfläche hervorgehoben sind, die durch den Debugger der ByteDance DevTools auf einem Laptop geprüft werden.](https://web.dev/static/articles/mini-apps/mini-app-devtools/image/a-mobile-phone-running-m-042b833648b9.png?authuser=6&hl=de)
Debugger
Fehlerbehebung für Elemente
Die Mini-App-Fehlerbehebung ist jedem, der jemals mit den Chrome-Entwicklertools gearbeitet hat, sehr vertraut. Es gibt jedoch einige wichtige Unterschiede, die den Workflow auf Mini-Apps zugeschnitten machen. Anstelle des Bereichs „Elemente“ in den Chrome-Entwicklertools haben Mini-App-IDEs einen benutzerdefinierten Bereich, der auf ihren jeweiligen HTML-Dialekt zugeschnitten ist. Im Fall von WeChat heißt das Panel beispielsweise Wxml, was für WeiXin Markup Language steht. In den Baidu-Entwicklertools heißt es Swan-Element. ByteDance DevTools nennt es Bxml. Alipay nennt ihn AXML und in Quick App wird der Bereich einfach als UX bezeichnet. Auf diese Auszeichnungssprachen werde ich später genauer eingehen.
![Bild mit dem Wxml-Bereich der WeChat-Entwicklertools überprüfen Sie sehen, dass das verwendete Tag ein „Bild“-Tag ist.](https://web.dev/static/articles/mini-apps/mini-app-devtools/image/inspecting-image-wechat-d732811586a65.png?authuser=6&hl=de)
<image>
-Element mit den WeChat-Entwicklertools prüfen.
Individuelle Funktionen
Die Überprüfung von WebView auf einem echten Gerät über about://inspect/#devices hat ergeben, dass die WeChat-Entwicklertools absichtlich die Wahrheit verbergen. Wenn die WeChat-Entwicklertools ein <image>
angezeigt haben, sehe ich mir ein benutzerdefiniertes Element namens <wx-image>
mit einem <div>
als einziges untergeordnetes Element an. Beachten Sie, dass dieses benutzerdefinierte Element kein Shadow DOM verwendet. Weitere Informationen zu diesen Komponenten finden Sie später.
![Untersuchung einer WeChat-Mini-App, die auf einem echten Gerät mit den Chrome-Entwicklertools ausgeführt wird. Wenn die WeChat-Entwicklertools gemeldet haben, dass ich ein „image“-Tag sehe, zeigen die Chrome-Entwicklertools, dass es sich tatsächlich um ein benutzerdefiniertes „wx-image“-Element handelt.](https://web.dev/static/articles/mini-apps/mini-app-devtools/image/inspecting-wechat-mini-a-54fc65cc5ce63.png?authuser=6&hl=de)
<image>
-Elements mit den WeChat-Entwicklertools zeigt, dass es sich tatsächlich um ein benutzerdefiniertes <wx-image>
-Element handelt.
CSS-Debugging
Ein weiterer Unterschied ist die neue Längeneinheit rpx
für responsive Pixel in den verschiedenen CSS-Dialekten. Weitere Informationen zu dieser Einheit finden Sie weiter unten. Die WeChat-Entwicklertools verwenden geräteunabhängige CSS-Längeneinheiten, um die Entwicklung für verschiedene Gerätegrößen intuitiver zu gestalten.
![Es wird eine Ansicht mit einem angegebenen Abstand von oben und unten von „200 rpx“ in den WeChat-Entwicklertools geprüft.](https://web.dev/static/articles/mini-apps/mini-app-devtools/image/inspecting-view-a-speci-d17a746cb7bfb.png?authuser=6&hl=de)
200rpx 0
) angegebene Abstand einer Ansicht geprüft.
Leistungsprüfung
Bei Mini-Apps steht die Leistung an erster Stelle. Daher ist es keine Überraschung, dass die WeChat- und andere Entwicklertools ein von Lighthouse inspiriertes Prüftool enthalten. Die Schwerpunkte der Audits sind Gesamtsumme, Leistung, Erfahrung und Best Practices. Die IDE-Ansicht kann angepasst werden. Im folgenden Screenshot habe ich den Code-Editor vorübergehend ausgeblendet, um mehr Platz auf dem Bildschirm für das Prüftool zu haben.
![Eine Leistungsprüfung mit dem integrierten Prüftool durchführen. Die Bewertungen umfassen „Gesamt“, „Leistung“, „Erfahrung“ und „Best Practice“ mit jeweils 100 von 100 Punkten.](https://web.dev/static/articles/mini-apps/mini-app-devtools/image/running-performance-audi-fa75ebecfd4e2.png?authuser=6&hl=de)
API-Mocking
Mocking API-Antworten sind direkt in den WeChat-Entwicklertools enthalten. Der Entwickler muss keinen separaten Dienst einrichten. Über eine nutzerfreundliche Schnittstelle kann der Entwickler API-Endpunkte und die gewünschten simulierten Antworten einrichten.
![Einrichten einer simulierten Antwort für einen API-Endpunkt in den WeChat-Entwicklertools.](https://web.dev/static/articles/mini-apps/mini-app-devtools/image/setting-a-mock-response-b73d071a1206d.png?authuser=6&hl=de)
Danksagungen
Dieser Artikel wurde von Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent und Keith Gu verfasst.