Componentes da Web
Os componentes da Web começaram com a promessa de permitir que os desenvolvedores os juntem e criem ótimos apps com base neles. Exemplos desses componentes atômicos são os elementos de tempo do GitHub, o web-vitals-element (link em inglês) de Stefan Judis ou o plugue sem vergonha, o botão de modo escuro do Google. No entanto, quando se trata de sistemas de design completos, as pessoas preferem confiar em um conjunto coerente de componentes do mesmo fornecedor. Uma lista incompleta de exemplos inclui os UI5 Web Components da SAP, os elementos do polímero, os elementos do Vaadin, o FAST da Microsoft, os Material Web Components, possivelmente os componentes AMP e muito mais. No entanto, devido a vários fatores fora do escopo deste artigo, muitos desenvolvedores também migraram para frameworks como React, Vue.js, Ember.js etc. Em vez de dar ao desenvolvedor a liberdade de escolher qualquer uma dessas opções (ou, dependendo do seu ponto de vista, forcing os desenvolvedores para definir uma escolha de tecnologia), um superprovedor de apps precisa usar um superprovedor de componentes.
Componentes de miniapps
Você pode pensar nesses componentes como qualquer uma das bibliotecas de componentes mencionadas acima. Para ter uma visão geral dos componentes disponíveis, navegue por biblioteca de componentes do WeChat, componentes do ByteDance, componentes do Alipay, Baidu's e componentes de app rápido.
Anteriormente, mostrei que, embora o <image>
do WeChat seja um componente da Web em segundo plano, por exemplo, nem todos esses componentes são tecnicamente. Alguns
componentes, como <map>
e <video>
, são renderizados como
componentes integrados ao SO
que são sobrepostos à WebView. Para o desenvolvedor, esse detalhe da implementação não é revelado,
eles são programados como qualquer outro componente.
Como sempre, os detalhes variam, mas os conceitos gerais de programação são os mesmos em todos os provedores de superapps. Um conceito importante é a vinculação de dados, conforme mostrado anteriormente em Linguagens de marcação. Em geral, os componentes são agrupados por função, então é mais fácil encontrar o correto para o trabalho. Veja abaixo um exemplo de categorização do Alipay, que é semelhante ao agrupamento de componentes de outros fornecedores.
- Confira os contêineres
view
swiper
scroll-view
cover-view
cover-image
movable-view
movable-area
- Conteúdo básico
text
icon
progress
rich-text
- Componentes do formulário
button
form
label
input
textarea
radio
radio-group
checkbox
checkbox-group
switch
slider
picker-view
picker
- Navegação
navigator
- Componentes de mídia
image
video
- Tela
canvas
- Mapa
map
- Abrir componentes
web-view
lifestyle
contact-button
- Acessibilidade
aria-component
Abaixo, você pode conferir o <image>
de Alipay usado em uma diretiva a:for
(consulte Renderização de lista) que gera um loop em uma matriz de dados de imagem fornecida em 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>
Observe a vinculação de dados de item.mode
ao atributo mode
, da src
ao atributo src
e dos três manipuladores de eventos onTap
, onError
e onLoad
às funções de mesmo nome. Como
mostrado antes, a tag <image>
é convertida internamente em um
<div>
com um marcador das dimensões finais da imagem, carregamento lento opcional, uma origem padrão
etc.
As opções de configuração disponíveis do componente estão listadas na documentação. Uma visualização de componentes com simulador incorporada nos documentos torna o código imediatamente tangível.
![Documentação do componente Alipay com visualização do componente incorporado, mostrando um editor de código com um simulador que mostra o componente renderizado em um iPhone 6 simulado.](https://web.dev/static/articles/mini-apps/mini-app-components/image/alipay-component-document-6b7c4f21b0d0f.png?authuser=6&hl=pt)
![Visualização do componente Alipay em execução em uma guia separada do navegador mostrando um editor de código com um simulador que mostra o componente renderizado em um iPhone 6 simulado.](https://web.dev/static/articles/mini-apps/mini-app-components/image/alipay-component-preview-1da9c839edf25.png?authuser=6&hl=pt)
Cada componente também tem um código QR que pode ser lido com o app Alipay, que abre o exemplo de componente em um exemplo mínimo independente.
![O componente "image" de Alipay foi visualizado em um dispositivo real após a leitura de um código QR na documentação.](https://web.dev/static/articles/mini-apps/mini-app-components/image/alipays-image-componen-696a04ff61022.png?authuser=6&hl=pt)
<image>
do Alipay em um dispositivo real depois de seguir um link de código QR nos documentos.
Os desenvolvedores podem acessar a documentação diretamente para o ambiente de desenvolvimento integrado do Alipay DevTools usando um
esquema de URI próprio antdevtool-tiny://
. Isso permite que a documentação seja vinculada diretamente a um
projeto de miniapp a ser importado para que os desenvolvedores possam começar a usar o componente imediatamente.
Componentes personalizados
Além de usar os componentes fornecidos pelo fornecedor, os desenvolvedores também podem criar componentes personalizados. O
conceito existe para
WeChat,
ByteDance,
Alipay e
Baidu, bem como para o
Quick App.
Por exemplo, um componente personalizado do Baidu consiste em quatro arquivos que precisam residir na mesma pasta:
custom.swan
, custom.css
, custom.js
e custom.json
.
O arquivo custom.json
indica o conteúdo da pasta como um componente personalizado.
{
"component": true
}
O arquivo custom.swan
contém a marcação e custom.css
o CSS.
<view class="name" bindtap="tap">{{name}} {{age}}</view>
.name {
color: red;
}
O arquivo custom.js
contém a lógica. As funções do ciclo de vida do componente são attached()
,
detached()
, created()
e ready()
. O componente também pode reagir a
eventos de ciclo de vida da página, ou seja, 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 () {},
},
});
O componente personalizado pode ser importado em index.json
, a chave de importação determina o nome
(aqui: "custom"
) com o qual o componente personalizado pode ser usado em index.swan
.
{
"usingComponents": {
"custom": "/components/custom/custom"
}
}
<view>
<custom name="swanapp"></custom>
</view>
Agradecimentos
Este artigo foi revisado por Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent e Keith Gu.