Componentes de mini app

Thomas Steiner

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

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.

.

A visualização do componente Alipay foi exibida em uma guia própria.

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.

Prévia do componente <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>

Sucesso: continue lendo para saber mais sobre a estrutura, o ciclo de vida e os pacotes do projeto de miniapps.

Agradecimentos

Este artigo foi revisado por João Medley, Bascos Kayce, Milica Mihajlija, Alan Kent, e Keith Gu.