Composants de la mini-appli

Thomas Steiner

Composants Web

Les composants Web ont été conçus pour permettre aux développeurs de les assembler et de créer des applications de qualité. Parmi ces composants atomiques, on peut citer les éléments temporels de GitHub, web-vitals-element de Stefan Judis ou, pour faire un peu de pub, le bouton bascule du mode sombre de Google. Toutefois, en ce qui concerne les systèmes de conception complets, j'ai observé que les utilisateurs préfèrent s'appuyer sur un ensemble cohérent de composants provenant du même fournisseur. Voici une liste non exhaustive d'exemples : UI5 Web Components de SAP, les éléments Polymer, les éléments Vaadin, FAST de Microsoft, les composants Web Material, sans oublier les composants AMP, et bien d'autres encore. Toutefois, en raison de nombreux facteurs qui ne sont pas abordés dans cet article, de nombreux développeurs se sont également tournés vers des frameworks tels que React, Vue.js, Ember.js, etc. Au lieu de laisser le développeur choisir parmi ces options (ou, selon votre point de vue, de l'forcer à faire un choix technologique), les fournisseurs de super applications fournissent universellement un ensemble de composants que les développeurs doivent utiliser.

Composants dans les mini-applications

Vous pouvez considérer ces composants comme n'importe quelle bibliothèque de composants mentionnée ci-dessus. Pour obtenir une vue d'ensemble des composants disponibles, vous pouvez parcourir la bibliothèque de composants de WeChat, les composants de ByteDance, les composants d'Alipay, ceux de Baidu et les composants Quick App.

J'ai montré précédemment que, par exemple, le <image> de WeChat est un composant Web en interne, mais que tous ces composants ne sont pas techniquement des composants Web. Certains composants, comme <map> et <video>, sont affichés en tant que composants intégrés à l'OS qui sont superposés à la WebView. Pour le développeur, ce détail d'implémentation n'est pas révélé. Les composants sont programmés comme n'importe quel autre composant.

Comme toujours, les détails varient, mais les concepts de programmation généraux sont les mêmes pour tous les fournisseurs de super applications. La liaison de données est un concept important, comme indiqué précédemment dans Langages de balisage. En général, les composants sont regroupés par fonction, ce qui facilite la recherche du bon composant. Vous trouverez ci-dessous un exemple de catégorisation d'Alipay, qui est similaire au regroupement de composants d'autres fournisseurs.

• Afficher les conteneurs
  • view
  • swiper
  • scroll-view
  • cover-view
  • cover-image
  • movable-view
  • movable-area
• Contenu de base
  • text
  • icon
  • progress
  • rich-text
• Composants de formulaire
  • button
  • form
  • label
  • input
  • textarea
  • radio
  • radio-group
  • checkbox
  • checkbox-group
  • switch
  • slider
  • picker-view
  • picker
• Navigation
  • navigator
• Composants multimédias
  • image
  • video
• Canvas
  • canvas
• Carte
  • map
• Ouvrir les composants
  • web-view
  • lifestyle
  • contact-button
• Accessibilité
  • aria-component

Vous pouvez voir ci-dessous le <image> d'Alipay utilisé dans une directive a:for (voir Rendu de liste) qui effectue une boucle sur un tableau de données d'image fourni dans 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>

Notez la liaison de données de item.mode à l'attribut mode, de src à l'attribut src et des trois gestionnaires d'événements onTap, onError et onLoad aux fonctions du même nom. Comme indiqué précédemment, la balise <image> est convertie en interne en <div> avec un espace réservé pour les dimensions finales de l'image, un chargement différé facultatif, une source par défaut, etc.

Toutes les options de configuration disponibles du composant sont listées dans la documentation. Un aperçu de composant avec simulateur intégré à la documentation rend le code immédiatement tangible.

Chaque composant dispose également d'un code QR qui peut être scanné avec l'application Alipay et qui ouvre l'exemple de composant dans un exemple minimal autonome.

Les développeurs peuvent passer directement de la documentation à l'IDE Alipay DevTools en utilisant un schéma URI propriétaire antdevtool-tiny://. Cela permet à la documentation de créer un lien direct vers un projet de miniapp à importer, afin que les développeurs puissent commencer à utiliser le composant immédiatement.

Composants personnalisés

En plus d'utiliser les composants fournis par le fournisseur, les développeurs peuvent également créer des composants personnalisés. Ce concept existe pour WeChat, ByteDance, Alipay et Baidu, ainsi que pour Quick App. Par exemple, un composant personnalisé Baidu se compose de quatre fichiers qui doivent résider dans le même dossier : custom.swan, custom.css, custom.js et custom.json.

Le fichier custom.json indique que le contenu du dossier est un composant personnalisé.

{
  "component": true
}

Le fichier custom.swan contient le balisage et custom.css le CSS.

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

.name {
  color: red;
}

Le fichier custom.js contient la logique. Les fonctions de cycle de vie des composants sont attached(), detached(), created() et ready(). Le composant peut également réagir aux événements du cycle de vie de la page, à savoir show() et 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 () {},
  },
});

Le composant personnalisé peut ensuite être importé dans index.json. La clé de l'importation détermine le nom (ici : "custom") avec lequel le composant personnalisé peut ensuite être utilisé dans index.swan.

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

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

Remerciements

Cet article a été examiné par Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent, et Keith Gu.