Mini-App-Komponenten

Thomas Steiner

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.
Dokumentation zu Alipay-Komponenten mit eingebetteter Komponentenvorschau.
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.
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. 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.
Vorschau der Alipay-Komponente <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.