Komponenty miniaplikacji

Thomas Steiner

Komponenty sieciowe

Komponenty internetowe powstały z myślą o tym, aby umożliwić programistom łączenie ich ze sobą i tworzenie na ich podstawie świetnych aplikacji. Przykłady takich komponentów atomowych to time-elements w GitHubie, web-vitals-element Stefana Judisa czy, bezwstydnie, przełącznik trybu ciemnego Google. Jeśli chodzi o kompletne systemy projektowania, zauważyłem jednak, że użytkownicy wolą korzystać z spójnego zestawu komponentów od tego samego dostawcy. Niepełna lista przykładów obejmuje UI5 Web Components od SAP, Polymer Elements, elementy Vaadin, FAST od Microsoftu, Material Web Components, komponenty AMP i wiele innych. Z powodu wielu czynników, które wykraczają poza zakres tego artykułu, wielu deweloperów korzysta też z platform takich jak React, Vue.js czy Ember.js. Zamiast dawać deweloperowi swobodę wyboru jednej z tych opcji (lub, w zależności od punktu widzenia, zmuszać go do wyboru technologii), dostawcy superaplikacji powszechnie udostępniają zestaw komponentów, których deweloperzy muszą używać.

Komponenty w miniaplikacjach

Te komponenty działają podobnie jak wspomniane powyżej biblioteki komponentów. Aby zapoznać się z dostępnymi komponentami, możesz przejrzeć bibliotekę komponentów WeChat, komponenty ByteDance, komponenty Alipay, komponenty Baidu i komponenty Quick App.

Wcześniej pokazałem, że chociaż np. <image>WeChat jest w zasadzie komponentem internetowym, nie wszystkie te komponenty są technicznie komponentami internetowymi. Niektóre komponenty, np. <map> i <video>, są renderowane jako wbudowane komponenty systemu operacyjnego, które są nakładane na WebView. Deweloper nie ma dostępu do tego szczegółu implementacji. Komponenty są programowane jak inne komponenty.

Szczegóły zawsze się różnią, ale ogólne koncepcje programowania są takie same w przypadku wszystkich dostawców superaplikacji. Ważną koncepcją jest powiązanie danych, jak pokazano wcześniej w sekcji Języki znaczników. Zazwyczaj komponenty są pogrupowane według funkcji, dzięki czemu łatwiej znaleźć odpowiedni element. Poniżej znajdziesz przykład kategoryzacji Alipay, która jest podobna do grupowania komponentów innych dostawców.

  • Wyświetlanie kontenerów
    • view
    • swiper
    • scroll-view
    • cover-view
    • cover-image
    • movable-view
    • movable-area
  • Treści podstawowe
    • text
    • icon
    • progress
    • rich-text
  • Komponenty formularza
    • button
    • form
    • label
    • input
    • textarea
    • radio
    • radio-group
    • checkbox
    • checkbox-group
    • switch
    • slider
    • picker-view
    • picker
  • Nawigacja
    • navigator
  • Komponenty multimedialne
    • image
    • video
  • Canvas
    • canvas
  • Mapa
    • map
  • Otwórz komponenty
    • web-view
    • lifestyle
    • contact-button
  • Ułatwienia dostępu
    • aria-component

Poniżej możesz zobaczyć tag <image> Alipay użyty w dyrektywie a:for (patrz Renderowanie listy), która iteruje po tablicy danych obrazu podanej w 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>

Zwróć uwagę na powiązanie danych item.mode z atrybutem mode, src z atrybutem src oraz 3 moduły obsługi zdarzeń onTap, onError i onLoad z funkcjami o tej samej nazwie. Jak pokazano wcześniej, tag <image> jest wewnętrznie przekształcany w tag <div> z symbolem zastępczym ostatecznych wymiarów obrazu, opcjonalnym leniwym ładowaniem, domyślnym źródłem itp.

Wszystkie dostępne opcje konfiguracji komponentu są wymienione w dokumentacji. Podgląd komponentu z symulatorem wbudowany w dokumentację sprawia, że kod staje się od razu namacalny.

Dokumentacja komponentu Alipay z osadzonym podglądem komponentu, pokazująca edytor kodu z symulatorem, który wyświetla komponent renderowany na symulowanym iPhonie 6.
Dokumentacja komponentu Alipay z podglądem komponentu.
Podgląd komponentu Alipay uruchomiony na osobnej karcie przeglądarki z edytorem kodu i symulatorem, który pokazuje komponent renderowany na symulowanym iPhonie 6.
Podgląd komponentu Alipay został otwarty w osobnej karcie.

Każdy komponent ma też kod QR, który można zeskanować za pomocą aplikacji Alipay. Po zeskanowaniu kodu otworzy się przykład komponentu w samodzielnym, minimalnym przykładzie.

Podgląd komponentu „image” usługi Alipay na prawdziwym urządzeniu po zeskanowaniu kodu QR w dokumentacji.
Podgląd komponentu Alipay <image> na prawdziwym urządzeniu po kliknięciu linku do kodu QR z dokumentacji.

Deweloperzy mogą przejść z dokumentacji bezpośrednio do środowiska IDE Alipay DevTools, korzystając z własnego schematu URIantdevtool-tiny://. Dzięki temu dokumentacja może być bezpośrednio połączona z projektem miniaplikacji, który ma zostać zaimportowany, co pozwala deweloperom od razu rozpocząć pracę z komponentem.

Komponenty niestandardowe

Oprócz korzystania z komponentów dostarczonych przez dostawcę deweloperzy mogą też tworzyć komponenty niestandardowe. Koncepcja ta istnieje w przypadku WeChat, ByteDance, Alipay i Baidu, a także szybkich aplikacji. Na przykład niestandardowy komponent Baidu składa się z 4 plików, które muszą znajdować się w tym samym folderze: custom.swan, custom.css, custom.js i custom.json.

Plik custom.json oznacza zawartość folderu jako komponent niestandardowy.

{
  "component": true
}

Plik custom.swan zawiera kod znaczników, a custom.css – CSS.

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

.name {
  color: red;
}

Logika znajduje się w pliku custom.js. Funkcje cyklu życia komponentu to attached(), detached(), created() i ready(). Komponent może też reagować na zdarzenia związane z cyklem życia strony, czyli show() i 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 () {},
  },
});

Komponent niestandardowy można następnie zaimportować w index.json. Klucz importu określa nazwę (w tym przypadku: "custom"), której można następnie używać w index.swan.

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

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

Podziękowania

Ten artykuł został sprawdzony przez Joe Medleya, Kayce Basques, Milicę Mihajliję, Alana Kenta i Keitha Gu.