Компоненты мини-приложения

Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

Thomas Steiner

Веб-компоненты

Веб-компоненты начинались с обещания позволить разработчикам собирать их вместе и создавать на их основе великолепные приложения. Примерами таких атомарных компонентов являются time-elements от GitHub, web-vitals-element от Stefan Judis или, бесстыдная реклама, переключатель темного режима от Google. Однако, когда дело доходит до полных систем дизайна, я заметил, что люди предпочитают полагаться на согласованный набор компонентов от одного поставщика. Неполный список примеров включает SAP UI5 Web Components , Polymer Elements , Vaadin's elements , Microsoft FAST , Material Web Components , возможно, компоненты AMP и многое другое. Однако из-за ряда факторов, выходящих за рамки этой статьи, многие разработчики также перешли на такие фреймворки, как React , Vue.js , Ember.js и т. д. Вместо того чтобы предоставить разработчику свободу выбора любого из этих вариантов (или, в зависимости от вашей точки зрения, заставить его сделать выбор технологии), поставщики суперприложений повсеместно предоставляют набор компонентов, которые разработчики должны использовать.

Компоненты в мини-приложениях

Вы можете думать об этих компонентах как о любой из библиотек компонентов, упомянутых выше. Чтобы получить обзор доступных компонентов, вы можете просмотреть библиотеку компонентов WeChat , компоненты ByteDance , компоненты Alipay , Baidu и компоненты Quick App .

Ранее я показал , что, например, <image> WeChat по сути является веб-компонентом, но не все эти компоненты технически являются веб-компонентами. Некоторые компоненты, такие как <map> и <video> , визуализируются как встроенные в ОС компоненты , которые накладываются поверх WebView. Для разработчика эти детали реализации не раскрываются, они программируются как любой другой компонент.

Как всегда, детали различаются, но общие концепции программирования одинаковы для всех поставщиков суперприложений. Важной концепцией является привязка данных, как показано ранее в языках разметки . Как правило, компоненты группируются по функциям, поэтому найти подходящий для работы проще. Ниже приведен пример категоризации Alipay, которая похожа на группировку компонентов других поставщиков.

• Посмотреть контейнеры
  • view
  • swiper
  • scroll-view
  • cover-view
  • cover-image
  • movable-view
  • movable-area
• Основное содержание
  • text
  • icon
  • progress
  • rich-text
• Компоненты формы
  • button
  • form
  • label
  • input
  • textarea
  • radio
  • radio-group
  • checkbox
  • checkbox-group
  • switch
  • slider
  • picker-view
  • picker
• Навигация
  • navigator
• Медиа компоненты
  • image
  • video
• Холст
  • canvas
• Карта
  • map
• Открытые компоненты
  • web-view
  • lifestyle
  • contact-button
• Доступность
  • aria-component

Ниже вы можете увидеть <image> Alipay, используемый в директиве a:for (см. Рендеринг списка ), которая выполняет цикл по массиву данных изображения, предоставленному в 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>

Обратите внимание на привязку данных item.mode к атрибуту mode , src к атрибуту src и три обработчика событий onTap , onError и onLoad к функциям с тем же именем. Как показано ранее , тег <image> внутренне преобразуется в <div> с заполнителем окончательных размеров изображения, необязательной ленивой загрузкой, источником по умолчанию и т. д.

Доступные параметры конфигурации компонента перечислены в документации . Встроенный в документацию предварительный просмотр компонента с симулятором делает код сразу ощутимым.

Каждый компонент также имеет QR-код, который можно отсканировать с помощью приложения Alipay, открывающего пример компонента в виде автономного минимального примера.

Разработчики могут перейти из документации прямо в Alipay DevTools IDE, используя фирменную схему URI antdevtool-tiny:// . Это позволяет документации напрямую ссылаться на импортируемый проект мини-приложения, поэтому разработчики могут немедленно приступить к работе с компонентом.

Пользовательские компоненты

Помимо использования компонентов, предоставляемых поставщиком, разработчики также могут создавать пользовательские компоненты. Концепция существует для WeChat , ByteDance , Alipay и Baidu , а также Quick App . Например, пользовательский компонент Baidu состоит из четырех файлов, которые должны находиться в одной папке: custom.swan , custom.css , custom.js и custom.json .

Файл custom.json обозначает содержимое папки как пользовательский компонент.

{
  "component": true
}

Файл custom.swan содержит разметку, а custom.css CSS.

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

.name {
  color: red;
}

Файл custom.js содержит логику. Функции жизненного цикла компонента: attached() , detached() , created() и ready() . Компонент может также дополнительно реагировать на события жизненного цикла страницы , а именно show() и 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 () {},
  },
});

Затем пользовательский компонент можно импортировать в index.json , ключ импорта определяет имя (здесь: "custom" ), с которым пользовательский компонент затем можно использовать в index.swan .

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

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

Благодарности

Эту статью рецензировали Джо Медли , Кейс Баскес , Милица Михайлия , Алан Кент и Кейт Гу.