Componenti dell'app mini

Thomas Steiner

Nota: questo post fa parte di una raccolta di articoli in cui ogni articolo si basa su quelli precedenti. Se sei arrivato qui per caso, ti consigliamo di iniziare a leggere dall'inizio.

Componenti web

I componenti web sono nati con la promessa di consentire agli sviluppatori di assemblarli e creare fantastiche app. Esempi di questi componenti atomici sono gli elementitemporalidi GitHub, l'elementoWeb Vitalsdi Stefan Judis o, senza vergogna, l'opzione di attivazione/disattivazione della modalitàBuiodi Google. Tuttavia, quando si tratta di sistemi di progettazione completi, ho notato che le persone preferiscono affidarsi a un insieme coerente di componenti dello stesso fornitore. Un elenco incompleto di esempi include i componenti web UI5 di SAP, gli elementi Polymer, gli elementi di Vaadin, FAST di Microsoft, i componenti web Material, probabilmente i componenti AMP e molti altri. Tuttavia, a causa di una serie di fattori non trattati in questo articolo, molti sviluppatori si sono rivolti anche a framework come React, Vue.js, Ember.js e così via. Anziché dare allo sviluppatore la libertà di scegliere tra queste opzioni (o, a seconda del punto di vista, costringerlo a fare una scelta tecnologica), i fornitori di super app forniscono universalmente un insieme di componenti che gli sviluppatori devono utilizzare.

Componenti nelle mini app

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

In precedenza ho mostrato che, ad esempio, sebbene <image> sia un componente web, non tutti questi componenti 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, questo dettaglio di implementazione non viene rivelato, ma i componenti vengono programmati come qualsiasi altro componente.

Come sempre, i dettagli variano, ma i concetti di programmazione generali sono gli stessi per tutti i fornitori di super app. Un concetto importante è l'associazione di dati, come mostrato in precedenza in Linguaggi di markup. In genere, i componenti vengono raggruppati per funzione, quindi è più facile trovare quello giusto per il lavoro. Di seguito è riportato un esempio della categorizzazione di Alipay, simile al raggruppamento dei componenti di altri fornitori.

• Visualizza i contenitori
  • 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
• Canvas
  • canvas
• Mappa
  • map
• Componenti aperti
  • web-view
  • lifestyle
  • contact-button
• Accessibilità
  • aria-component

Di seguito, puoi vedere <image> di Alipay utilizzato in una direttiva a:for (vedi Rendering di elenchi) che esegue un 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, di src all'attributo src, e dei tre gestori di eventi onTap, onError e onLoad alle funzioni con lo stesso nome. Come mostrato in precedenza, il <image> tag viene convertito internamente in un <div> con un segnaposto delle dimensioni finali dell'immagine, il caricamento lento facoltativo, un'origine predefinita, e così via.

Tutte le opzioni di configurazione disponibili del componente sono elencate nella documentazione. Un'anteprima del componente incorporata nella documentazione con il simulatore rende il codice immediatamente tangibile.

Documentazione dei componenti di Alipay con anteprima dei componenti incorporata.

Anteprima dei componenti di Alipay visualizzata in una scheda separata.

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.

Anteprima del componente <image> di Alipay su un dispositivo reale dopo aver seguito un link con codice QR dalla documentazione.

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

Componenti personalizzati

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

Il file custom.json indica che i contenuti della cartella sono 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 della pagina, 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 dell'importazione determina il nome (in questo caso: "custom") con cui il componente personalizzato può essere utilizzato in index.swan.

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

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

Operazione riuscita: continua a leggere per scoprire di più sulla struttura, sul ciclo di vita e sul raggruppamento dei progetti di mini app.

Ringraziamenti

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