Struktura, cykl życia i grupowanie projektu

Thomas Steiner

Struktura projektu miniaplikacji

Tak jak w przypadku języków znaczników, ich stylów i komponentów. dzięki miniaplikacji są różne, takie jak rozszerzenia plików czy nazwy domyślne. jednak ogólna zasada jest taka sama w przypadku wszystkich dostawców 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 przybliża się do pliku manifestu 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 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 folder, w którym się znajdują (nie dotyczy to pliku). rozszerzeń. Trzeba tylko wskazać katalog w pliku app.json tej miniaplikacji. (pliku manifestu) i może dynamicznie wyszukiwać 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

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 oraz 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, które deweloper może wysłuchać i na nie zareagować. Te podstawowe zdarzenia to load, show, ready, hide i unload. Niektóre platformy oferują dodatkowe zdarzenia, np. pulldownrefresh. Konfigurowanie modułów obsługi zdarzeń odbywa się w metodę Page() zdefiniowaną 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 tworzenia miniaplikacji jest niezależny od 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. Podpakiety są przeznaczone do leniwego ładowania, dlatego nie trzeba pobierać ich wszystkich naraz. Szczegóły opakowania powinny być prywatne nie zostało udokumentowane, ale niektóre formaty pakietów, takie jak format wxapkg WeChat, zostały reverse-engineered.

Podziękowania

Ten artykuł został sprawdzony przez Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent i Keitha Gu.