Środowisko programistyczne
Teraz, gdy już omówiliśmy miniaplikacje swoje, skoncentruję się na ich obsłudze dla programistów różnych platform. Tworzenie miniaplikacji na wszystkich platformach odbywa się w IDE, które są udostępniane bezpłatnie przez superaplikacje. Chociaż jest ich więcej, chcę skupić się na 4 najpopularniejszych i piątej, aby porównać ją z szybkimi aplikacjami.
IDE aplikacji mini
Podobnie jak superaplikacje, większość IDE jest dostępna tylko w języku chińskim. Warto się upewnić, że instalujesz wersję chińską, a nie dostępną czasem w języku angielskim (lub za granicą), ponieważ może ona nie być aktualna. Jeśli jesteś deweloperem systemu macOS, pamiętaj, że nie wszystkie IDE są podpisane, co oznacza, że macOS odmawia uruchomienia instalatora. Możesz to zrobić na własne ryzyko, zgodnie z opisem w Centrum pomocy Apple.
- Narzędzia deweloperskie WeChat
- Narzędzia deweloperskie Alipay
- Narzędzia deweloperskie Baidu
- Narzędzia deweloperskie ByteDance
- Szybkie narzędzia deweloperskie
Miniprojekty startowe aplikacji
Aby szybko rozpocząć pracę z miniaturami aplikacji, wszyscy dostawcy superaplikacji oferują aplikacje demonstracyjne, które można od razu pobrać i przetestować. Czasami są też zintegrowane z kreatorami „New Project” (Nowy projekt) w różnych IDE.
- Wersja demonstracyjna WeChat
- Wersja demonstracyjna Alipay
- Demonstracja Baidu
- Wersja demonstracyjna ByteDance
- Prezentacja szybkiej aplikacji
Proces programowania
Po uruchomieniu IDE i wczytaniu lub utworzeniu (demonstracyjnej) miniaplikacji zawsze pierwszym krokiem jest zawsze zalogowanie się. Zwykle wystarczy zeskanować kod QR za pomocą superaplikacji (w której użytkownik jest już zalogowany) wygenerowanej przez IDE. Bardzo rzadko musisz podać hasło. Gdy się zalogujesz, IDE zna Twoją tożsamość i umożliwia rozpoczęcie programowania, debugowania, testowania oraz przesyłania aplikacji do sprawdzenia. Poniżej możesz zobaczyć zrzuty ekranu z 5 środowiskami IDE wspomnianymi w akapicie powyżej.
Jak widać, podstawowe elementy wszystkich IDE są bardzo podobne. Zawsze masz edytor kodu oparty na Monaco Editor, czyli tym samym projekcie, który obsługuje VS Code. We wszystkich IDE dostępny jest debuger oparty na frontendzie Narzędzi deweloperskich w Chrome (z pewnymi modyfikacjami), które omówimy później (patrz Debugger). IDE na se są implementowane jako aplikacje NW.js lub Electron. Symulatory w IDE są realizowane jako tag NW.js <webview> lub tag Electron <webview>, który z kolei jest oparty na tagu <webview> Chromium. Jeśli interesują Cię elementy wewnętrzne IDE, często możesz je sprawdzić w Narzędziach deweloperskich w Chrome ze skrótem klawiaturowym Control+Alt+I (lub Command+Option+I na Macu).
<webview>.
Symulator oraz rzeczywiste testowanie i debugowanie
Symulator jest porównywalny z informacjami zawartymi w trybie urządzenia w Narzędziach deweloperskich w Chrome. Możesz symulować różne urządzenia z Androidem i iOS, zmieniać skalę i orientację urządzenia, a także symulować różne stany sieci, wykorzystanie pamięci, zdarzenie odczytu kodu kreskowego, nieoczekiwane zakończenie i tryb ciemny.
Wbudowany symulator pozwala jedynie zorientować się, jak działa aplikacja, ale testowanie na urządzeniu, jak w przypadku zwykłych aplikacji internetowych, jest niezastąpione. Wystarczy zeskanować kod QR,
aby przetestować miniaplikację, która jest w fazie rozwoju. Na przykład skanowanie kodu QR generowanego przez IDE za pomocą rzeczywistego urządzenia w ByteDance DevTools powoduje utworzenie wersji miniaplikacji hostowanej w chmurze, którą można od razu przetestować na urządzeniu. Działa to w przypadku ByteDance, gdzie adres URL za kodem QR (przykład) przekierowuje na hostowaną stronę (przykład), która zawiera linki ze specjalnymi schematami URI, np. snssdk1128://, by wyświetlić podgląd miniaplikacji w różnych superaplikacjach ByteDance, takich jak Douyin czy Toutiao (tutaj znajdziesz przykład).
Inni dostawcy superaplikacji nie przechodzą przez stronę pośrednią, ale bezpośrednio otwierają podgląd.
Jeszcze ciekawszą funkcją jest zdalne debugowanie w chmurze. Po prostu zeskanujesz specjalny kod QR wygenerowany przez IDE, miniaplikacja otworzy się na urządzeniu fizycznym, a na komputerze pojawi się okno Narzędzi deweloperskich w Chrome, które umożliwia zdalne debugowanie.
Debuger
Debugowanie elementów
Funkcja debugowania miniaplikacji jest już znana każdemu, kto kiedykolwiek korzystał z Narzędzi deweloperskich w Chrome. Istnieją jednak pewne ważne różnice, które sprawiają, że przepływ pracy jest dostosowywany do miniaplikacji. Zamiast panelu Elements w Narzędziach deweloperskich w Chrome możesz skorzystać z niestandardowego panelu dostosowanego do języka HTML. Na przykład w WeChat panel nazywa się Wxml, co oznacza WeiXin Markup Language. W Narzędziach deweloperskich Baidu nazywa się on Swan Element. ByteDance DevTools wywołuje go Bxml. Alipay nadaje mu nazwę AXML, a szybka aplikacja odwołuje się do panelu po prostu jako UX. Języki znaczników omówię w dalszej części.
<image> za pomocą Narzędzi deweloperskich weChat.
Elementy niestandardowe
Sprawdzenie komponentu WebView na prawdziwym urządzeniu za pomocą strony about://inspect/#devices pokazuje, że Narzędzia deweloperskie WeChat celowo ukrywały prawdę. Tam, gdzie w Narzędziach deweloperskich w WeChat pojawiło się <image>, widzę właśnie element niestandardowy o nazwie <wx-image> z jedynym elementem podrzędnym <div>. Warto zauważyć, że ten element niestandardowy nie korzysta z modelu Shadow DOM. Więcej o tych komponentach dowiesz się później.
<image> za pomocą Narzędzi deweloperskich w WeChat pokazuje, że jest to w rzeczywistości element niestandardowy <wx-image>.
Debugowanie CSS
Kolejna różnica to nowa jednostka długości rpx dla piksela responsywnego w różnych dialektach CSS (więcej informacji o tej jednostce znajdziesz w dalszej części). Narzędzia deweloperskie WeChat korzystają z jednostek CSS niezależnych od urządzenia, dzięki czemu programowanie na urządzenia o różnych rozmiarach jest bardziej intuicyjne.
200rpx 0) widoku za pomocą Narzędzi deweloperskich weChat.
Kontrola wydajności
W przypadku miniaplikacji wydajność jest najważniejsza. Nic dziwnego, że WeChat DevTools i niektóre inne narzędzia deweloperskie mają zintegrowane narzędzie kontrolne inspirowane aplikacją Lighthouse. Główne obszary audytów to: całość, skuteczność, doświadczenie i sprawdzone metody. Widok IDE można dostosować. Na zrzucie ekranu poniżej tymczasowo ukryłem edytor kodu, aby zwiększyć ilość miejsca na ekranie dla narzędzia do kontroli.
Naśmiewanie się z API
Zamiast wymagać od dewelopera skonfigurowania osobnej usługi, fałszowanie odpowiedzi interfejsu API jest bezpośrednio częścią narzędzi deweloperskich weChat. Za pomocą łatwego w użyciu interfejsu deweloper może konfigurować punkty końcowe interfejsu API i pożądane przykładowe odpowiedzi.
Podziękowania
Ten artykuł napisali Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent oraz Keith Gu.