Komponen web
Komponen web dimulai dengan janji untuk memungkinkan developer menyatukannya dan membangun aplikasi yang hebat di atasnya. Contoh komponen atomik adalah time-element GitHub, web-vitals-element milik Stefan Judis, atau, plugin tanpa malu, tombol mode gelap Google. Namun, ketika menyangkut sistem desain yang lengkap, saya telah mengamati bahwa orang-orang lebih suka mengandalkan kumpulan komponen yang koheren dari vendor yang sama. Daftar contoh yang tidak lengkap mencakup Komponen Web UI5 SAP, Polymer Elements, Vaadin's elements, FAST Microsoft, Material Web Components, mungkin juga komponen AMP, dan banyak lagi. Karena sejumlah faktor di luar cakupan artikel ini, banyak developer juga berbondong-bondong ke framework seperti React, Vue.js, Ember.js, dll. Daripada memberikan kebebasan kepada developer untuk memilih dari salah satu opsi ini (atau, bergantung pada sudut pandang Anda, forcing mereka untuk membuat pilihan teknologi), sekumpulan komponen aplikasi super harus menyediakan komponen aplikasi super secara universal.
Komponen dalam aplikasi mini
Anda dapat menganggap komponen ini seperti salah satu library komponen yang disebutkan di atas. Untuk mendapatkan ringkasan komponen yang tersedia, Anda dapat menjelajahi library komponen WeChat, komponen ByteDance, komponen Alipay, komponen Baidu, dan komponen Quick App.
Sebelumnya, saya menunjukkan bahwa meskipun, misalnya, <image>
WeChat
adalah komponen web di balik layar, tidak semua komponen ini secara teknis merupakan komponen web. Beberapa
komponen, seperti <map>
dan <video>
, dirender sebagai
komponen bawaan OS
yang dilapisi di atas WebView. Bagi developer, detail implementasi ini tidak diungkapkan,
mereka diprogram seperti komponen lainnya.
Seperti biasa, detailnya bervariasi, tetapi konsep pemrograman keseluruhan sama di semua penyedia aplikasi super. Konsep pentingnya adalah data binding, seperti yang ditampilkan sebelumnya dalam Bahasa markup. Umumnya, komponen dikelompokkan berdasarkan fungsi, sehingga menemukan yang tepat untuk pekerjaan itu lebih mudah. Di bawah ini adalah contoh dari kategorisasi Alipay, yang mirip dengan pengelompokan komponen vendor lain.
- Melihat penampung
view
swiper
scroll-view
cover-view
cover-image
movable-view
movable-area
- Konten dasar
text
icon
progress
rich-text
- Komponen formulir
button
form
label
input
textarea
radio
radio-group
checkbox
checkbox-group
switch
slider
picker-view
picker
- Navigasi
navigator
- Komponen media
image
video
- Kanvas
canvas
- Peta
map
- Buka komponen
web-view
lifestyle
contact-button
- Aksesibilitas
aria-component
Di bawah ini, Anda dapat melihat <image>
Alipay yang digunakan dalam perintah a:for
(lihat Rendering daftar) yang melakukan loop pada array data gambar yang disediakan di 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>
Perhatikan data binding item.mode
ke atribut mode
, src
ke atribut src
,
dan tiga pengendali peristiwa onTap
, onError
, dan onLoad
ke fungsi dengan nama yang sama. Seperti
yang ditunjukkan sebelumnya, tag <image>
secara internal dikonversi menjadi
<div>
dengan placeholder dimensi akhir gambar, pemuatan lambat opsional, sumber default,
dll.
Semua opsi konfigurasi yang tersedia untuk komponen tercantum dalam dokumentasi. Pratinjau komponen dengan simulator yang disematkan dalam dokumen membuat kode langsung menjadi nyata.
![Dokumentasi komponen Alipay dengan pratinjau komponen tersemat, menunjukkan editor kode dengan simulator yang memperlihatkan komponen yang dirender pada simulasi iPhone 6.](https://web.dev/static/articles/mini-apps/mini-app-components/image/alipay-component-document-6b7c4f21b0d0f.png?authuser=19&hl=id)
![Pratinjau komponen Alipay yang berjalan di tab browser terpisah yang menampilkan editor kode dengan simulator yang memperlihatkan komponen yang dirender pada simulasi iPhone 6.](https://web.dev/static/articles/mini-apps/mini-app-components/image/alipay-component-preview-1da9c839edf25.png?authuser=19&hl=id)
Setiap komponen juga memiliki kode QR yang dapat dipindai dengan aplikasi Alipay yang membuka contoh komponen dalam contoh minimal mandiri.
![Komponen `image` Alipay dipratinjau di perangkat asli setelah memindai kode QR dalam dokumentasi.](https://web.dev/static/articles/mini-apps/mini-app-components/image/alipays-image-componen-696a04ff61022.png?authuser=19&hl=id)
<image>
Alipay di perangkat asli setelah mengikuti link kode QR dari dokumen.
Developer dapat langsung membuka dokumentasi Alipay DevTools IDE dengan memanfaatkan
skema URI kepemilikan antdevtool-tiny://
. Dengan begitu, dokumentasi dapat langsung ditautkan ke
project aplikasi mini yang akan diimpor, sehingga developer dapat segera memulai komponen.
Komponen kustom
Selain menggunakan komponen yang disediakan vendor, developer juga dapat membuat komponen kustom. Konsep ini ada untuk WeChat, ByteDance, Alipay, dan Baidu, serta Quick App. Misalnya, komponen khusus Baidu terdiri dari empat file yang harus berada di folder yang sama: custom.swan
, custom.css
, custom.js
, dan custom.json
.
File custom.json
menunjukkan konten folder sebagai komponen kustom.
{
"component": true
}
File custom.swan
berisi markup dan custom.css
CSS.
<view class="name" bindtap="tap">{{name}} {{age}}</view>
.name {
color: red;
}
File custom.js
berisi logika. Fungsi siklus proses komponen adalah attached()
,
detached()
, created()
, dan ready()
. Komponen ini juga dapat bereaksi pada
peristiwa siklus proses halaman, yaitu show()
dan 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 () {},
},
});
Komponen kustom kemudian dapat diimpor di index.json
, kunci impor menentukan nama
(di sini: "custom"
) yang kemudian dapat digunakan dengan komponen kustom di index.swan
.
{
"usingComponents": {
"custom": "/components/custom/custom"
}
}
<view>
<custom name="swanapp"></custom>
</view>
Ucapan terima kasih
Artikel ini ditinjau oleh Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent, dan Keith Gu.