Componenti dell'app mini

Thomas Steiner

Nota: questo post fa parte di una raccolta di articoli in cui ogni articolo si basa su articoli precedenti. Se hai appena raggiunto questa pagina, ti consigliamo di iniziare a leggere dall'inizio.

Componenti web

I componenti web hanno iniziato con consente agli sviluppatori di metterli in un unico posto e di creare app eccezionali basate su di loro. Esempi di come componenti atomici sono gli time-element di GitHub, Stefan Judis web-vitals-element o presa vergognosa, L'opzione di attivazione/disattivazione della modalità Buio di Google. Per quanto riguarda di progettazione completi, tuttavia, ho osservato che le persone preferiscono fare affidamento su un insieme dello stesso fornitore. Un elenco incompleto di esempi include Componenti web UI 5, il Elementi polimerici, Vaadin's items, Microsoft VELOCE, il Componenti Material Web, probabilmente i componenti AMP e molti altri. A causa di un fattori che esulano dall'ambito di questo articolo, molti sviluppatori, tuttavia, si sono concentrati anche su come React, Vue.js, Ember.js e così via. Anziché offrire allo sviluppatore la libertà di scegliere tra una qualsiasi di queste opzioni (oppure, a seconda del tuo punto di vista, costringendo a fare una scelta tecnologica), i fornitori di superapp forniscono universalmente un insieme di componenti che gli sviluppatori devono utilizzare.

Componenti in mini app

Puoi considerare questi componenti come una qualsiasi delle librerie dei componenti menzionate sopra. Per ottenere una panoramica dei componenti disponibili, puoi sfogliare libreria dei componenti di WeChat componenti di ByteDance, Componenti di Alipay, di Baidu e Componenti dell'app rapida.

Prima ho mostrato che, mentre, ad esempio, <image> di WeChat è un componente web sottostante, non tutti tecnicamente sono componenti web. Alcune come <map> e <video>, vengono visualizzati come Componenti integrati nel sistema operativo sovrapponibili a WebView. Per gli sviluppatori, questi dettagli dell'implementazione non vengono rivelati, sono programmati come qualsiasi altro componente.

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

• Visualizza 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
• Tela
  • canvas
• Mappa
  • map
• Apri componenti
  • web-view
  • lifestyle
  • contact-button
• Funzioni di
  • aria-component

Di seguito puoi vedere il metodo di pagamento <image> di Alipay utilizzato in un Istruzione a:for (vedi Rendering 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 i tre gestori di eventi onTap, onError e onLoad alle funzioni con lo stesso nome. Come mostrato prima, il tag <image> viene convertito internamente in un <div> con un segnaposto delle dimensioni finali dell'immagine, caricamento lento facoltativo, un'origine predefinita, ecc.

Le opzioni di configurazione disponibili per il componente sono tutte elencate nella documentazione. Un elemento incorporato nei documenti anteprima dei componenti con il simulatore rende il codice immediatamente tangibile.

. Documentazione del componente Alipay con anteprima del componente incorporata.

di Gemini Advanced.

.

.

L'anteprima del componente Alipay è visibile in una scheda separata.

Ogni componente ha anche un codice QR che può essere scansionato con l'app Alipay, che apre il 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 dalla documentazione direttamente all'IDE Alipay DevTools sfruttando una schema URI proprietario antdevtool-tiny://. In questo modo la documentazione può collegarsi direttamente a un il progetto di una mini app da importare, in modo che gli sviluppatori possano iniziare a usare il componente immediatamente.

Componenti personalizzati

Oltre a utilizzare i componenti forniti dal fornitore, gli sviluppatori possono anche creare componenti personalizzati. La concetto esiste per WeChat ByteDance, Alipay e Baidu e App rapida. 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 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 eventi del ciclo di vita delle pagine, ossia 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 (qui: "custom") con cui può essere utilizzato il componente personalizzato in index.swan.

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

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

Successo: continua a leggere per saperne di più su struttura, ciclo di vita e bundle del progetto di mini app.

Ringraziamenti

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