Struktura, cykl życia i grupowanie projektu

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, hideerror. 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, hideunload. 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.