Komponenty miniaplikacji

Thomas Steiner

Uwaga: ten post stanowi część kolekcji artykułów, w której każdy z nich nawiązuje do poprzednich. Jeśli jesteś tu przed chwilą, możesz zacząć czytać od początku.

Komponenty internetowe

Komponenty internetowe zaczynają się od tagu że daje programistom możliwość połączenia ich ze sobą i tworzenia na ich podstawie świetnych aplikacji. Przykłady takie atomowe składowe to elementy czasowe GitHuba, Stefan Judi web-vitals-element, czyli bezwzględna wtyczka, Przełącznik trybu ciemnego Google. Jeśli chodzi o jednak zauważyłem, że ludzie wolą polegać na spójnym zestawie komponentów pochodzących od tego samego dostawcy. Niepełna lista przykładów zawiera dane SAP Komponenty sieciowe UI5, Elementy polimerowe, Elementy Vaadina, model Microsoft SZYBKA, Komponenty Material Web, komponentów AMP i wielu innych. Z powodu wielu czynników poza zakresem tego artykułu. Wielu programistów zainteresowało się jednak platformy takie jak React, Vue.js, Ember.js itp. Zamiast dawać deweloperowi swobodę wyboru dowolna z tych opcji (lub, w zależności od Twojego punktu widzenia, wymuszanie wyboru technologii przez danego użytkownika), Dostawcy superaplikacji uniwersalnie udostępniają zestaw komponentów, których deweloperzy muszą używać.

Komponenty w miniaplikacjach

Możesz je traktować jak dowolne biblioteki komponentów wymienione powyżej. Aby uzyskać dostępnych komponentów, możesz przeglądać bibliotekę komponentów WeChat, komponentów ByteDance, Komponenty Alipay, Baidu, Komponenty szybkich aplikacji.

Wcześniej pokazałem, że na przykład <image> firmy WeChat jest komponentem internetowym, ale nie wszystkie z nich są pod względem technicznym. Niektóre takie jak <map> i <video> są renderowane jako Wbudowane komponenty systemu operacyjnego nakładanych na WebView. Deweloper nie ujawnia szczegółów implementacji, są zaprogramowane tak samo jak inne.

Szczegóły się różnią, ale ogólne koncepcje programowania są takie same we wszystkich superaplikacjach dostawców usług. Ważną koncepcją jest wiązanie danych, co Języki znaczników. Komponenty są na ogół pogrupowane według funkcji, więc znalezienie jest łatwiejsze. Poniżej znajduje się przykład z podobnej kategoryzacji Alipay do grupy komponentów innych dostawców.

• Wyświetl kontenery
  • view
  • swiper
  • scroll-view
  • cover-view
  • cover-image
  • movable-view
  • movable-area
• Treści podstawowe
  • 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 multimediów
  • image
  • video
• Płótno
  • canvas
• Mapa
  • map
• Otwórz komponenty
  • web-view
  • lifestyle
  • contact-button
• Ułatwienia dostępu
  • aria-component

Poniżej możesz zobaczyć identyfikator <image> Alipay używany w a:for dyrektywa (patrz Renderowanie listy) zapętloną w tablicy danych obrazu. podaliśmy w dokumencie 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, a trzy moduły obsługi zdarzeń onTap, onError i onLoad do funkcji o tej samej nazwie. Jako wcześniej tag <image> zostanie wewnętrznie konwertowany na <div> z obiektem zastępczym ostatecznych wymiarów obrazu, opcjonalnym leniwym ładowaniem, źródłem domyślnym, ip.

Wszystkie dostępne opcje konfiguracji komponentu są wymienione w sekcji dokumentacja. Wbudowana funkcja podgląd komponentów z symulatorem sprawia, że kod jest od razu materialny.

Dokumentacja komponentu Alipay z osadzonym podglądem komponentu.

.

.

Podgląd komponentu Alipay pojawił się na osobnej karcie.

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

Podgląd komponentu Alipay <image> na prawdziwym urządzeniu po kliknięciu linku do kodu QR w dokumentacji.

Deweloperzy mogą przejść od dokumentacji bezpośrednio do IDE Alipay DevTools, korzystając z zastrzeżony schemat URI antdevtool-tiny://. Dzięki temu dokumentacja może zawierać bezpośredni link do zaimportowania, tak aby programiści mogli od razu zacząć korzystać z komponentu.

Komponenty niestandardowe

Oprócz korzystania z komponentów dostarczonych przez dostawcę deweloperzy mogą też tworzyć komponenty niestandardowe. koncepcja jest dostępna WeChat ByteDance, Alipay oraz Baidu oraz Szybka aplikacja. 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 i custom.css 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, 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żesz następnie zaimportować w usłudze index.json, a nazwę nazwy określa klucz importu (tutaj: "custom"), z którym komponent niestandardowy będzie można potem używać w narzędziu index.swan.

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

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

Sukces: czytaj dalej, aby dowiedzieć się więcej o strukturze i cyklu życia projektu oraz grupowaniu miniaplikacji.

Podziękowania

Ten artykuł zrecenzował(a) Joe Medley Kayce Basques Milica Mihajlija, Alan Kent, i Keith Gu.