Componentes de la miniapp

Thomas Steiner

Nota: Esta publicación forma parte de una colección de artículos en la que cada uno se basa en los anteriores. Si acabas de llegar aquí, te recomendamos que comiences a leer desde el principio.

Componentes web

Los componentes web comenzaron con la promesa de permitir que los desarrolladores los unieran y crearan apps excelentes sobre ellos. Algunos ejemplos de estos componentes atómicos son los elementos de tiempo de GitHub, el elemento web-vitals de Stefan Judis o, sin vergüenza, el botón de activación del modo oscuro de Google. Sin embargo, cuando se trata de sistemas de diseño completos, observé que las personas prefieren usar un conjunto coherente de componentes del mismo proveedor. Una lista incompleta de ejemplos incluye los componentes web de UI5 de SAP, los elementos de Polymer, los elementos de Vaadin, FAST de Microsoft, los componentes web de Material, posiblemente los componentes de AMP y muchos más. Sin embargo, debido a varios factores que no se incluyen en el alcance de este artículo, muchos desarrolladores también se han volcado a frameworks como React, Vue.js, Ember.js, etcétera. En lugar de darles a los desarrolladores la libertad de elegir entre cualquiera de estas opciones (o, según tu punto de vista, obligarlos a elegir una tecnología), los proveedores de superapps proporcionan universalmente un conjunto de componentes que los desarrolladores deben usar.

Componentes en miniapps

Puedes pensar en estos componentes como cualquiera de las bibliotecas de componentes mencionadas anteriormente. Para obtener una descripción general de los componentes disponibles, puedes explorar la biblioteca de componentes de WeChat, los componentes de ByteDance, los componentes de Alipay, los componentes de Baidu y los componentes de Quick App.

Anteriormente, mostré que, si bien, por ejemplo, el <image> de WeChat es un componente web subyacente, no todos estos componentes son técnicamente componentes web. Algunos componentes, como <map> y <video>, se renderizan como componentes integrados en el SO que se superponen en WebView. Para el desarrollador, este detalle de implementación no se revela, ya que se programan como cualquier otro componente.

Como siempre, los detalles varían, pero los conceptos generales de programación son los mismos en todos los proveedores de súper apps. Un concepto importante es la vinculación de datos, como se mostró anteriormente en Lenguajes de marcado. En general, los componentes se agrupan por función, por lo que es más fácil encontrar el adecuado para el trabajo. A continuación, se muestra un ejemplo de la categorización de Alipay, que es similar al agrupamiento de componentes de otros proveedores.

• Ver contenedores
  • view
  • swiper
  • scroll-view
  • cover-view
  • cover-image
  • movable-view
  • movable-area
• Contenido básico
  • text
  • icon
  • progress
  • rich-text
• Componentes de formulario
  • button
  • form
  • label
  • input
  • textarea
  • radio
  • radio-group
  • checkbox
  • checkbox-group
  • switch
  • slider
  • picker-view
  • picker
• Navegación
  • navigator
• Componentes de medios
  • image
  • video
• Canvas
  • canvas
• Mapa
  • map
• Componentes abiertos
  • web-view
  • lifestyle
  • contact-button
• Accesibilidad
  • aria-component

A continuación, puedes ver el <image> de Alipay que se usa en una directiva a:for (consulta Renderización de listas) que itera en un array de datos de imágenes proporcionado en 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>

Ten en cuenta la vinculación de datos de item.mode al atributo mode, de src al atributo src y de los tres controladores de eventos onTap, onError y onLoad a las funciones con el mismo nombre. Como se mostró antes, la etiqueta <image> se convierte internamente en una etiqueta <div> con un marcador de posición de las dimensiones finales de la imagen, carga diferida opcional, una fuente predeterminada, etcétera.

Todas las opciones de configuración disponibles del componente se indican en la documentación. Un simulador con vista previa de componentes integrado en la documentación hace que el código sea tangible de inmediato.

Documentación del componente de Alipay con vista previa del componente incorporada.

La vista previa del componente de Alipay se abrió en su propia pestaña.

Cada componente también tiene un código QR que se puede escanear con la app de Alipay, que abre el ejemplo del componente en un ejemplo mínimo independiente.

Vista previa del componente <image> de Alipay en un dispositivo real después de seguir un vínculo de código QR desde la documentación.

Los desarrolladores pueden pasar de la documentación directamente al IDE de Alipay DevTools aprovechando un esquema de URI propietario antdevtool-tiny://. Esto permite que la documentación se vincule directamente a un proyecto de mini app que se importará, de modo que los desarrolladores puedan comenzar a usar el componente de inmediato.

Componentes personalizados

Además de usar los componentes proporcionados por el proveedor, los desarrolladores también pueden crear componentes personalizados. El concepto existe para WeChat, ByteDance, Alipay y Baidu, así como para Quick App. Por ejemplo, un componente personalizado de Baidu consta de cuatro archivos que deben residir en la misma carpeta: custom.swan, custom.css, custom.js y custom.json.

El archivo custom.json denota el contenido de la carpeta como un componente personalizado.

{
  "component": true
}

El archivo custom.swan contiene el lenguaje de marcado y custom.css, el CSS.

<view class="name" bindtap="tap">{{name}} {{age}}</view>

.name {
  color: red;
}

El archivo custom.js contiene la lógica. Las funciones de ciclo de vida de los componentes son attached(), detached(), created() y ready(). Además, el componente también puede reaccionar a los eventos de ciclo de vida de la página, es decir, show() y 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 () {},
  },
});

Luego, el componente personalizado se puede importar en index.json. La clave de la importación determina el nombre (aquí: "custom") con el que se puede usar el componente personalizado en index.swan.

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

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

Éxito: Sigue leyendo para obtener información sobre la estructura, el ciclo de vida y la agrupación del proyecto de las mini apps.

Agradecimientos

Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent y Keith Gu revisaron este artículo.