Mini uygulama bileşenleri

Thomas Steiner

Web bileşenleri

Web bileşenleri, geliştiricilerin bunları bir araya getirip bunların üzerine harika uygulamalar oluşturmasını sağlama vaadiyle başladı. Bu tür atomik bileşenlere örnek olarak GitHub'ın time-elements, Stefan Judis'in web-vitals-element veya Google'ın karanlık mod açma/kapatma özelliğini verebiliriz. Ancak, tam tasarım sistemleri söz konusu olduğunda kullanıcıların aynı tedarikçiden tutarlı bir bileşen grubu kullanmayı tercih ettiğini gözlemledim. Örneklerin eksik bir listesi arasında SAP'ın UI5 Web Bileşenleri, Polymer Öğeleri, Vaadin'in öğeleri, Microsoft'un FAST, Material Web Bileşenleri, tartışmasız AMP bileşenleri ve daha pek çok öğe yer alır. Ancak bu makalenin kapsamı dışında kalan çeşitli faktörler nedeniyle birçok geliştirici React, Vue.js, Ember.js gibi çerçevelere de yöneldi. Süper uygulama sağlayıcılar, geliştiricilere bu seçeneklerden herhangi birini seçme özgürlüğü vermek yerine (veya bakış açınıza bağlı olarak, bir teknoloji seçimi yapmaya zorlamak yerine) geliştiricilerin kullanması gereken bir dizi bileşeni evrensel olarak sağlar.

Mini uygulamalardaki bileşenler

Bu bileşenleri yukarıda bahsedilen bileşen kitaplıkları gibi düşünebilirsiniz. Mevcut bileşenlere genel bir bakış için WeChat'in bileşen kitaplığına, ByteDance bileşenlerine, Alipay bileşenlerine, Baidu bileşenlerine ve Hızlı Uygulama bileşenlerine göz atabilirsiniz.

Daha önce, örneğin WeChat'in <image> altyapısında bir web bileşeni olmasına rağmen bu bileşenlerin teknik olarak web bileşeni olmadığını göstermiştim. <map> ve <video> gibi bazı bileşenler, WebView'in üzerine yerleştirilen işletim sistemine yerleşik bileşenler olarak oluşturulur. Geliştiriciye bu uygulama ayrıntısı gösterilmez. Geliştirici, diğer bileşenler gibi programlanır.

Her zaman olduğu gibi ayrıntılar değişiklik gösterir ancak genel programlama kavramları tüm süper uygulama sağlayıcıları için aynıdır. İşaretleme dilleri bölümünde daha önce gösterildiği gibi, veri bağlama önemli bir kavramdır. Genellikle bileşenler işleve göre gruplandırılır. Böylece, işe uygun olanı daha kolay bulabilirsiniz. Aşağıda, diğer tedarikçi firmaların bileşen gruplandırmasına benzer şekilde Alipay'ın sınıflandırmasından bir örnek verilmiştir.

• Kapsayıcıları görüntüleme
  • 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çma
  • web-view
  • lifestyle
  • contact-button
• Erişilebilirlik
  • aria-component

Aşağıda, Alipay'in <image> işlevinin index.js içinde sağlanan bir resim verisi dizisinde döngü oluşturan bir a:for talimatında (Liste oluşturma bölümüne bakın) kullanıldığını 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 ile mode özelliğinin, src ile src özelliğinin ve onTap, onError ve onLoad adlı üç etkinlik işleyicinin aynı ada sahip işlevlerle veri bağlamasını unutmayın. Daha önce gösterildiği gibi, <image> etiketi dahili olarak resmin son boyutlarının, isteğe bağlı geç yüklemenin, varsayılan kaynağın vb. yer tutucusunun yer aldığı bir <div> biçimine dönüştürülür.

Bileşenin tüm yapılandırma seçenekleri belgelerde listelenmiştir. Dokümanlara yerleştirilmiş simülatörlü bileşen önizlemesi, kodu anında somut hale getirir.

Her bileşenin ayrıca, Alipay uygulamasıyla taranabilen bir QR kodu vardır. Bu QR kodu, bileşen örneğini kendi kendine yeten, minimal bir örnekte açar.

Geliştiriciler, özel URI şemasından antdevtool-tiny:// yararlanarak dokümanlar sayfasından doğrudan Alipay DevTools IDE'ye gidebilir. Bu sayede dokümanlar, içe aktarılacak bir mini uygulama projesine doğrudan bağlanabilir. Böylece geliştiriciler bileşeni hemen kullanmaya başlayabilir.

Özel bileşenler

Geliştiriciler, tedarikçi tarafından sağlanan bileşenleri kullanmanın yanı sıra özel bileşenler de oluşturabilir. Bu kavram, WeChat, ByteDance, Alipay, Baidu ve Hızlı Uygulama için geçerlidir. Örneğin, 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()'dır. Bileşen ayrıca sayfa yaşam döngüsü etkinliklerine de (show() ve hide()) 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 () {},
  },
});

Özel bileşen daha sonra index.json'e içe aktarılabilir. İçe aktarma anahtarı, özel bileşenin index.swan'de kullanılabileceği adı (burada: "custom") belirler.

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

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

Teşekkür ederiz

Bu makale; Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent ve Keith Gu tarafından incelendi.