Mini-App-Komponenten

Thomas Steiner

Hinweis : Dieser Beitrag ist Teil einer Artikelsammlung, in der jeder Artikel auf früheren Artikeln aufbaut. Wenn du gerade erst hier gelandet bist, solltest du mit dem Anfang beginnen.

Webkomponenten

Webkomponenten, die mit den das Versprechen, Entwicklern die Möglichkeit zu geben, sie zusammenzuführen und daraus großartige Apps zu entwickeln. Beispiele für solche atomaren Komponenten sind die time-elements von GitHub, Stefan Judis web-vitals-element oder ein „hameless Plug“, Ein/Aus-Schaltfläche für den dunklen Modus von Google Wenn es darum geht, aber ich habe festgestellt, dass die Menschen eine kohärente Reihe von Designsystemen vom selben Anbieter kaufen. Eine unvollständige Liste von Beispielen UI5 Web Components, die Polymerelemente Vaadins Elemente, Microsofts SCHNELL, der Material Web Components wohl die AMP-Komponenten und vieles mehr. Aufgrund eines viele Faktoren, die in diesem Artikel nicht behandelt werden, Frameworks wie React, Vue.js Ember.js usw. Anstatt dem Entwickler die Wahl zwischen verschiedenen einer dieser Optionen (oder – je nach Ihrem Standpunkt – zwingen, eine Technologieentscheidung zu treffen), Super-App-Anbieter stellen allgemein eine Reihe von Komponenten bereit, die Entwickler verwenden müssen.

Komponenten in Mini-Apps

Stellen Sie sich diese Komponenten wie die oben erwähnten Komponentenbibliotheken vor. Um eine eine Übersicht der verfügbaren Komponenten, WeChat-Komponentenbibliothek, Komponenten von ByteDance, Alipay-Komponenten, Baidu und Komponenten der Quick App.

Ich habe bereits gezeigt, dass beispielsweise <image> von WeChat ist eine Webkomponente im Hintergrund. Nicht alle diese Komponenten sind technisch gesehen Webkomponenten. Einige wie <map> und <video>, werden als In das Betriebssystem integrierte Komponenten die über WebView gelegt werden. Für Entwickler sind diese Details nicht bekannt. wie jede andere Komponente programmiert.

Wie immer variieren die Details, aber die allgemeinen Programmierkonzepte sind bei allen Super-Apps gleich. Anbieter. Ein wichtiges Konzept ist die Datenbindung, wie zuvor in Auszeichnungssprachen: Im Allgemeinen werden Komponenten nach Funktionen gruppiert. das richtige für den Job zu finden. Unten sehen Sie ein Beispiel aus der Kategorisierung von Alipay, bis hin zur Komponentengruppierung anderer Anbieter.

• Container ansehen <ph type="x-smartling-placeholder">
  </ph>
  • view
  • swiper
  • scroll-view
  • cover-view
  • cover-image
  • movable-view
  • movable-area
• Basisinhalte <ph type="x-smartling-placeholder">
  </ph>
  • text
  • icon
  • progress
  • rich-text
• Formularkomponenten <ph type="x-smartling-placeholder">
  </ph>
  • button
  • form
  • label
  • input
  • textarea
  • radio
  • radio-group
  • checkbox
  • checkbox-group
  • switch
  • slider
  • picker-view
  • picker
• Navigation <ph type="x-smartling-placeholder">
  </ph>
  • navigator
• Medienkomponenten <ph type="x-smartling-placeholder">
  </ph>
  • image
  • video
• Leinwand <ph type="x-smartling-placeholder">
  </ph>
  • canvas
• Karte <ph type="x-smartling-placeholder">
  </ph>
  • map
• Komponenten öffnen <ph type="x-smartling-placeholder">
  </ph>
  • web-view
  • lifestyle
  • contact-button
• Zugänglichkeits- <ph type="x-smartling-placeholder">
  </ph>
  • aria-component

Unten sehen Sie, wie Alipay <image> Anweisung a:for (siehe Listenrendering), die eine Schleife über ein Bilddatenarray durchführt bereitgestellt in index.js.

/* 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 mode-Attribut, die src an das src-Attribut und die drei Event-Handler onTap, onError und onLoad auf die Funktionen desselben Namens. Als wie zuvor 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.

Die verfügbaren Konfigurationsoptionen für die Komponente sind alle im Dokumentation. Ein in die Dokumentation eingebettetes Dokument Komponentenvorschau mit Simulator wird der Code sofort greifbar.

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> Alipay-Komponentendokumentation mit eingebetteter Komponentenvorschau.

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> Die Vorschau der Alipay-Komponente wurde in einem eigenen Tab geöffnet.

Jede Komponente verfügt außerdem über einen QR-Code, der mit der Alipay-App gescannt werden kann, über die die Komponente geöffnet wird. in einem eigenständigen Minimalbeispiel an.

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> Vorschau der <image>-Komponente von Alipay auf einem echten Gerät, nachdem Sie einem QR-Code-Link in der Dokumentation gefolgt sind.

Entwickler können von der Dokumentation direkt in die Alipay DevTools-IDE springen, indem sie ein proprietäres URI-Schema antdevtool-tiny://. So kann die Dokumentation direkt mit einem Mini-App-Projekt zu importieren, damit die Entwickler sofort mit der Komponente beginnen können.

Benutzerdefinierte Komponenten

Neben der Verwendung der vom Anbieter bereitgestellten Komponenten können Entwickler auch benutzerdefinierte Komponenten erstellen. Die Konzept existiert für WeChat ByteDance Alipay und Baidu sowie Quick App. Beispielsweise besteht eine benutzerdefinierte Baidu-Komponente 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 auch auf Lebenszyklus-Ereignisse der Seite, 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, wobei der Name vom Schlüssel des Imports bestimmt wird. (hier: "custom"), mit der 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 die Bündelung von Mini-Apps zu erfahren.

Danksagungen

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