Componentes de mini app

Thomas Steiner

Observação : esta postagem faz parte de uma coleção de artigos em que cada um se baseia nos anteriores. Se você acabou de chegar aqui, talvez queira começar a ler do início.

Componentes da Web

Os componentes da Web começaram com a promessa de permitir que os desenvolvedores os juntassem e criassem ótimos apps com base neles. Exemplos desses componentes atômicos são os elementos de tempo do GitHub, o web-vitals-element de Stefan Judis ou, sem modéstia, a alternância do modo escuro do Google. No entanto, quando se trata de sistemas de design completos, observei que as pessoas preferem usar um conjunto coerente de componentes do mesmo fornecedor. Uma lista incompleta de exemplos inclui os componentes da Web UI5 da SAP, os elementos do Polymer, os elementos do Vaadin, o FAST da Microsoft, os componentes da Web Material, os componentes AMP e muito mais. 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 entre qualquer uma dessas opções (ou, dependendo do seu ponto de vista, forçar a fazer uma escolha de tecnologia), os provedores de superapps fornecem universalmente um conjunto de componentes que os desenvolvedores precisam usar.

Componentes em mini apps

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 pela biblioteca de componentes do WeChat, componentes da ByteDance, componentes do Alipay, Baidu e componentes do Quick App.

Antes, mostrei que, por exemplo, o <image> do WeChat é um componente da Web, mas nem todos esses componentes são tecnicamente componentes da Web. Alguns componentes, como <map> e <video>, são renderizados como componentes integrados ao 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 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, o que facilita a localização do componente certo para o trabalho. Confira abaixo um exemplo da categorização do 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 de 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
• Canvas
  • canvas
• Mapa
  • map
• Abrir componentes
  • web-view
  • lifestyle
  • contact-button
• Acessibilidade
  • aria-component

Abaixo, você pode ver o <image> do Alipay usado em uma diretiva a:for (consulte Renderização de lista) que faz 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 do item.mode ao atributo mode, do 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 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 listadas na documentação. Uma prévia de componente com simulador incorporada à documentação torna o código imediatamente tangível.

Documentação do componente Alipay com visualização incorporada.

A prévia do componente do Alipay apareceu em uma guia própria.

Cada componente também tem um QR code que pode ser lido com o app Alipay, que abre o exemplo de componente em um exemplo mínimo independente.

Visualização do componente <image> do Alipay em um dispositivo real depois de seguir um link de QR code da documentação.

Os desenvolvedores podem acessar a documentação direto no ambiente de desenvolvimento integrado (IDE) do Alipay DevTools usando um esquema de URI proprietário antdevtool-tiny://. Isso permite que a documentação seja vinculada diretamente a um projeto de mini 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. O conceito existe para WeChat, ByteDance, Alipay e Baidu, além do Quick App. Por exemplo, um componente personalizado do Baidu consiste em quatro arquivos que precisam estar 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 o 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 do 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 da importação determina o nome (aqui: "custom") que o componente personalizado pode usar em index.swan.

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

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

Sucesso : continue lendo para saber mais sobre a estrutura, o ciclo de vida e o agrupamento de projetos de mini apps.

Agradecimentos

Este artigo foi revisado por Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent e Keith Gu.