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 incorporato, che mostra un editor di codice con un simulatore che mostra il componente sottoposto a rendering su un iPhone 6 simulato.](https://web.developers.google.cn/static/articles/mini-apps/mini-app-components/image/alipay-component-document-6b7c4f21b0d0f.png?authuser=9&hl=it)
![Anteprima del componente Alipay in esecuzione in una scheda del browser separata che mostra un editor di codice con un simulatore che mostra il componente sottoposto a rendering su un iPhone 6 simulato.](https://web.developers.google.cn/static/articles/mini-apps/mini-app-components/image/alipay-component-preview-1da9c839edf25.png?authuser=9&hl=it)
Ogni componente ha anche un codice QR che può essere scansionato con l'app Alipay, che apre il componente. in un esempio minimo autonomo.
![Il componente "immagine" di Alipay è stato visualizzato in anteprima su un dispositivo reale dopo la scansione di un codice QR nella documentazione.](https://web.developers.google.cn/static/articles/mini-apps/mini-app-components/image/alipays-image-componen-696a04ff61022.png?authuser=9&hl=it)
<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>
Ringraziamenti
Questo articolo è stato esaminato da Mario Rossi Kayce Basques, Milica Mihajlija, Alan Kent e Keith Gu.