Web bileşenleri
Web bileşenleri, geliştiricilerin parçaları bir araya getirmesini ve bunların üzerine mükemmel uygulamalar geliştirmesini sağlama sözüyle başladı. Bu tür atom bileşenlerine örnek olarak GitHub'ın zaman öğeleri, Stefan Juudis'in web-vitals-öğesi veya Google'ın koyu modu açma/kapatma özelliği verilebilir. Fakat eksiksiz tasarım sistemleri söz konusu olduğunda insanların aynı tedarikçinin uyumlu bileşenleriyle çalışmayı tercih ettiğini gözlemledim. Eksik bir örnek listesinde SAP'nin UI5 Web Bileşenleri, Polymer Elements, Vaadin öğeleri, Microsoft'un FAST, Materyal Web Bileşenleri, muhtemelen AMP bileşenleri ve daha fazlası yer alır. Ancak bu makalenin kapsamı dışında kalan bir dizi faktör nedeniyle birçok geliştirici React, Vue.js, Ember.js vb. çerçevelere de akın etmiştir. Geliştiriciye bu seçeneklerden herhangi biri arasından seçim yapma (veya sizin bakış açınıza bağlı olarak, teknolojik seçim yapmaya forcing)
Mini uygulamalardaki bileşenler
Bu bileşenleri, yukarıda bahsedilen bileşen kitaplıklarının herhangi biri gibi düşünebilirsiniz. Kullanılabilir bileşenlere genel bir bakış için WeChat'in bileşen kitaplığı, ByteDance'ın bileşenleri, Alipay bileşenleri, Baidu ve Hızlı Uygulama bileşenleri'ne göz atabilirsiniz.
Örneğin, WeChat'in <image>
bileşeninin arka planda bulunan bir web bileşeni olsa da bu bileşenlerin hepsinin teknik olarak web bileşenleri olmadığını göstermiştim. <map>
ve <video>
gibi bazı bileşenler, Web Görünümü üzerinde katman oluşturulan İşletim Sisteminde yerleşik bileşenler olarak oluşturulur. Geliştirici açısından bu uygulama ayrıntısı açıklanmaz, bunlar diğer bileşenler gibi programlanır.
Her zaman olduğu gibi ayrıntılar değişiklik gösterse de genel programlama kavramları tüm süper uygulama sağlayıcıları için aynıdır. Daha önce Biçimlendirme dilleri bölümünde gösterildiği gibi, önemli bir kavram veri bağlamadır. Genel olarak bileşenler işleve göre gruplandırılır. Böylece, iş için doğru olanı bulmak daha kolaydır. Aşağıda, diğer tedarikçilerin bileşen grubuna benzeyen Alipay kategorilendirmesinden bir örnek verilmiştir.
- Kapsayıcıları göster
view
swiper
scroll-view
cover-view
cover-image
movable-view
movable-area
- Temel içerik
text
icon
progress
rich-text
- Form bileşenleri
button
form
label
input
textarea
radio
radio-group
checkbox
checkbox-group
switch
slider
picker-view
picker
- Gezinme
navigator
- Medya bileşenleri
image
video
- Tuval
canvas
- Harita
map
- Bileşenleri açın
web-view
lifestyle
contact-button
- Erişilebilirlik
aria-component
Aşağıda, index.js
içinde sağlanan bir görüntü veri dizisini döngüye alan bir a:for
yönergesinde (Liste oluşturma bölümüne bakın) kullanılan Alipay <image>
kodunu görebilirsiniz.
/* 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>
item.mode
öğesinin mode
özelliğine, src
ile src
özelliğinin ve onTap
, onError
ile onLoad
adlı üç etkinlik işleyicinin aynı ada sahip işlevlere bağlanmasını not edin. Önce gösterildiği gibi, <image>
etiketi dahili olarak resmin son boyutlarının yer tutucusu, isteğe bağlı geç yükleme, varsayılan kaynak vb. ile bir <div>
biçimine dönüştürülür.
Bileşenin mevcut yapılandırma seçeneklerinin tümü belgelerde listelenmiştir. Dokümanlarda yerleşik olarak bulunan simülatörlü bileşen önizlemesi, kodu anında somut hale getirir.
![iPhone 6 simülasyonunda oluşturulan bileşeni gösteren simülatörlü bir kod düzenleyicinin yer aldığı, yerleşik bileşen önizlemesi içeren Alipay bileşen dokümanları.](https://web.dev/static/articles/mini-apps/mini-app-components/image/alipay-component-document-6b7c4f21b0d0f.png?authuser=5&hl=tr)
![Ayrı bir tarayıcı sekmesinde çalışan Alipay bileşen önizlemesi, iPhone 6 simülasyonunda oluşturulan bileşeni gösteren simülatör içeren bir kod düzenleyiciyi gösteriyor.](https://web.dev/static/articles/mini-apps/mini-app-components/image/alipay-component-preview-1da9c839edf25.png?authuser=5&hl=tr)
Her bileşende, bileşen örneğini bağımsız minimal örnekte açan ve Alipay uygulamasıyla taranabilen bir QR kodu da bulunur.
![Alipay'in "image" bileşeni, dokümanlardaki QR kodunu taradıktan sonra gerçek bir cihazda önizlendi.](https://web.dev/static/articles/mini-apps/mini-app-components/image/alipays-image-componen-696a04ff61022.png?authuser=5&hl=tr)
<image>
bileşenini gerçek bir cihazda önizleyin.
Geliştiriciler, özel bir URI şeması antdevtool-tiny://
kullanarak belgelerden doğrudan Alipay DevTools IDE'ye geçebilirler. Böylece dokümanlar doğrudan içe aktarılacak mini uygulama projesine bağlanır. Böylece geliştiriciler bileşeni kullanmaya hemen başlayabilirler.
Özel bileşenler
Geliştiriciler, tedarikçi tarafından sağlanan bileşenleri kullanmanın yanı sıra özel bileşenler de oluşturabilirler. Kavram
WeChat,
ByteDance,
Alipay ve
Baidu'nun yanı sıra
Hızlı Uygulama için de mevcuttur. Örneğin, bir Baidu özel bileşeni aynı klasörde bulunması gereken dört dosyadan oluşur:
custom.swan
, custom.css
, custom.js
ve custom.json
.
custom.json
dosyası, klasör içeriklerini özel bileşen olarak gösterir.
{
"component": true
}
custom.swan
dosyası işaretlemeyi ve custom.css
CSS'yi içerir.
<view class="name" bindtap="tap">{{name}} {{age}}</view>
.name {
color: red;
}
Mantığı custom.js
dosyası içerir. Bileşen yaşam döngüsü işlevleri şunlardır: attached()
, detached()
, created()
ve ready()
. Bileşen ayrıca show()
ve hide()
adlı sayfa yaşam döngüsü etkinliklerine de tepki verebilir.
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 () {},
},
});
Daha sonra özel bileşen index.json
içinde içe aktarılabilir. İçe aktarma anahtarı, özel bileşenin index.swan
içinde birlikte kullanılabildiği adı (burada: "custom"
) belirler.
{
"usingComponents": {
"custom": "/components/custom/custom"
}
}
<view>
<custom name="swanapp"></custom>
</view>
Teşekkür
Bu makale Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent ve Keith Gu tarafından incelenmiştir.