Web bileşenleri
Web bileşenleri, geliştiricilerin bunları bir araya getirip üzerine mükemmel uygulamalar geliştirmesini sağlama vaadinde bulunuyoruz. Örnekler GitHub'ın zaman öğeleri olan Stefan gibi atom bileşenleri Judi's web-vitals-element (web-vitals-öğesi) veya Google'ın koyu modu açma/kapatma düğmesi. Mesele, ancak tüm çalışanlarımın tutarlı bir yapıya ve yaklaşıma güvenmeyi tercih ettiğini aynı tedarikçiden alınır. Eksik örnekler arasında SAP'nin UI5 Web Bileşenleri, Polimer Öğeler Vaadin'in öğeleri, Microsoft'un HIZ Material Web Bileşenleri AMP bileşenleri ve daha fazlası. Bir birçok faktörün işe yaradığı anlamına gelir. Bununla birlikte, birçok geliştirici React, Vue.js ve Ember.js vb.. Geliştiriciye aralarından seçim yapma özgürlüğü tanımak yerine bu seçeneklerden herhangi biri (veya bakış açınıza bağlı olarak, teknoloji seçimi yapmaya zorlama), uygulama sağlayıcıları evrensel olarak geliştiricilerin kullanması gereken bir dizi bileşen sağlar.
Mini uygulamalardaki bileşenler
Bu bileşenleri yukarıda bahsedilen bileşen kitaplıkları gibi düşünebilirsiniz. Bir mevcut bileşenlere genel bakışı WeChat'in bileşen kitaplığı, ByteDance bileşenleri: Alipay'in bileşenleri Baidu's ve Hızlı Uygulama bileşenleri.
Daha önce , örneğin WeChat'in <image>
altında yer alan bir web bileşenidir. Bu bileşenlerin tümü teknik olarak web bileşenleri değildir. Biraz
<map>
ve <video>
gibi bileşenler
Yerleşik işletim sistemi bileşenleri
üst üste yerleştirilecektir. Geliştirici, bu uygulama ayrıntısını paylaşmıyor.
herhangi bir bileşen gibi programlandılar.
Her zamanki gibi ayrıntılar farklılık gösterse de genel programlama kavramları tüm süper uygulamalarda aynıdır. sağlayıcılar. Daha önce gösterildiği gibi veri bağlama, önemli bir kavramdır. Biçimlendirme dilleri. Bileşenler genellikle fonksiyona göre gruplandırılır; bu nedenle, kolaylaşır. Aşağıda, Alipay'in benzer sınıflandırmasına ait bir örnek verilmiştir. diğer tedarikçi firmaların bileşen grubuna dahil edilir.
- 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
- Kanvas
canvas
- Harita
map
- Bileşenleri aç
web-view
lifestyle
contact-button
- Erişilebilirlik
aria-component
Aşağıda Alipay'in <image>
hesabının bir
Bir resim veri dizisinde döngü oluşturan a:for
yönergesi (bkz. Liste oluşturma)
index.js
dilinde sağlanmıştır.
/* 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
değerinin src
özelliğine bağlandığına dikkat edin.
ve aynı ada sahip işlevlere sahip onTap
, onError
ve onLoad
olmak üzere üç etkinlik işleyicisi içeriyor. Farklı
önce gösterildiğinde, <image>
etiketi dahili olarak
<div>
resmin son boyutlarının yer tutucusu, isteğe bağlı geç yükleme, varsayılan kaynak
vb.
Bileşenin kullanılabilir yapılandırma seçeneklerinin tümü belgeleri inceleyin. Dokümanlara yerleştirilmiş simülatör ile bileşen önizlemesi kodu hemen somut hale getirir.
'nı inceleyin.Her bileşenin, bileşeni açan Alipay uygulamasıyla taranabilen bir QR kodu da vardır. küçük bir örnekle açıklayabiliriz.
Geliştiriciler, tek bir araç kullanarak doğrudan Alipay Geliştirici Araçları IDE'sine belgelerden ulaşabilirler.
antdevtool-tiny://
özel URI şeması. Bu, belgelerin doğrudan bir
içe aktarılacak bir mini uygulama projesidir. Böylece geliştiriciler bileşeni hemen kullanmaya 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şturabilir. İlgili içeriği oluşturmak için kullanılan
kavramın mevcut olduğu
WeChat,
ByteDance
Alipay ve
Baidu ve
Hızlı Uygulama.
Ö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çeriğini özel bileşen olarak gösterir.
{
"component": true
}
custom.swan
dosyası işaretlemeyi, custom.css
dosyası ise CSS'yi içerir.
<view class="name" bindtap="tap">{{name}} {{age}}</view>
.name {
color: red;
}
custom.js
dosyası mantığı içerir. Bileşen yaşam döngüsü işlevleri attached()
,
detached()
, created()
ve ready()
. Bileşen, aynı zamanda
sayfa yaşam döngüsü etkinliklerini (show()
ve hide()
) kapsar.
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 () {},
},
});
Özel bileşen daha sonra index.json
içerisine aktarılabilir. Adı içe aktarmanın anahtarı belirler
(burada: "custom"
), özel bileşen daha sonra index.swan
ile birlikte kullanılabilir.
{
"usingComponents": {
"custom": "/components/custom/custom"
}
}
<view>
<custom name="swanapp"></custom>
</view>
Teşekkür
Bu makale tarafından incelendi Ali Demir, Kayce Basklar, Milica Mihajlija, Alan Kent, ve Keith Gu.