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 stylu i komponentów, również w przypadku miniaplikacji struktury projektu, szczegóły, takie jak rozszerzenia plików i nazwy domyślne, również się różnią. Ogólna zasada jest jednak taka sama w przypadku wszystkich dostawców aplikacji. 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 mniej więcej odpowiada plikowi manifestu aplikacji internetowej.
• Opcjonalny plik wspólnego arkusza stylów app.css ze 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ć takie same nazwy jak folder, w którym się znajdują (z wyjątkiem rozszerzeń plików). W ten sposób miniaplikacja potrzebuje wskaźnika do katalogu w pliku app.json (pliku przypominającego manifest) i może dynamicznie wyszukiwać wszystkie zasoby podrzędne. Z perspektywy 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

Minicykl życia aplikacji

Miniaplikacja musi być zarejestrowana w superaplikacji przez wywołanie zdefiniowanej globalnie metody App(). Zgodnie ze strukturą projektu opisaną wcześniej dzieje się to w app.js. Minicykl życia aplikacji składa się zasadniczo z 4 zdarzeń: launch, show, hide i error. Moduły obsługi tych zdarzeń można przekazywać 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 poszczególnych elementów mogą się różnić, ale w przypadku WeChat, Alipay, Baidu, ByteDance czy aplikacji Quick App ta koncepcja jest taka sama.

Cykl życia strony

Podobnie jak w przypadku cyklu życia aplikacji, cykl życia strony również zawiera zdarzenia cyklu życia, które deweloper może nasłuchiwać i na nie reagować. Najważniejsze wydarzenia to load, show, ready, hide i unload. Niektóre platformy oferują dodatkowe zdarzenia, np. pulldownrefresh. Moduły obsługi zdarzeń można skonfigurować w metodzie Page() zdefiniowanej dla każdej strony. W przypadku stron index lub other ze struktury projektu przed nastąpi to odpowiednio w języku 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 niezależny od dewelopera. Używa do tego narzędzi branżowych, takich jak kompilator Babel do transpilacji i minifikacji oraz transformater CSS postcss. Proces kompilacji jest podobny do tego w języku Next.js czy create-react-app, gdzie deweloperzy nie zmieniają parametrów kompilacji, jeśli wyraźnie nie zrobią tego. Powstałe w ten sposób pliki są podpisywane, szyfrowane i pakowane w jeden lub kilka (pod)pakietów, które są 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 w WeChat, zostały opracowane wstecznie.

Podziękowania

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