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.
![Documentazione del componente Alipay con anteprima del componente incorporato che mostra un editor di codice con simulatore che mostra il rendering del componente su un iPhone 6 simulato.](https://web.developers.google.cn/static/articles/mini-apps/mini-app-components/image/alipay-component-document-6b7c4f21b0d0f.png?authuser=6&hl=it)
![Anteprima del componente Alipay in esecuzione in una scheda del browser separata che mostra un editor di codice con simulatore che mostra il rendering del componente su un iPhone 6 simulato.](https://web.developers.google.cn/static/articles/mini-apps/mini-app-components/image/alipay-component-preview-1da9c839edf25.png?authuser=6&hl=it)
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.
![Il componente "image" di Alipay è stato visualizzato in anteprima su un dispositivo reale dopo aver scansionato un codice QR nella documentazione.](https://web.developers.google.cn/static/articles/mini-apps/mini-app-components/image/alipays-image-componen-696a04ff61022.png?authuser=6&hl=it)
<image>
su un dispositivo reale dopo aver seguito un link al codice QR dalla documentazione.
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.