Webkomponenten
Webkomponenten hatten das Ziel, Entwicklern die Möglichkeit zu geben, sie zusammenzufügen und tolle Apps darauf aufzubauen. Beispiele für solche atomaren Komponenten sind time-elements von GitHub, web-vitals-element von Stefan Julis oder die Ein-/Aus-Schaltfläche für den dunklen Modus von Google, eine Schleim-Stecker. Wenn es um vollständige Designsysteme geht, habe ich jedoch beobachtet, dass sich die Leute lieber auf einen kohärenten Satz von Komponenten vom selben Anbieter verlassen. Eine unvollständige Liste mit Beispielen umfasst die UI5-Webkomponenten von SAP, die Polymer-Elemente, Vaadin-Elemente, FAST von Microsoft, die Material Web Components, wohl die AMP-Komponenten und viele weitere. Aufgrund einer Reihe von Faktoren, die in diesem Artikel nicht behandelt werden, sind viele Entwickler jedoch auch auf Frameworks wie React, Vue.js, Ember.js usw. eingestellt. Anstatt dem Entwickler die Freiheit zu geben, zwischen einer dieser Optionen zu wählen (oder je nach Ihrer Sichtweise, müssen Entwickler*innen eine Reihe von Technologiekomponenten bereitstellen, forcing, eine Reihe von Technologiekomponenten zu wählen.)
Komponenten in Mini-Apps
Sie können sich diese Komponenten wie jede der oben erwähnten Komponentenbibliotheken vorstellen. Einen Überblick über die verfügbaren Komponenten erhalten Sie in der Komponentenbibliothek von WeChat, den ByteDance-Komponenten, den Alipay-Komponenten, den Baidu-Komponenten und den Quick App-Komponenten.
Ich habe bereits gezeigt, dass <image>
von WeChat zwar im Hintergrund eine Webkomponente ist, technisch aber nicht alle diese Komponenten sind. Einige Komponenten wie <map>
und <video>
werden als integrierte Betriebssysteme-Komponenten gerendert, die über WebView gelegt werden. Für den Entwickler werden diese Implementierungsdetails nicht offengelegt, sondern sind wie jede andere Komponente programmiert.
Wie immer variieren die Details, aber die allgemeinen Programmierkonzepte sind bei allen Super-App-Anbietern gleich. Ein wichtiges Konzept ist die Datenbindung, wie zuvor unter Auszeichnungssprachen beschrieben. Im Allgemeinen sind die Komponenten nach Funktion gruppiert, sodass es einfacher ist, die richtige Komponente für den jeweiligen Job zu finden. Unten sehen Sie ein Beispiel aus der Kategorisierung von Alipay, die der Komponentengruppierung anderer Anbieter ähnelt.
- Container ansehen
view
swiper
scroll-view
cover-view
cover-image
movable-view
movable-area
- Grundlegende Inhalte
text
icon
progress
rich-text
- Formularkomponenten
button
form
label
input
textarea
radio
radio-group
checkbox
checkbox-group
switch
slider
picker-view
picker
- Navigation
navigator
- Medienkomponenten
image
video
- Canvas
canvas
- Karte
map
- Öffnen Sie die Komponenten.
web-view
lifestyle
contact-button
- Barrierefreiheit
aria-component
Unten sehen Sie Alipays <image>
, das in einer a:for
-Anweisung verwendet wird (siehe Listen-Rendering), die eine Schleife über ein Bilddaten-Array in index.js
führt.
/* index.js */
Page({
data: {
array: [
{
mode: "scaleToFill",
text: "scaleToFill",
},
{
mode: "aspectFit",
text: "aspectFit",
},
],
src: "https://images.example.com/sample.png",
},
imageError(e) {
console.log("image", e.detail.errMsg);
},
onTap(e) {
console.log("image tap", e);
},
imageLoad(e) {
console.log("image", e);
},
});
<!-- index.axml -->
<view class="page">
<view class="page-section" a:for="{{array}}" a:for-item="item">
<view class="page-section-demo" onTap="onTap">
<image
class="image"
mode="{{item.mode}}"
onTap="onTap"
onError="imageError"
onLoad="imageLoad"
src="{{src}}"
lazy-load="true"
default-source="https://images.example.com/loading.png"
/>
</view>
</view>
</view>
Beachten Sie die Datenbindung von item.mode
an das Attribut mode
, von src
an das Attribut src
und die drei Event-Handler onTap
, onError
und onLoad
an die Funktionen mit demselben Namen. Wie zuvor gezeigt wird das <image>
-Tag intern in eine <div>
mit einem Platzhalter für die endgültigen Abmessungen des Bildes, optionalem Lazy Loading, einer Standardquelle usw. konvertiert.
Die verfügbaren Konfigurationsoptionen der Komponente sind in der Dokumentation aufgeführt. Durch eine in die Dokumente eingebettete Komponentenvorschau mit Simulator wird der Code sofort greifbar.
![Dokumentation der Alipay-Komponenten mit eingebetteter Komponentenvorschau, die einen Code-Editor mit Simulator zeigt, der die auf einem simulierten iPhone 6 gerenderte Komponente zeigt.](https://web.dev/static/articles/mini-apps/mini-app-components/image/alipay-component-document-6b7c4f21b0d0f.png?authuser=6&hl=de)
![Vorschau der Alipay-Komponenten wird in einem separaten Browsertab ausgeführt und zeigt einen Code-Editor mit Simulator, der die auf einem simulierten iPhone 6 gerenderte Komponente zeigt.](https://web.dev/static/articles/mini-apps/mini-app-components/image/alipay-component-preview-1da9c839edf25.png?authuser=6&hl=de)
Jede Komponente hat auch einen QR-Code, der mit der Alipay-App gescannt werden kann. Dieser öffnet das Komponentenbeispiel in einem eigenständigen Minimalbeispiel.
![Alipays „image“-Komponente wurde auf einem echten Gerät als Vorschau angesehen, nachdem ein QR-Code in der Dokumentation gescannt wurde.](https://web.dev/static/articles/mini-apps/mini-app-components/image/alipays-image-componen-696a04ff61022.png?authuser=6&hl=de)
<image>
auf einem echten Gerät, nachdem du einem QR-Code-Link in der Dokumentation gefolgt bist.
Entwickler können von der Dokumentation direkt in die Alipay DevTools-IDE springen, indem sie das proprietäre URI-Schema antdevtool-tiny://
nutzen. Dadurch kann die Dokumentation direkt mit einem zu importierenden Mini-App-Projekt verknüpft werden, sodass Entwickler sofort mit der Komponente beginnen können.
Benutzerdefinierte Komponenten
Entwickler können nicht nur die vom Anbieter bereitgestellten Komponenten verwenden, sondern auch benutzerdefinierte Komponenten erstellen. Das Konzept gilt für WeChat, ByteDance, Alipay und Baidu sowie für Quick App. Eine benutzerdefinierte Baidu-Komponente besteht beispielsweise aus vier Dateien, die sich im selben Ordner befinden müssen: custom.swan
, custom.css
, custom.js
und custom.json
.
Die Datei custom.json
bezeichnet den Ordnerinhalt als benutzerdefinierte Komponente.
{
"component": true
}
Die Datei custom.swan
enthält das Markup und custom.css
den CSS-Code.
<view class="name" bindtap="tap">{{name}} {{age}}</view>
.name {
color: red;
}
Die Datei custom.js
enthält die Logik. Die Lebenszyklusfunktionen der Komponente sind attached()
, detached()
, created()
und ready()
. Die Komponente kann außerdem auch auf Seitenlebenszyklusereignisse reagieren, nämlich auf show()
und hide()
.
Component({
properties: {
name: {
type: String,
value: "swan",
},
},
data: {
age: 1,
},
methods: {
tap: function () {},
},
lifetimes: {
attached: function () {},
detached: function () {},
created: function () {},
ready: function () {},
},
pageLifetimes: {
show: function () {},
hide: function () {},
},
});
Die benutzerdefinierte Komponente kann dann in index.json
importiert werden. Der Schlüssel des Imports bestimmt den Namen (hier: "custom"
), mit dem die benutzerdefinierte Komponente dann in index.swan
verwendet werden kann.
{
"usingComponents": {
"custom": "/components/custom/custom"
}
}
<view>
<custom name="swanapp"></custom>
</view>
Danksagungen
Dieser Artikel wurde von Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent und Keith Gu überprüft.