Projektstruktur, Lebenszyklus und Bündelung

Thomas Steiner

Mini-App-Projektstruktur

Wie zuvor auch bei den Auszeichnungssprachen, den Stilsprachen und den Komponenten. Bei der Struktur des Mini-App-Projekts variieren auch Details wie die Dateierweiterungen oder die Standardnamen. Die Grundidee ist jedoch bei allen Super-App-Anbietern die gleiche. Die Projektstruktur besteht immer aus:

  • Eine Stammdatei app.js, die die Mini-App initialisiert
  • Eine Konfigurationsdatei app.json, die ungefähr einem Web-App-Manifest entspricht.
  • Eine optionale gemeinsame Stylesheet-Datei app.css mit gemeinsamen Standardstile.
  • Eine project.config.json-Datei, die Build-Informationen enthält.

Alle Seiten werden in einzelnen Unterordnern in einem pages-Ordner gespeichert. Jeder Seitenunterordner enthält eine CSS-Datei, eine JS-Datei, eine HTML-Datei und eine optionale JSON-Konfigurationsdatei. Alle Dateien müssen mit Ausnahme der Dateiendungen wie der Ordner benannt werden, in dem sie enthalten sind. Die Mini-App benötigt nur einen Zeiger auf das Verzeichnis in der app.json-Datei (die Manifest-ähnliche Datei) und kann alle Unterressourcen dynamisch finden. Aus der Perspektive von Webentwicklern sind Mini-Apps daher mehrseitige Apps.

├── 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

Mini-App-Lebenszyklus

Eine Mini-App muss durch Aufrufen der global definierten App()-Methode bei der Super-App registriert werden. In Bezug auf die zuvor beschriebene Projektstruktur erfolgt dies in app.js. Der Lebenszyklus einer Mini-App besteht im Wesentlichen aus vier Ereignissen: launch, show, hide und error. Handler für diese Ereignisse können in Form eines Konfigurationsobjekts an die Methode App() übergeben werden, das auch die Property globalData mit Daten enthält, die global auf allen Seiten verfügbar sein sollten.

/* 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",
});

Wie immer variieren die einzelnen Details, aber das Konzept ist bei WeChat, Alipay, Baidu, ByteDance und Quick App gleich.

Lebenszyklus der Seite

Ähnlich wie beim App-Lebenszyklus gibt es auch beim Seitenlebenszyklus Lebenszyklus-Ereignisse, auf die der Entwickler warten und auf die er reagieren kann. Diese Kernereignisse sind load, show, ready, hide und unload. Einige Plattformen bieten zusätzliche Ereignisse wie pulldownrefresh. Die Event-Handler werden in der Page()-Methode eingerichtet, die für jede Seite definiert wird. Für die Seiten index oder other aus der Projektstruktur vor würde dies in index.js bzw. other.js geschehen.

/* 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",
  },
});

Der Erstellungsprozess

Der Entwicklungsprozess von Mini-Apps ist vom Entwickler abstrahiert. Intern nutzt es Branchentools wie den Babel für die Transpilierung und Komprimierung und den CSS-Transformator postcss. Die Build-Oberfläche ist vergleichbar mit der von Next.js oder create-react-app, bei der Entwickler die Build-Parameter niemals berühren, wenn sie dies ausdrücklich nicht tun. Die resultierenden verarbeiteten Dateien werden schließlich signiert, verschlüsselt und in ein oder mehrere (Unter-)Pakete gepackt, die dann auf die Server der Super-App-Anbieter hochgeladen werden. Unterpakete sind für Lazy Loading gedacht, d. h., eine Mini-App muss nicht alle gleichzeitig heruntergeladen werden. Die Angaben zur Paketerstellung sind vertraulich und werden nicht dokumentiert. Einige Paketformate wie das wxapkg-Format von WeChat wurden jedoch Reverse Engineering (Reverse Engineering) durchgeführt.

Danksagungen

Dieser Artikel wurde von Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent und Keith Gu gelesen.