Эта страница переведена с помощью Cloud Translation API.

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

Thomas Steiner

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

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

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

Документация по компоненту Alipay с встроенным предварительным просмотром компонента, демонстрирующая редактор кода с симулятором, показывающим отображение компонента на имитированном iPhone 6. — Документация по компоненту Alipay с предварительным просмотром встроенного компонента.

Предварительный просмотр компонента Alipay, запущенный в отдельной вкладке браузера, отображает редактор кода с симулятором, демонстрирующим отображение компонента на имитированном iPhone 6. — Предварительный просмотр компонента Alipay открылся в отдельной вкладке.

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

В документации показан предварительный просмотр компонента `image` платежной системы Alipay на реальном устройстве после сканирования QR-кода. — Предварительный просмотр компонента Alipay `<image>` на реальном устройстве после перехода по QR-коду из документации.

Разработчики могут перейти непосредственно из документации в среду разработки 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>

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

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