Struktura, cykl życia i grupowanie projektu

Thomas Steiner

Struktura projektu miniaplikacji

Podobnie jak w przypadku języków znaczników, języków stylizacji i składników, w strukturze projektu miniaplikacji występują też inne szczegóły, np. rozszerzenia plików czy nazwy domyślne. 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 w przybliżeniu odpowiada pliku manifestu aplikacji internetowej.
• Opcjonalny plik arkusza stylów wspólnych app.css ze wspólnymi stylami domyślnymi.
• 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, miniaplikacje to aplikacje wielostronicowe.

├── 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. Na cykl życia miniaplikacji składają się zasadniczo 4 zdarzenia: 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",
});

Szczegóły się różnią, ale koncepcja jest taka sama w przypadku WeChat, Alipay, Baidu, ByteDance i Quick App.

Cykl życia strony

Podobnie jak w przypadku cyklu życia aplikacji, cykl życia strony również zawiera zdarzenia cyklu życia, na które deweloper może wsłuchiwać się i na nie reagować. Te podstawowe zdarzenia to load, show, ready, hide i unload. Niektóre platformy oferują dodatkowe zdarzenia, np. pulldownrefresh. Moduły obsługi zdarzeń konfiguruje się w metodzie 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. Sposób kompilacji jest porównywalny do rozwiązań Next.js i create-react-app. Deweloperzy, jeśli wyraźnie tego nie zrobią, nigdy nie dotykają parametrów kompilacji. Uzyskane w ten sposób pliki są na koniec podpisane, zaszyfrowane i spakowane w jednym lub kilku (pod)pakietach, które następnie są przesyłane na serwery dostawców superaplikacji. Pakiety podrzędne służą do ładowania opóźnionego, więc 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ł napisali Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent i Keith Gu.