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

Thomas Steiner

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

Веб-компоненты начались с обещания позволить разработчикам собрать их воедино и создавать на их основе отличные приложения. Примерами таких атомарных компонентов являются time-elements GitHub, web-vitals-element Стефана Джудиса или, бессовестный плагин, переключатель темного режима Google. Однако, когда дело доходит до законченных систем проектирования, я заметил, что люди предпочитают полагаться на согласованный набор компонентов от одного и того же поставщика. Неполный список примеров включает веб-компоненты UI5 SAP, элементы Polymer , элементы Vaadin , FAST Microsoft, веб-компоненты Material , возможно, компоненты 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, которое открывает пример компонента в автономном минимальном примере.

Разработчики могут перейти из документации прямо в IDE Alipay DevTools, используя собственную схему 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>

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

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