Componentes da Web
Os componentes da Web começaram com o de permitir que os desenvolvedores os reúnam e criem ótimos aplicativos com base neles. Exemplos de tais componentes atômicos são os elementos de tempo do GitHub, Stefan Judis web-vitals-element Alternar para o modo escuro do Google. Quando se trata de sistemas de design completos, no entanto, notei que as pessoas preferem confiar em um conjunto coerente de do mesmo fornecedor. Uma lista incompleta de exemplos inclui as APIs Componentes da Web do UI5, o Elementos do polímero, Elementos do Vaadin, da Microsoft RÁPIDO, o Componentes do Material Web, como os componentes AMP e muito mais. Devido a vários fatores fora do escopo deste artigo, no entanto, muitos desenvolvedores também 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, forçar a escolha da tecnologia), os super provedores de apps oferecem de maneira universal um conjunto de componentes que os desenvolvedores precisam usar.
Componentes em miniapps
Pense nesses componentes como qualquer uma das bibliotecas de componentes mencionadas acima. Para receber um uma visão geral dos componentes disponíveis, navegue Biblioteca de componentes do WeChat, Componentes do ByteDance, Componentes do Alipay, Baidu's e Componentes de app rápido.
Anteriormente, mostrou que embora, por exemplo, o <image>
do WeChat
é um componente da Web em segundo plano, nem todos eles são tecnicamente componentes da Web. Algumas
componentes, como <map>
e <video>
, são renderizados como
Componentes integrados do SO
que são colocados em camadas sobre a WebView. Para o desenvolvedor, esse detalhe de 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 superapps provedores de rede. Um conceito importante é a vinculação de dados, como mostrado antes Linguagens de marcação. Geralmente, os componentes são agrupados por função, portanto, encontrar os o certo para o trabalho é mais fácil. Confira abaixo um exemplo da categorização de Alipay, que é semelhante ao agrupamento de componentes de outros fornecedores.
- Ver 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 GPS
navigator
- Componentes de mídia
image
video
- Tela
canvas
- Mapa
map
- Abrir componentes
web-view
lifestyle
contact-button
- Acessibilidade
aria-component
Veja abaixo os <image>
da Alipay usados em uma
Diretiva a:for
(consulte Renderização de lista) que passa por uma matriz de dados de imagem.
fornecido 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
, e src
ao atributo src
.
e os três manipuladores de eventos onTap
, onError
e onLoad
para as funções com o mesmo nome. Conforme
mostrada antes, a tag <image>
é convertida internamente em uma
<div>
com um marcador de posição 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 todas listadas no documentação. Um recurso integrado aos documentos Prévia do componente com simulador 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 simulador que mostra o componente renderizado em um iPhone 6 simulado.](https://web.developers.google.cn/static/articles/mini-apps/mini-app-components/image/alipay-component-document-6b7c4f21b0d0f.png?authuser=1&hl=pt-br)
![Visualização do componente Alipay em execução em uma guia separada do navegador mostrando um editor de código com simulador que mostra o componente renderizado em um iPhone 6 simulado.](https://web.developers.google.cn/static/articles/mini-apps/mini-app-components/image/alipay-component-preview-1da9c839edf25.png?authuser=1&hl=pt-br)
Cada componente também tem um QR code que pode ser lido com o app Alipay, que abre o componente. em um exemplo mínimo independente.
![O componente "image" de Alipay foi visualizado em um dispositivo real após a leitura de um QR code na documentação.](https://web.developers.google.cn/static/articles/mini-apps/mini-app-components/image/alipays-image-componen-696a04ff61022.png?authuser=1&hl=pt-br)
<image>
do Alipay em um dispositivo real depois de seguir um link de código QR nos documentos.
Os desenvolvedores podem pular da documentação diretamente para o ambiente de desenvolvimento integrado do Alipay DevTools aproveitando um
esquema de URI reservado antdevtool-tiny://
. Isso permite que a documentação seja vinculada diretamente a um
miniprojeto de app 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. A
existe para
WeChat
ByteDance e
Alipay
Baidu, bem como
App Rápido.
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
eventos de ciclo de vida da página, como 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 para o index.json
. A chave de importação determina o nome.
(aqui: "custom"
) com que 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 João Medley, Bascos Kayce, Milica Mihajlija, Alan Kent, e Keith Gu.