Mini-App-Komponenten

Thomas Steiner

Webkomponenten

Webkomponenten wurden entwickelt, damit Entwickler sie kombinieren und damit tolle Apps erstellen können. Beispiele für solche atomaren Komponenten sind time-elements von GitHub, web-vitals-element von Stefan Judith oder die Ein-/Aus-Schaltfläche für den dunklen Modus von Google. Was vollständige Designsysteme anbelangt, habe ich jedoch festgestellt, dass die Leute lieber auf einen kohärenten Satz von Komponenten desselben Anbieters angewiesen sind. Zu den Beispielen gehören die UI5-Webkomponenten von SAP, die Polymer-Elemente, die Vaadin-Elemente, FAST von Microsoft, die Material Web Components und die AMP-Komponenten. Aufgrund einer Reihe von Faktoren, die in diesem Artikel nicht behandelt werden, haben sich viele Entwickler jedoch auch für Frameworks wie React, Vue.js und Ember.js entschieden. Anstatt den Entwicklern die Freiheit zu geben, aus einer dieser Optionen auszuwählen (oder, je nach Standpunkt, sie zu zwingen, eine Technologie auszuwählen), stellen Super-App-Anbieter allgemein eine Reihe von Komponenten bereit, die Entwickler verwenden müssen.

Komponenten in Mini-Apps

Sie können sich diese Komponenten wie jede der oben genannten Komponentenbibliotheken vorstellen. Einen Überblick über die verfügbaren Komponenten erhalten Sie in den WeChat-Komponentenbibliothek, den ByteDance-Komponenten, den Alipay-Komponenten, den Baidu-Komponenten und den Quick App-Komponenten.

Ich habe bereits erklärt, dass beispielsweise die <image> von WeChat zwar eine Webkomponente ist, aber nicht alle diese Komponenten technisch gesehen Webkomponenten sind. Einige Komponenten wie <map> und <video> werden als in das Betriebssystem integrierte Komponenten gerendert, die über WebView gelegt werden. Für den Entwickler ist dieses Implementierungsdetail nicht sichtbar. Die Komponente wird wie jede andere programmiert.

Wie immer variieren die Details, aber die allgemeinen Programmierkonzepte sind bei allen Super-App-Anbietern gleich. Ein wichtiges Konzept ist die Datenbindung, wie bereits in den Markup-Sprachen gezeigt. Im Allgemeinen werden Komponenten nach Funktion gruppiert, damit Sie die richtige für die Aufgabe leichter finden. Unten sehen Sie ein Beispiel für die Kategorisierung von Alipay, die der Komponentengruppierung anderer Anbieter ähnelt.

  • Container ansehen
    • view
    • swiper
    • scroll-view
    • cover-view
    • cover-image
    • movable-view
    • movable-area
  • Einfache 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
  • Offene Komponenten
    • web-view
    • lifestyle
    • contact-button
  • Barrierefreiheit
    • aria-component

Unten sehen Sie, wie das <image> von Alipay in einer a:for-Anweisung verwendet wird (siehe Listen-Rendering), die ein in index.js bereitgestelltes Bilddaten-Array durchläuft.

/* 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 Ereignishandler onTap, onError und onLoad an die Funktionen mit demselben Namen. Wie bereits gezeigt, wird das <image>-Tag intern in ein <div> mit einem Platzhalter für die endgültigen Abmessungen des Bilds, optionalem Lazy Loading, einer Standardquelle usw. konvertiert.

Alle verfügbaren Konfigurationsoptionen der Komponente sind in der Dokumentation aufgeführt. Eine in die Dokumentation eingebettete Komponentenvorschau mit Simulator macht den Code sofort greifbar.

Dokumentation der Alipay-Komponente mit eingebetteter Komponentenvorschau, die einen Code-Editor mit Simulator zeigt, in dem die Komponente auf einem simulierten iPhone 6 gerendert wird.
Dokumentation der Alipay-Komponente mit eingebetteter Komponentenvorschau.
Die Vorschau der Alipay-Komponente wird in einem separaten Browsertab ausgeführt und zeigt einen Code-Editor mit Simulator, der die auf einem simulierten iPhone 6 gerenderte Komponente zeigt.
Die Vorschau der Alipay-Komponente wurde in einem eigenen Tab geöffnet.

Jede Komponente hat auch einen QR-Code, der mit der Alipay App gescannt werden kann. Dadurch wird das Komponentenbeispiel in einem eigenständigen Minimalbeispiel geöffnet.

Nach dem Scannen eines QR-Codes in der Dokumentation wurde die Vorschau der Bildkomponente von Alipay auf einem echten Gerät angezeigt.
Vorschau der Alipay-<image>-Komponente auf einem echten Gerät, nachdem ein QR-Code-Link aus der Dokumentation aufgerufen wurde.

Entwickler können über ein proprietäres URI-Schema antdevtool-tiny:// direkt von der Dokumentation zur Alipay DevTools IDE wechseln. 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

Neben den vom Anbieter bereitgestellten Komponenten können Entwickler auch benutzerdefinierte Komponenten erstellen. Das Konzept gibt es für WeChat, ByteDance, Alipay, Baidu und 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 das CSS.

<view class="name" bindtap="tap">{{name}} {{age}}</view>

.name {
  color: red;
}

Die Datei custom.js enthält die Logik. Die Lebenszyklusfunktionen der Komponenten sind attached(), detached(), created() und ready(). Die Komponente kann außerdem auf Ereignisse des Seitenlebenszyklus reagieren, nämlich 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"), unter 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 geprüft.