Struktura, cykl życia i grupowanie projektu

Thomas Steiner

Struktura projektu miniaplikacji

Tak jak w przypadku języków znaczników, języków określania stylów i komponentów. W związku ze strukturą miniprojektu również różnią się takie szczegóły jak rozszerzenia plików czy nazwy domyślne. Ogólna zasada jest jednak taka sama w przypadku wszystkich superaplikacji. Struktura projektu zawsze składa się z tych elementów:

• Plik główny app.js, który inicjuje miniaplikację.
• Plik konfiguracji app.json, który w przybliżeniu odpowiada manifeście aplikacji internetowej.
• Opcjonalny wspólny plik arkusza stylów app.css z wspólnymi stylami domyślnymi.
• Plik project.config.json zawierający informacje o kompilacji.

Wszystkie strony są przechowywane w osobnych podfolderach w folderze pages. Każdy podfolder strony zawiera plik CSS, plik JS, plik HTML i opcjonalny plik JSON konfiguracji. Wszystkie pliki muszą mieć nazwy takie jak ich folder, w którym się znajdują, z wyjątkiem rozszerzeń plików. Dzięki temu miniaplikacja potrzebuje tylko wskaźnika do katalogu w pliku app.json (pliku manifestu) i może dynamicznie wyszukiwać wszystkie zasoby podrzędne. Z punktu widzenia twórcy stron internetowych 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

Minicykl życia aplikacji

Miniaplikacja musi być zarejestrowana w superaplikacji przez wywołanie zdefiniowanej globalnie metody App(). Zgodnie ze strukturą projektu omówioną wcześniej ma to miejsce w app.js. Na cykl życia miniaplikacji składają się zasadniczo 4 zdarzenia: launch, show, hide i error. Moduły obsługi tych zdarzeń można przekazać do metody App() w postaci obiektu konfiguracji, który może też zawierać właściwość globalData przechowującą dane, 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 i other ze struktury projektu przed będzie to miało miejsce odpowiednio w przypadku stron index.js i 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 tworzenia miniaplikacji jest niezależny od dewelopera. Wykorzystuje w nim narzędzia branżowe, takie jak kompilator Babel do transpilacji i minifikacji oraz transformator CSS postcss. 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 są następnie przesyłane na serwery dostawców superaplikacji. Podpakiety są przeznaczone do leniwego ładowania, więc miniaplikacji nie trzeba pobierać od razu. Szczegóły opakowania powinny być prywatne i nie są udokumentowane, ale niektóre formaty pakietów, takie jak wxapkg na WeChat, zostały przeprojektowane wstecznie.

Podziękowania

Ten artykuł napisali Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent i Keith Gu.