Composants de la mini-appli

Thomas Steiner

Remarque : Ce post fait partie d'une collection d'articles dans laquelle chaque article s'appuie sur des articles précédents. Si vous arrivez ici, vous devriez commencer la lecture depuis le début.

Composants Web

Les composants Web ont débuté par de permettre aux développeurs de les assembler et de créer d'excellentes applications. Exemples de comme les éléments de temps de GitHub, Judis web-vitals-element le mode sombre de Google ; Quand il s'agit de des systèmes de conception complets, cependant, j'ai observé que les gens préfèrent s'appuyer sur un ensemble cohérent composants d'un même fournisseur. Une liste incomplète d'exemples inclut Composants Web UI5, Éléments polymères, Éléments de Vaadin, Microsoft RAPIDE, le Composants Web Material, sans doute les composants AMP, et bien d'autres. En raison d'un de nombreux facteurs ne sont pas abordés dans cet article. Cependant, de nombreux développeurs ont également afflué tels que React, Vue.js, Ember.js, etc. Au lieu de laisser le développeur choisir entre l'une de ces options (ou, selon votre point de vue, les obliger à faire un choix technologique) les fournisseurs de super-applications fournissent universellement un ensemble de composants que les développeurs doivent utiliser.

Composants des mini-applications

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

Je vous ai précédemment montré que, par exemple, le <image> de WeChat est un composant Web en arrière-plan, mais techniquement tous ces composants ne sont pas des composants Web. Un peu tels que <map> et <video>, s'affichent sous la forme Composants de l'OS qui sont superposées à la WebView. Pour le développeur, ce détail d'implémentation n'est pas révélé, ils sont programmés comme tout autre composant.

Comme toujours, les détails varient, mais les concepts de programmation généraux sont les mêmes pour toutes les super applications. fournisseurs de services cloud. La liaison de données est un concept important, Langages de balisage. En général, les composants sont regroupés par fonction. la bonne pour le travail est plus facile. Vous trouverez ci-dessous un exemple issu de la catégorisation d'Alipay, qui est similaire au groupe de composants d'autres fournisseurs.

• Afficher les conteneurs <ph type="x-smartling-placeholder">
  </ph>
  • view
  • swiper
  • scroll-view
  • cover-view
  • cover-image
  • movable-view
  • movable-area
• Contenu de base <ph type="x-smartling-placeholder">
  </ph>
  • text
  • icon
  • progress
  • rich-text
• Composants des formulaires <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
• Composants multimédias <ph type="x-smartling-placeholder">
  </ph>
  • image
  • video
• Canevas <ph type="x-smartling-placeholder">
  </ph>
  • canvas
• Plan <ph type="x-smartling-placeholder">
  </ph>
  • map
• Ouvrir les composants <ph type="x-smartling-placeholder">
  </ph>
  • web-view
  • lifestyle
  • contact-button
• Fonctionnalités <ph type="x-smartling-placeholder">
  </ph>
  • aria-component

Vous trouverez ci-dessous la valeur <image> d'Alipay utilisée dans un Directive a:for (voir Rendu de liste) qui est lue en boucle sur un tableau de données d'image fournies 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 avec l'attribut mode, de src avec l'attribut src. et les trois gestionnaires d'événements onTap, onError et onLoad aux fonctions portant le même nom. En tant que affiché avant, le tag <image> est converti 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.

Les options de configuration disponibles pour le composant sont toutes répertoriées dans la documentation. Une intégration dans la documentation Aperçu du composant avec simulateur rend le code immédiatement tangible.

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

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

</ph> Documentation sur le composant Alipay avec aperçu du composant intégré.

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

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

</ph> L'aperçu du composant Alipay s'affiche dans un onglet spécifique.

Chaque composant est également associé à un code QR qui peut être scanné avec l'application Alipay qui ouvre le composant. dans un exemple minimal autonome.

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

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

</ph> Prévisualisez le composant Alipay <image> sur un appareil réel après avoir suivi un lien vers un code QR dans la documentation.

Les développeurs peuvent passer directement de la documentation à l'IDE d'Alipay DevTools à l'aide d'un schéma d'URI propriétaire antdevtool-tiny://. Cela permet de lier directement la documentation mini projet d'application à importer, afin que les développeurs puissent commencer à utiliser le composant immédiatement.

Composants personnalisés

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

Le fichier custom.json indique le contenu du dossier en tant que 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 aussi réagir événements de cycle de vie d'une 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 () {},
  },
});

Vous pouvez ensuite importer le composant personnalisé 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>

Réussite : poursuivez la lecture pour en savoir plus sur la structure, le cycle de vie et les offres groupées des mini-applications d'un projet.

Remerciements

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