Componentes de la miniapp

Componentes web

Los componentes web comenzaron con la promesa de permitir que los desarrolladores los ensamblaran y crearan apps excelentes sobre ellos. Algunos ejemplos de estos componentes atómicos son los elementos de tiempo de GitHub, el web-vitals-element de Stefan Judis o el enchufe desvergonzado, el botón de activación del modo oscuro de Google. Sin embargo, cuando se trata de sistemas de diseño completos, noté que las personas prefieren confiar en un conjunto coherente de componentes del mismo proveedor. Una lista incompleta de ejemplos incluye los componentes web UI5 de SAP, los elementos de Polymer, los elementos de Vaadin, FAST de Microsoft, los componentes web de Material, los componentes de AMP, entre otros. Debido a una serie de factores fuera del alcance de este artículo, muchos desarrolladores también acudieron a frameworks como React, Vue.js, Ember.js, etc. En lugar de darle a los desarrolladores la libertad de elegir cualquiera de estas opciones (o, dependiendo de tu punto de vista, forcing a los desarrolladores de usar componentes para que tomen una decisión de tecnología), un conjunto de superdesarrolladores de apps debe utilizar componentes de nivel universal.

Componentes en miniapps

Estos componentes se pueden considerar 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 de Baidu y los componentes de Quick App.

Anteriormente, mostré que, si bien <image> de WeChat es un componente web interno, por ejemplo, no todos son componentes web. Algunos componentes, como <map> y <video>, se renderizan como componentes integrados en el SO que se agrupan en capas sobre WebView. Para el desarrollador, este detalle de la implementación no se revela; se programan como cualquier otro componente.

Como siempre, los detalles varían, pero los conceptos generales de programación son los mismos para todos los proveedores de superapps. Un concepto importante es la vinculación de datos, como se mostró antes en los lenguajes de marcado. En general, los componentes se agrupan por función, por lo que es más fácil encontrar el correcto para el trabajo. A continuación, se muestra un ejemplo de la categorización de Alipay, que es similar a la agrupación 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 multimedia
  • image
  • video
• Lienzo
  • canvas
• Mapa
  • map
• Abrir componentes
  • web-view
  • lifestyle
  • contact-button
• Accesibilidad
  • aria-component

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

Observa la vinculación de datos de item.mode al atributo mode, src al atributo src y 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 un <div> con un marcador de posición de las dimensiones finales de la imagen, una carga diferida opcional, una fuente predeterminada, etcétera.

Todas las opciones de configuración disponibles del componente se enumeran en la documentación. Una vista previa de componente con simulador incorporada en los documentos hace que el código sea tangible de inmediato.

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.

Los desarrolladores pueden pasar de la documentación directamente al IDE de Herramientas para desarrolladores de Alipay aprovechando un esquema de URI propio antdevtool-tiny://. Esto permite que la documentación se vincule directamente a un miniproyecto de 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 del ciclo de vida de los componentes son attached(), detached(), created() y ready(). Además, el componente 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 () {},
  },
});

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>

Agradecimientos

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