Componentes de la miniapp

Thomas Steiner

Componentes web

Los componentes web que comiencen con el de permitir a los desarrolladores unirlos y compilar aplicaciones excelentes sobre ellos. Ejemplos de estos componentes atómicos son los elementos temporales de GitHub, Stefan Judis web-vitals-element o El botón de activación del modo oscuro de Google Cuando se trata de sistemas de diseño completos; sin embargo, he observado que la gente prefiere confiar en un conjunto coherente de componentes del mismo proveedor. Una lista incompleta de ejemplos incluye el modelo UI5 Web Components, el Elementos de polímeros, los elementos de Vaadin, los de Microsoft RÁPIDO, Componentes web de Material, podría decirse que los componentes de AMP y muchos más. Debido a un una cantidad de factores fuera del alcance de este artículo, sin embargo, muchos desarrolladores también acudieron a frameworks como React, Vue.js y Ember.js, etc. En lugar de darle al desarrollador la libertad de elegir cualquiera de estas opciones (o, según tu punto de vista, los obligarlos a tomar una decisión tecnológica) Los proveedores de superapps ofrecen 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 un general de los componentes disponibles, puedes explorar Biblioteca de componentes de WeChat, Componentes de ByteDance, Componentes de Alipay, Baidu y Componentes rápidos de las apps.

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

Como siempre, los detalles varían, pero los conceptos generales de programación son los mismos en todas las superapps. proveedores. Un concepto importante es la vinculación de datos, como se mostró antes en Lenguajes de marcación. Generalmente, los componentes se agrupan por función, por lo que encontrar la la correcta para el trabajo es más fácil. A continuación, se muestra un ejemplo de la categorización de Alipay, que es similar. al grupo 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 del formulario
    • button
    • form
    • label
    • input
    • textarea
    • radio
    • radio-group
    • checkbox
    • checkbox-group
    • switch
    • slider
    • picker-view
    • picker
  • Navegación GPS
    • navigator
  • Componentes de contenido multimedia
    • image
    • video
  • Lienzo
    • canvas
  • Mapa
    • map
  • Componentes abiertos
    • web-view
    • lifestyle
    • contact-button
  • Accesibilidad
    • aria-component

A continuación, puedes ver el <image> de Alipay en un Directiva a:for (consulta Renderización de listas) que se repite en un array de datos de imagen proporcionados 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 con el atributo mode, src con el atributo src y los tres controladores de eventos onTap, onError y onLoad a las funciones del mismo nombre. Como como se muestra antes, la etiqueta <image> se convierte internamente en <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 enumeran en el documentación. Un formato vista previa del componente con simulador hace que el código sea tangible de inmediato.

Documentación del componente de Alipay con vista previa de componente incorporado que muestra un editor de código con simulador, que muestra el componente renderizado en un iPhone 6 simulado.
Documentación del componente de Alipay con vista previa de componente incorporado.
Vista previa del componente de Alipay ejecutándose en una pestaña separada del navegador, en la que se muestra un editor de código con un simulador que muestra el componente renderizado en un iPhone 6 simulado.
. La vista previa del componente Alipay apareció en su propia pestaña.

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

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

Los desarrolladores pueden pasar de la documentación directamente al IDE de Alipay para Herramientas para desarrolladores aprovechando un esquema de URI propietario antdevtool-tiny://. Esto permite vincular la documentación directamente a un 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 que proporciona el proveedor, los desarrolladores también pueden crear componentes personalizados. El existe un concepto para WeChat, ByteDance, Alipay y Baidu, así como App Rápida. Por ejemplo, un componente personalizado de Baidu consta de cuatro archivos que deben estar 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 eventos de ciclo de vida de la página, en concreto, 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

Este artículo fue revisado por Joe Medley: Kayce Basques, Milica Mihajlija Alan Kent, y Keith Gu.