Projektstruktur, Lebenszyklus und Bündelung

Thomas Steiner

Projektstruktur von Mini-Apps

Wie bei den Markup- und Stylesheet-Sprachen und den Komponenten variieren auch bei der Projektstruktur von Mini-Apps die Details wie die Dateiendungen oder die Standardnamen. Die allgemeine Idee ist jedoch für alle Super-App-Anbieter dieselbe. Die Projektstruktur besteht immer aus:

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

Alle Seiten werden in einzelnen Unterordnern im Ordner pages gespeichert. Jeder Seitenunterordner enthält eine CSS-Datei, eine JS-Datei, eine HTML-Datei und eine optionale JSON-Konfigurationsdatei. Alle Dateien müssen wie der Ordner benannt sein, in dem sie enthalten sind, mit Ausnahme der Dateiendungen. So benötigt die Mini-App nur einen Zeiger auf das Verzeichnis in der Datei app.json (der manifestähnlichen Datei) und kann alle untergeordneten Ressourcen dynamisch finden. Aus Sicht eines Webentwicklers sind Mini-Apps also Apps mit mehreren Seiten.

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

Lebenszyklus von Mini-Apps

Eine Mini-App muss bei der Super-App registriert werden, indem die global definierte Methode App() aufgerufen wird. In Bezug auf die zuvor beschriebene Projektstruktur geschieht 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 App()-Methode übergeben werden. Dieses Objekt kann auch eine globalData-Property enthalten, die Daten enthält, die auf allen Seiten global verfügbar sein sollen.

/* 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 gewohnt variieren die einzelnen Details, aber das Konzept ist für WeChat, Alipay, Baidu, ByteDance und Quick App gleich.

Seitenlebenszyklus

Ähnlich wie beim App-Lebenszyklus gibt es auch beim Seitenlebenszyklus Ereignisse, auf die der Entwickler reagieren kann. Diese wichtigen Ereignisse 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 ist. Für die Seiten index oder other aus der Projektstruktur vorher 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 Build-Prozess

Der Build-Prozess von Mini-Apps wird vom Entwickler abstrahiert. Intern werden Branchen-Tools wie der Babel-Compiler für die Transpilierung und Komprimierung sowie der postcss-CSS-Transformer verwendet. Der Build-Prozess ist vergleichbar mit dem von Next.js oder create-react-app. Entwickler müssen die Build-Parameter nur dann anpassen, wenn sie dies explizit möchten. Die resultierenden verarbeiteten Dateien werden schließlich signiert, verschlüsselt und in einem oder mehreren (Unter-)Paketen verpackt, die dann auf die Server der Super-App-Anbieter hochgeladen werden. Unterpakete sind für das Lazy Loading vorgesehen, sodass eine Mini-App nicht auf einmal heruntergeladen werden muss. Die Verpackungsdetails sind privat und werden nicht dokumentiert. Einige Paketformate wie das wxapkg-Format von WeChat wurden jedoch zurückentwickelt.

Danksagungen

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