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">/* 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:
- 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.
- 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.