Mini-App-Komponenten

Thomas Steiner

Hinweis: Dieser Beitrag ist Teil einer Artikelreihe, in der jeder Artikel auf den vorherigen aufbaut. Wenn Sie gerade erst hier gelandet sind, sollten Sie vielleicht von Anfang an lesen.

Webkomponenten

Webkomponenten wurden mit dem Versprechen entwickelt, dass Entwickler sie zusammensetzen und darauf aufbauend großartige Apps erstellen können. Beispiele für solche atomaren Komponenten sind die Zeitelemente von GitHub, das Web-Vitals-Element von Stefan Judis oder, ganz unbescheiden, der Dark-Mode-Schalter von Google. Wenn es jedoch um vollständige Designsysteme geht, habe ich beobachtet, dass Nutzer es vorziehen, sich auf ein einheitliches Set von Komponenten desselben Anbieters zu verlassen. Eine unvollständige Liste von Beispielen umfasst die UI5 Web Components von SAP, die Polymer Elements, Elemente von Vaadin, FAST von Microsoft, die Material Web Components, die AMP-Komponenten und viele mehr. Aufgrund einer Reihe von Faktoren, die den Rahmen dieses Artikels sprengen, haben sich viele Entwickler jedoch auch Frameworks wie React, Vue.js, Ember.js usw. zugewandt. Anstatt dem Entwickler die Freiheit zu geben, aus einer dieser Optionen zu wählen (oder ihn je nach Sichtweise zu zwingen , eine Technologie auszuwählen), stellen Super-App-Anbieter einheitlich 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. Eine Übersicht über die verfügbaren Komponenten finden Sie in der Komponentenbibliothek von WeChat, den Komponenten von ByteDance, den Komponenten von Alipay, den Komponenten von Baidu und den Komponenten von Quick App.

Ich habe bereits gezeigt, dass beispielsweise das <image>Element von WeChat zwar eine Webkomponente ist, aber nicht alle diese Komponenten technisch Webkomponenten sind. Einige Komponenten wie <map> und <video> werden als im Betriebssystem integrierte Komponenten gerendert, die über die WebView gelegt werden. Für den Entwickler wird dieses Implementierungsdetail nicht angezeigt. Sie werden 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 bereits unter Auszeichnungssprachen gezeigt. Im Allgemeinen werden Komponenten nach Funktion gruppiert, sodass es einfacher ist, die richtige für die jeweilige Aufgabe zu finden. Unten sehen Sie ein Beispiel für die Kategorisierung von Alipay, die der Komponentengruppierung anderer Anbieter ähnelt.

• View-Container
  • 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 das <image>-Element von Alipay, das in einer a:for-Anweisung (siehe List rendering) verwendet wird, die ein Array mit Bilddaten durchläuft, das in index.js bereitgestellt wird.

/* 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 gleichnamigen Funktionen. Wie bereits gezeigt, wird das <image> Tag intern in ein <div> mit einem Platzhalter für die endgültigen Abmessungen des Bildes, optionalem Lazy Loading, einer Standardquelle, usw. umgewandelt.

Die verfügbaren Konfigurationsoptionen der Komponente sind alle in der Dokumentation aufgeführt. Eine in die Dokumentation eingebettete Komponenten-Vorschau mit Simulator macht den Code sofort greifbar.

Dokumentation der Alipay-Komponente mit eingebetteter Komponenten-Vorschau.

Vorschau der Alipay-Komponente in einem eigenen Tab.

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.

Vorschau der Alipay-Komponente <image> auf einem echten Gerät, nachdem ein QR-Code-Link aus der Dokumentation gefolgt wurde.

Entwickler können über ein proprietäres URI-Schema antdevtool-tiny:// direkt aus der Dokumentation in die Alipay DevTools IDE springen. So kann die Dokumentation direkt mit einem zu importierenden Mini-App-Projekt verknüpft werden, sodass Entwickler sofort mit der Komponente loslegen 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 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 kennzeichnet 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 Komponente sind attached(), detached(), created() und ready(). Die Komponente kann zusätzlich auch auf Lebenszyklusereignisse der Seite 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"), mit dem die benutzerdefinierte Komponente dann in index.swan verwendet werden kann.

{
  "usingComponents": {
    "custom": "/components/custom/custom"
  }
}

<view>
  <custom name="swanapp"></custom>
</view>

Erfolg: Lesen Sie weiter, um mehr über die Projektstruktur, den Lebenszyklus und das Bündeln von Mini-Apps zu erfahren.

Danksagungen

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