Projektstruktur, Lebenszyklus und Bündelung

Steiner

Mini-App-Projektstruktur

Wie zuvor bei den Auszeichnungssprachen, den Stilsprachen und den Komponenten, auch bei der Mini-App-Projektstruktur variieren die Details wie die Dateiendungen oder die Standardnamen. Die Idee dahinter ist jedoch für alle Super-App-Anbieter gleich. Die Projektstruktur besteht immer aus:

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

Alle Seiten werden in einzelnen Unterordnern im Ordner pages gespeichert. Jeder Unterordner der Seite enthält eine CSS-Datei, eine JS-Datei, eine HTML-Datei und eine optionale JSON-Konfigurationsdatei. Alle Dateien müssen wie der enthaltene Ordner benannt werden, abgesehen von den Dateierweiterungen. Die Mini-App benötigt also nur einen Verweis auf das Verzeichnis in der Datei app.json (die Manifest-Datei) und kann alle Unterressourcen dynamisch finden. Aus Sicht eines Webentwicklers 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 vorher beschriebene Projektstruktur geschieht dies in app.js. Der Lebenszyklus der 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 eine globalData-Eigenschaft mit Daten enthalten kann, die global auf allen Seiten 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 immer unterscheiden sich die Details, aber das Konzept ist das gleiche für WeChat, Alipay, Baidu, ByteDance und auch Quick App.

Seitenlebenszyklus

Ähnlich wie der App-Lebenszyklus gibt es auch beim Seitenlebenszyklus Lebenszyklusereignisse, auf die der Entwickler achten und auf die er reagieren kann. Diese Kernereignisse sind load, show, ready, hide und unload. Einige Plattformen bieten zusätzliche Ereignisse wie pulldownrefresh. Die Einrichtung der Event-Handler erfolgt in der Methode Page(), die für jede Seite definiert ist. Bei den Seiten index oder other aus der Projektstruktur vorher würde dies in index.js bzw. other.js passieren.

/* 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 Erstellungsprozess von Mini-Apps wird vom Entwickler abstrahiert. Intern verwendet es Branchentools wie den Babel-Compiler für die Transpilation und Reduzierung und den CSS-Transformer postcss. Die Build-Erstellung ist vergleichbar mit der von Next.js oder create-react-app, bei der Entwickler die Build-Parameter nie bearbeiten, wenn sie dies ausdrücklich nicht tun. Die resultierenden verarbeiteten Dateien werden schließlich signiert, verschlüsselt und in ein oder mehrere (Unter-)Pakete verpackt, die dann auf die Server der Super-Anwendungsanbieter hochgeladen werden. Teilpakete sind für Lazy Loading gedacht, d. h., eine Mini-App muss nicht alle auf einmal heruntergeladen werden. Die Details zur Paketerstellung sind privat und nicht dokumentiert. Einige Paketformate wie das wxapkg-Format von WeChat wurden jedoch umgekehrt entwickelt.

Danksagungen

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