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.