Markup, Stile, Skripte und Updates für Mini-Apps

Thomas Steiner

Markup languages

Wie bereits erwähnt, werden Mini-Apps nicht mit einfachem HTML, sondern mit HTML-Dialekten geschrieben. Wenn Sie Vue.js-Textinterpolation und -Anweisungen verwendet haben, direkt zu Hause, aber ähnliche Konzepte gab es schon lange in XML-Transformationen. (XSLT). Unten sehen Sie Codebeispiele aus der WXML. Das Konzept ist jedoch für alle Mini-App-Plattformen, nämlich AXML von Baidu Swan Element, ByteDance TTML (obwohl die Entwicklertools Bxml genannt haben) und die HTML: Genau wie bei Vue.js ist die zugrunde liegende Mini-App-Programmierung ist model-view-viewmodel (MVVM).

Datenbindung

Datenbindung entspricht Vue.js Textinterpolation.

<!-- wxml -->
<view>{{message}}</view>

// page.js
Page({
  data: {
    message: "Hello World!",
  },
});

Listendarstellung

Das Listenrendering funktioniert wie die v-for-Anweisung von Vue.js.

<!-- wxml -->
<view wx:for="{{array}}">{{item}}</view>

// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5],
  },
});

Bedingtes Rendering

Bedingtes Rendering funktioniert wie Vue.js v-if-Anweisung.

<!-- wxml -->
<view wx:if="{{view == 'one'}}">One</view>
<view wx:elif="{{view == 'two'}}">Two</view>
<view wx:else="{{view == 'three'}}">Three</view>

// page.js
Page({
  data: {
    view: "three",
  },
});

Vorlagen

Anstatt die Zwingung den content einer HTML-Vorlage klonen, WXML-Vorlagen können deklarativ über das Attribut is verwendet werden, das auf eine Vorlagendefinition verweist.

<!-- wxml -->
<template name="person">
  <view>
    First Name: {{firstName}}, Last Name: {{lastName}}
  </view>
</template>

<template is="person" data="{{...personA}}"></template>
<template is="person" data="{{...personB}}"></template>
<template is="person" data="{{...personC}}"></template>

// page.js
Page({
  data: {
    personA: { firstName: "Alice", lastName: "Foo" },
    personB: { firstName: "Bob", lastName: "Bar" },
    personC: { firstName: "Charly", lastName: "Baz" },
  },
});

Stile

Die Gestaltung erfolgt mit CSS-Dialekten. Name von WeChat WXSS. Bei Alipay heißt dies ACSS, die einfache CSS und bei ByteDance ihre wird als Dialekt TTSS: Sie haben jedoch gemeinsam, dass sie CSS mit responsiven Pixeln erweitern. Beim Schreiben von normalem CSS-Code Entwickelnde müssen alle Pixeleinheiten konvertieren, um sie an die Bildschirme der unterschiedlichen Mobilgeräte anzupassen. mit unterschiedlichen Breiten und Pixelverhältnissen. TTSS unterstützt die Einheit rpx als zugrunde liegende Ebene. übernimmt die Mini-App den Job vom Entwickler und konvertiert die Einheiten in seinem Namen, basierend auf Bildschirmbreite von 750rpx festgelegt. Auf einem Pixel 3a mit einer Bildschirmbreite von 393px (und ein Geräte-Pixel-Verhältnis von 2.75) wird aus dem responsiven 200rpx auf dem echten Gerät zu 104px bei Überprüfung mit den Chrome-Entwicklertools (393 px / 750 rpx × 200 rpx Δ 104 px). Bei Android gilt das gleiche Konzept heißt dichteunabhängige Pixel.

<ph type="x-smartling-placeholder">
</ph> Wenn Sie eine Ansicht mit Chrome-Entwicklertools überprüfen, deren responsiver Pixelabstand „200rpx“ angegeben wurde, sehen Sie, dass sie auf einem Pixel 3a-Gerät tatsächlich 104 px beträgt. <ph type="x-smartling-placeholder">
</ph> Den tatsächlichen Abstand auf einem Pixel 3a mit den Chrome-Entwicklertools prüfen 
/* app.wxss */
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0; /* ← responsive pixels */
  box-sizing: border-box;
}

Da Komponenten (siehe weiter unten) kein Shadow DOM verwenden, wurden in einer Seitenreichweite deklarierte Stile angegeben. in alle Komponenten integriert. Die gängige Organisation von Stylesheet-Dateien ist ein Stamm-Stylesheet für globale Stile und individuelle Stylesheets pro Seite für jede Seite der Mini-App. Stile können mit einer @import-Regel importiert werden, die wie die @import CSS-At-Regel. Wie in HTML, Stile können auch inline deklariert werden, einschließlich dynamischer Textinterpolation (siehe vor) verwendet.

<view style="color:{{color}};" />

Skripting

Mini-Apps unterstützen eine „sichere Teilmenge“ mit Unterstützung für Module, die verschiedene an CommonJS oder RequireJS erinnern. JavaScript-Code kann nicht über eval() ausgeführt werden und es können keine Funktionen mit erstellt werden. new Function(). Der Skriptausführungskontext ist V8 oder JavaScriptCore auf Geräten und V8 oder NW.js in den Simulator ein. Üblicherweise ist die Programmierung mit ES6 oder neuerer Syntax möglich. da die jeweiligen Entwicklertools den Code automatisch in ES5 transpilieren, wenn das Build-Ziel ein Betriebssystem mit einer älteren WebView-Implementierung (siehe weiter unten). Die wird in der Dokumentation der Super-App-Anbieter ausdrücklich erwähnt, und unterscheiden sich von JavaScript. Diese Aussage bezieht sich jedoch meistens nur auf wie Module funktionieren, d. h., dass sie keine Standard- ES-Module noch nicht.

Wie bereits erwähnt, besteht das Konzept der Mini-App-Programmierung model-view-viewmodel (MVVM). Die Logikschicht und die Ansichtsebene laufen in verschiedenen Threads, d. h., die Benutzeroberfläche durch lang andauernde Vorgänge blockiert werden. Im Web kann man sich Skripte vorstellen, die in einem Web Worker

Die Skriptsprache von WeChat heißt WXS, Alipay's SJS, auch ByteDance SJS Baidu spricht von JS, wenn es um den Verweis auf ihre. Diese Skripts müssen mithilfe einer speziellen Tag-Art eingefügt werden, z. B. <wxs> in WeChat Im Gegensatz dazu verwendet die Quick App normale <script>-Tags und die ES6- JS-Syntax.

<wxs module="m1">
  var msg = "hello world";
  module.exports.message = msg;
</wxs>

<view>{{m1.message}}</view>

Module können auch über ein src-Attribut geladen oder über require() importiert werden.

// /pages/tools.wxs
var foo = "'hello world' from tools.wxs";
var bar = function (d) {
  return d;
};
module.exports = {
  FOO: foo,
  bar: bar,
};
module.exports.msg = "some msg";

<!-- page/index/index.wxml -->
<wxs src="./../tools.wxs" module="tools" />
<view>{{tools.msg}}</view>
<view>{{tools.bar(tools.FOO)}}</view>

// /pages/logic.wxs
var tools = require("./tools.wxs");

console.log(tools.FOO);
console.log(tools.bar("logic.wxs"));
console.log(tools.msg);

JavaScript Bridge API

Die JavaScript-Bridge, die Mini-Apps mit dem Betriebssystem verbindet, um Funktionen des Betriebssystems zu nutzen (siehe Zugriff auf leistungsstarke Funktionen). Es bietet ebenfalls eine Reihe praktischer Methoden. Einen Überblick erhalten Sie über die verschiedenen APIs, von WeChat Alipay Baidu ByteDance und Quick App.

Die Funktionserkennung ist unkompliziert, da alle Plattformen eine (buchstäblich so genannte) canIUse()-Methode, deren Name von der Website caniuse.com inspiriert zu sein scheint. Für Beispiel von ByteDance tt.canIUse() ermöglicht die Überprüfung der Unterstützung von APIs, Methoden, Parametern, Optionen, Komponenten und Attributen.

// Testing if the `<swiper>` component is supported.
tt.canIUse("swiper");
// Testing if a particular field is supported.
tt.canIUse("request.success.data");

Updates

Mini-Apps haben keinen standardisierten Updatemechanismus (Diskussion über potenzielle Standardisierung). Alle Mini-App-Plattformen verfügen über ein Back-End-System, über das Entwickler von Mini-Apps neue Versionen von ihre Mini-Apps. Eine Super-App verwendet dann dieses Back-End-System, um nach Updates zu suchen und diese herunterzuladen. Einige der besten Apps Updates werden vollständig im Hintergrund ausgeführt, ohne dass die Mini-App selbst das Update beeinflussen kann. Ablauf. Bei anderen Super-Apps haben die Mini-Apps mehr Kontrolle.

Als Beispiel für einen ausgefeilten Prozess wird in den folgenden Abschnitten der Update-Mechanismus von WeChat für Mini-Apps beschrieben. genauer an. In den folgenden beiden Szenarien wird über WeChat nach verfügbaren Updates gesucht:

  1. Solange WeChat aktiv ist, wird regelmäßig nach Updates für kürzlich verwendete Mini-Apps gesucht. Wenn ein Update gefunden wird, wird das Update heruntergeladen und beim nächsten Kaltstart durch den Nutzer synchron angewendet. Mini-App. Der Kaltstart einer Mini-App tritt auf, wenn die Mini-App derzeit nicht ausgeführt wurde, als der Nutzer öffnete es. WeChat erzwingt das Schließen von Mini-Apps, nachdem sie 5 Minuten lang im Hintergrund ausgeführt wurden.
  2. WeChat sucht auch nach Updates, wenn eine Mini-App kalt gestartet wird. Für Mini-Apps, die der Nutzer nicht geöffnet hat wird das Update synchron überprüft und heruntergeladen. Während das Update heruntergeladen wird, die Nutzende warten müssen. Sobald der Download abgeschlossen ist, wird das Update angewendet und die Mini-App wird geöffnet. Wenn die Download schlägt fehl. Beispielsweise wird die Mini-App aufgrund einer schlechten Netzwerkverbindung geöffnet. Für Mini-Apps, die der Nutzer vor Kurzem geöffnet hat, werden alle potenziellen Updates asynchron im Hintergrund heruntergeladen. wird angewendet, wenn der Nutzer die Mini-App das nächste Mal startet.

Mini-Apps können über die UpdateManager API frühere Updates aktivieren. Sie bietet die folgenden Funktionen:

  • Benachrichtigt die Mini-App, wenn nach Updates gesucht wird (onCheckForUpdate)
  • Benachrichtigt die Mini-App, wenn ein Update heruntergeladen wurde und verfügbar ist (onUpdateReady)
  • Benachrichtigt die Mini-App, wenn ein Update nicht heruntergeladen werden konnte. (onUpdateFailed)
  • Ermöglicht der Mini-App, die Installation eines verfügbaren Updates zu erzwingen, wodurch die App neu gestartet wird. (applyUpdate)

WeChat bietet außerdem zusätzliche Optionen zur Anpassung von Updates für Entwickler von Mini-Apps im Back-End-System: 1. Eine Option ermöglicht es Entwicklern, synchrone Updates für Nutzer zu deaktivieren, die bereits eine bestimmte mindestens die Version der Mini-App installiert hat und erzwingt stattdessen asynchrone Updates. 2. Eine weitere Option bietet Entwicklern die Möglichkeit, die erforderliche Mindestversion ihrer Mini-App festzulegen. Dadurch wird asynchrone Updates von einer Version, die niedriger als die erforderliche Mindestversion ist, ein erneutes Laden der Mini-App nach dem wenn das Update angewendet wird. Außerdem wird das Öffnen einer älteren Version der Mini-App blockiert, wenn der Download der Fehler bei der Aktualisierung.

Danksagungen

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