Struktura projektu miniaplikacji
Podobnie jak w przypadku języków znaczników, języków stylów i składników, w przypadku struktury projektu miniaplikacji występują też różnice w szczegółach, np. rozszerzeniach plików czy nazwach domyślnych. Ogólna koncepcja jest jednak taka sama w przypadku wszystkich dostawców superaplikacji. Struktura projektu zawsze obejmuje:
- Plik główny
app.js
, który inicjuje miniaplikację. - Plik konfiguracji
app.json
, który przybliża się do pliku manifestu aplikacji internetowej. - Opcjonalny plik arkusza stylów wspólnych
app.css
ze wspólnymi domyślnymi stylami. - Plik
project.config.json
zawierający informacje o kompilacji.
Wszystkie strony są przechowywane w poszczególnych podfolderach w folderze
pages
. Każdy podfolder strony zawiera plik CSS, plik JS, plik HTML i opcjonalny plik konfiguracyjny JSON. Wszystkie pliki muszą mieć nazwy takie jak ich foldery nadrzędne, z wyjątkiem rozszerzeń plików. W taki sposób miniaplikacja potrzebuje tylko wskaźnika do katalogu w pliku app.json
(pliku podobnego do pliku manifestu) i może dynamicznie znajdować wszystkie zasoby podrzędne. Z punktu widzenia programisty stron internetowych miniaplikacje są więc aplikacjami wielostronicowymi.
├── app.js # Initialization logic
├── app.json # Common configuration
├── app.css # Common style sheet
├── project.config.json # Project configuration
└── pages # List of pages
├── index # Home page
│ ├── index.css # Page style sheet
│ ├── index.js # Page logic
│ ├── index.json # Page configuration
│ └── index.html # Page markup
└── other # Other page
├── other.css # Page style sheet
├── other.js # Page logic
├── other.json # Page configuration
└── other.html # Page markup
Cykl życia miniaplikacji
Miniaplikacja musi zostać zarejestrowana w superaplikacji przez wywołanie zdefiniowanej globalnie metody App()
.
W przypadku struktury projektu przedstawionej wcześniej dzieje się to w komponencie app.js
. Cykl życia miniaplikacji składa się z 4 etapów: launch
, show
, hide
i error
. Obsługi tych zdarzeń można przekazywać metodzie App()
w postaci obiektu konfiguracji, który może też zawierać właściwość globalData
z danymi, które powinny być dostępne globalnie na wszystkich stronach.
/* app.js */
App({
onLaunch(options) {
// Do something when the app is launched initially.
},
onShow(options) {
// Do something when the app is shown.
},
onHide() {
// Do something when the app is hidden.
},
onError(msg) {
console.log(msg);
},
globalData: "I am global data",
});
Jak zwykle, szczegóły mogą się różnić, ale koncepcja jest taka sama w przypadku WeChat, Alipay, Baidu, ByteDance oraz Quick App.
Cykl życia strony
Podobnie jak w przypadku cyklu życia aplikacji, cykl życia strony zawiera zdarzenia, na które deweloper może reagować. Te podstawowe zdarzenia to load
, show
, ready
, hide
i unload
. Niektóre platformy oferują dodatkowe zdarzenia, np. pulldownrefresh
. Konfigurowanie elementów obsługujących zdarzenia odbywa się w metodie Page()
zdefiniowanej dla każdej strony. W przypadku stron index
lub other
z poprzedniej struktury projektu nastąpi to odpowiednio na stronie index.js
lub other.js
.
/* index.js */
Page({
data: {
text: "This is page data.",
},
onLoad: function (options) {
// Do something when the page is initially loaded.
},
onShow: function () {
// Do something when the page is shown.
},
onReady: function () {
// Do something when the page is ready.
},
onHide: function () {
// Do something when the page is hidden.
},
onUnload: function () {
// Do something when the page is closed.
},
onPullDownRefresh: function () {
// Do something when the user pulls down to refresh.
},
onReachBottom: function () {
// Do something when the user scrolls to the bottom.
},
onShareAppMessage: function () {
// Do something when the user shares the page.
},
onPageScroll: function () {
// Do something when the user scrolls the page.
},
onResize: function () {
// Do something when the user resizes the page.
},
onTabItemTap(item) {
// Do something when the user taps the page's tab.
},
customData: {
foo: "bar",
},
});
Proces kompilacji
Proces kompilacji miniaplikacji jest abstrakcyjny dla dewelopera. Pod maską korzysta z narzędzi branżowych, takich jak kompilator Babel do transpilacji i minimalizacji oraz z przekształcacza postcss CSS. Proces kompilacji jest podobny do tego, który występuje w Next.js lub create-react-app
, gdzie deweloperzy, jeśli wyraźnie tego nie chcą, nigdy nie dotykają parametrów kompilacji. Wyniki przetworzenia plików są podpisywane, szyfrowane i pakowane w jeden lub kilka (pod)pakietów, które są następnie przesyłane na serwery dostawców super aplikacji. Pakiety podrzędne służą do ładowania opóźnionego, dzięki czemu miniaplikacja nie musi być pobierana od razu w całości. Szczegóły opakowania są prywatne i nie są udokumentowane, ale niektóre formaty pakietów, takie jak format wxapkg
WeChat, zostały odtworzone w drodze inżynierii odwrotnej.
Podziękowania
Ten artykuł został sprawdzony przez Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent i Keitha Gu.