Komponenty miniaplikacji

Thomas Steiner

Komponenty internetowe

Składniki internetowe powstały z założenia, że deweloperzy będą mogli je łączyć i tworzyć na ich podstawie świetne aplikacje. Przykładami takich komponentów są elementy czasowe GitHuba, elementy-żyto-internetowe Stefana Judisa czy poświęcone naszemu wstydowi wtyczki Google przełącznik trybu ciemnego. Zauważyliśmy jednak, że w przypadku kompletnych systemów projektowania użytkownicy wolą polegać na spójnym zestawie komponentów od tego samego dostawcy. Niepełna lista przykładów obejmuje UI5 Web Components firmy SAP, elementy Polymer, elementy Vaadin, FAST firmy Microsoft, elementy Material Web, elementy AMP i wiele innych. Z wielu powodów, które wykraczają poza zakres tego artykułu, wielu deweloperów decyduje się jednak na frameworki takie jak React, Vue.js, Ember.js itp. Zamiast dawać deweloperom swobodę wyboru spośród tych opcji (lub, w zależności od punktu widzenia, zmuszać ich do wyboru technologii), dostawcy superaplikacji udostępniają uniwersalny zestaw komponentów, których muszą używać deweloperzy.

Komponenty w miniaplikacjach

Możesz je traktować jak dowolne biblioteki składowe wymienione powyżej. 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 wykazałem, że chociaż na przykład <image> WeChata jest pod względem technicznym komponentem internetowym, nie wszystkie komponenty są technicznie komponentami internetowymi. Niektóre komponenty, takie jak <map> i <video>, są renderowane jako komponenty wbudowane w system operacyjny, które nakładają się na komponent WebView. Deweloper nie ma dostępu do tych szczegółów implementacji. Są one programowane tak samo jak inne komponenty.

Szczegóły się różnią, ale ogólne koncepcje programowania są takie same u wszystkich dostawców superaplikacji. Ważną koncepcją jest wiązanie danych, o którym była mowa w sekcji Języki znaczników. Komponenty są zazwyczaj grupowane według funkcji, dzięki czemu łatwiej znaleźć odpowiedni komponent do danego zadania. Poniżej znajduje się przykład podziału Alipay, który jest podobny do podziału komponentów innych dostawców.

• Wyświetlanie kontenerów
  • view
  • swiper
  • scroll-view
  • cover-view
  • cover-image
  • movable-view
  • movable-area
• Podstawowe treści
  • 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 multimediów
  • image
  • video
• Płótno
  • canvas
• Mapa
  • map
• Otwieranie komponentów
  • web-view
  • lifestyle
  • contact-button
• Ułatwienia dostępu
  • aria-component

Poniżej możesz zobaczyć parametr <image> używany w alipay w instrukcji a:for (patrz Renderowanie list), która wykonuje pętlę na tablicy danych obrazu podanej w parametrye 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 obsługami zdarzeń onTap, onError i onLoad z funkcjami o tej samej nazwie. Jak wyjaśniliśmy wcześniej, tag <image> jest wewnętrznie konwertowany na tag <div> z symbolem zastępczym końcowych wymiarów obrazu, opcjonalnym ładowaniem opóźnionym, domyślnym źródłem itp.

Dostępne opcje konfiguracji komponentu są wymienione w dokumentacji. Umieszczony w dokumentach przegląd komponentu z symulacją sprawia, że kod staje się namacalny.

Każdy komponent ma też kod QR, który można zeskanować za pomocą aplikacji Alipay. Spowoduje to otwarcie przykładu komponentu w samodzielnym minimalnym przykładzie.

Deweloperzy mogą przejść z dokumentacji bezpośrednio do środowiska IDE Alipay DevTools, korzystając z zastrzeżonego schematu URI antdevtool-tiny://. Dzięki temu dokumentacja może zawierać link bezpośrednio do projektu miniaplikacji, który ma zostać zaimportowany, dzięki czemu deweloperzy mogą od razu zacząć korzystać z komponentu.

Komponenty niestandardowe

Oprócz komponentów dostarczanych przez dostawców deweloperzy mogą też tworzyć komponenty niestandardowe. Koncepcja ta dotyczy WeChat, ByteDance, Alipay i Baidu, a także Quick App. Na przykład komponent niestandardowy 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 znaczniki, a custom.css – kod 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ć też na zdarzenia cyklu ż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ć do index.json. Klucz importu określa nazwę (tutaj: "custom"), której komponent niestandardowy może używać w index.swan.

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

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

Podziękowania

Ten artykuł został sprawdzony przez Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent i Keitha Gu.