Struktura, cykl życia i grupowanie projektu

Thomas Steiner

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.