Komponenty miniaplikacji

Komponenty internetowe

Celem komponentów internetowych było umożliwienie deweloperom ich łączenia i tworzenia na ich podstawie świetnych aplikacji. Przykładami takich atomowych komponentów są elementy czasowe GitHuba, web-vitals-element Stefana Juudisa lub (niewstydna wtyczka) przełącznik trybu ciemnego Google. Jeśli chodzi o systemy kompleksowe, jednak widzę, że użytkownicy wolą polegać na spójnym zestawie komponentów tego samego dostawcy. Niepełna lista przykładów obejmuje komponenty internetowe UI5 SAP, elementy Polymer, elementy Vaadin, komponenty FAST firmy Microsoft, komponenty Material Web, a prawdopodobnie komponenty AMP, i wiele innych. Ze względu na wiele czynników, które nie są uwzględnione w tym artykule, wielu deweloperów angażuje się też w platformy takie jak React, Vue.js czy Ember.js itp. Zamiast dawać deweloperowi swobodę wyboru spośród tych komponentów (lub, w zależności od punktu widzenia, forcing ich do wyboru odpowiednich technologii), muszą oni oferować dostawców superaplikacji.

Komponenty w miniaplikacjach

Te komponenty możesz traktować jak dowolne z bibliotek komponentów wymienionych powyżej. Przegląd dostępnych komponentów znajdziesz w bibliotece komponentów WeChat, komponentach ByteDance, komponentach Alipay, Baidu i komponentach szybkich aplikacji.

Wspomniane wcześniej pokazałam, że chociaż <image> weChat jest wbudowanym komponentem internetowym, nie wszystkie z tych komponentów są komponentami internetowymi. Niektóre komponenty, np. <map> i <video>, są renderowane jako komponenty wbudowane w system operacyjny, które nakładają się na komponent WebView. Deweloper nie może ujawnić szczegółów implementacji – elementy są zaprogramowane tak samo jak każdy inny.

Szczegóły są zawsze różne, ale ogólne koncepcje programowania są takie same u wszystkich dostawców aplikacji. Ważną koncepcją jest wiązanie danych, jak pokazano wcześniej w sekcji Języki znaczników. Komponenty są grupowane według funkcji, więc znalezienie odpowiedniego elementu do zadania jest dużo łatwiejsze. Poniżej znajdziesz przykład podziału na kategorie Alipay, który jest podobny do grupowania 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 formularzy
  • button
  • form
  • label
  • input
  • textarea
  • radio
  • radio-group
  • checkbox
  • checkbox-group
  • switch
  • slider
  • picker-view
  • picker
• Nawigacja
  • navigator
• Komponenty multimedialne
  • image
  • video
• Płótno
  • canvas
• Mapa
  • map
• Otwieranie komponentów
  • web-view
  • lifestyle
  • contact-button
• Ułatwienia dostępu
  • aria-component

Poniżej znajdziesz element <image> używany w dyrektywie a:for Alipay (zobacz renderowanie list), która zapętla się na tablicy danych obrazu udostępnionej 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 wskazaliśmy wcześniej, tag <image> jest wewnętrznie konwertowany na <div> zawierający zmienną końcowych wymiarów obrazu, opcjonalne leniwe ładowanie, źródło domyślne itd.

Dostępne opcje konfiguracji komponentu znajdziesz w dokumentacji. Podgląd komponentu z symulatorem umieszczony w dokumentacji sprawia, że kod jest od razu uchwycony.

Każdy komponent zawiera też kod QR, który można zeskanować za pomocą aplikacji Alipay, która otwiera jego przykładowy komponent w niewielkim minimalnym przykładzie.

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

Komponenty niestandardowe

Oprócz komponentów dostarczonych przez dostawcę deweloperzy mogą też tworzyć komponenty niestandardowe. Taka koncepcja dotyczy WeChat, ByteDance, Alipay i Baidu, a także szybkiej aplikacji. 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 wskazuje 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;
}

Plik custom.js zawiera operator logiczny. Funkcje cyklu życia komponentu to attached(), detached(), created() i ready(). Komponent może też reagować na zdarzenia cyklu życia strony (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 elemencie index.json. Klucz importu określa nazwę (w tym miejscu: "custom"), z którą można go później użyć w pliku index.swan.

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

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

Podziękowania

Ten artykuł został zweryfikowany przez Joe Medley, Kayce'a Basquesa, Milica Mihajlija, Alan Kenta i Keitha Gu.