Componenti dell'app mini

Componenti web

I componenti web sono nati con la promessa di consentire agli sviluppatori di metterli insieme e creare app eccezionali. Esempi di questi componenti atomici sono time-elements di GitHub, web-vitals-element di Stefan Judis o la presa sfacciata, l'opzione di attivazione/disattivazione della modalità Buio di Google. Quando si tratta di sistemi di progettazione completi, tuttavia, ho notato che le persone preferiscono fare affidamento su un insieme coerente di componenti dello stesso fornitore. Un elenco incompleto di esempi include i componenti web UI5 di SAP, Polymer Elements, Vaadin's, FAST di Microsoft, i componenti web Material, probabilmente i componenti AMP e molti altri. A causa di una serie di fattori che esulano dall'ambito di questo articolo, molti sviluppatori, tuttavia, si sono affidati a framework come React, Vue.js, Ember.js e così via. Anziché concedere allo sviluppatore la libertà di scegliere tra una qualsiasi di queste opzioni (o, a seconda del tuo punto di vista, forcing gli sviluppatori a fare una scelta tecnologica), devono utilizzare un super set di componenti universali.

Componenti nelle mini app

Puoi considerare questi componenti come una qualsiasi delle librerie di componenti menzionate sopra. Per una panoramica dei componenti disponibili, puoi sfogliare la libreria dei componenti di WeChat, i componenti di ByteDance, i componenti di Alipay, i componenti di Baidu e l'app Quick.

Ho dimostrato che, sebbene, ad esempio, <image> di WeChat sia un componente web di base, non tutti sono tecnicamente componenti web. Alcuni componenti, come <map> e <video>, vengono visualizzati come componenti integrati nel sistema operativo che vengono sovrapposti a WebView. Per lo sviluppatore, questi dettagli di implementazione non vengono rivelati, ma sono programmati come qualsiasi altro componente.

Come sempre, i dettagli variano, ma i concetti generali di programmazione sono gli stessi per tutti i provider di superapp. Un concetto importante è l'associazione di dati, come mostrato in precedenza in Linguaggi di markup. In genere, i componenti vengono raggruppati per funzione, quindi trovare quello adatto al job è più facile. Di seguito è riportato un esempio tratto dalla classificazione di Alipay, simile al raggruppamento dei componenti di altri fornitori.

• Visualizza container
  • view
  • swiper
  • scroll-view
  • cover-view
  • cover-image
  • movable-view
  • movable-area
• Contenuti di base
  • text
  • icon
  • progress
  • rich-text
• Componenti del modulo
  • button
  • form
  • label
  • input
  • textarea
  • radio
  • radio-group
  • checkbox
  • checkbox-group
  • switch
  • slider
  • picker-view
  • picker
• Navigazione
  • navigator
• Componenti multimediali
  • image
  • video
• Tela
  • canvas
• Mappa
  • map
• Apri componenti
  • web-view
  • lifestyle
  • contact-button
• Accessibilità
  • aria-component

Di seguito puoi vedere l'elemento <image> di Alipay utilizzato in un'istruzione a:for (vedi Rendering dell'elenco) che esegue il loop su un array di dati immagine fornito 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>

Nota l'associazione di dati di item.mode all'attributo mode, src all'attributo src e dei tre gestori di eventi onTap, onError e onLoad alle funzioni con lo stesso nome. Come mostrato prima, il tag <image> viene convertito internamente in <div> con un segnaposto delle dimensioni finali dell'immagine, il caricamento lento facoltativo, una sorgente predefinita e così via.

Le opzioni di configurazione disponibili del componente sono elencate nella documentazione. Un'anteprima del componente Incorporata nei documenti con simulatore rende il codice immediatamente tangibile.

Ogni componente ha anche un codice QR che può essere scansionato con l'app Alipay che apre l'esempio del componente in un esempio minimo autonomo.

Gli sviluppatori possono passare dalla documentazione direttamente all'IDE di Alipay DevTools sfruttando uno schema URI proprietario antdevtool-tiny://. In questo modo la documentazione può collegarsi direttamente a un progetto di mini app da importare, così gli sviluppatori possono iniziare a utilizzare il componente immediatamente.

Componenti personalizzati

Oltre a utilizzare i componenti forniti dal fornitore, gli sviluppatori possono anche creare componenti personalizzati. Questo concetto esiste per WeChat, ByteDance, Alipay e Baidu, nonché per Rapid App. Ad esempio, un componente personalizzato di Baidu è costituito da quattro file che devono trovarsi nella stessa cartella: custom.swan, custom.css, custom.js e custom.json.

Il file custom.json indica i contenuti della cartella come un componente personalizzato.

{
  "component": true
}

Il file custom.swan contiene il markup e custom.css il CSS.

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

.name {
  color: red;
}

Il file custom.js contiene la logica. Le funzioni del ciclo di vita dei componenti sono attached(), detached(), created() e ready(). Il componente può anche reagire agli eventi del ciclo di vita delle pagine, ovvero show() e 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 () {},
  },
});

Il componente personalizzato può essere importato in index.json. La chiave di importazione determina il nome (qui: "custom") con cui il componente personalizzato può essere utilizzato in index.swan.

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

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

Ringraziamenti

Questo articolo è stato esaminato da Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent, e Keith Gu.