Mini uygulama bileşenleri

Thomas Steiner

Web bileşenleri

Web bileşenleri, geliştiricilerin bunları bir araya getirmesine ve üzerine harika uygulamalar oluşturmasına olanak tanıma vaadiyle başladı. Bu tür atomik bileşenlere örnek olarak GitHub'ın time-elements, Stefan Judis'in web-vitals-element veya Google'ın dark mode toggle (utançsızca reklam) verilebilir. Ancak eksiksiz tasarım sistemleri söz konusu olduğunda, kullanıcıların aynı tedarikçinin tutarlı bileşenlerini kullanmayı tercih ettiğini gözlemledim. Örneklerin eksik bir listesinde SAP'nin UI5 Web Components, Polymer Elements, Vaadin's elements, Microsoft'un FAST, Material Web Components, AMP bileşenleri ve daha birçok öğe yer alır. Ancak bu makalenin kapsamı dışında kalan bir dizi faktör nedeniyle birçok geliştirici React, Vue.js, Ember.js gibi çerçevelere de yöneldi. Süper uygulama sağlayıcılar, geliştiriciye bu seçeneklerden herhangi birini seçme özgürlüğü vermek (veya bakış açınıza bağlı olarak geliştiriciyi bir teknoloji seçimi yapmaya zorlamak) yerine, geliştiricilerin kullanması gereken bir dizi bileşen sunar.

Mini uygulamalardaki bileşenler

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

Daha önce, örneğin WeChat'in <image> bileşeninin arka planda bir web bileşeni olduğunu ancak bu bileşenlerin hepsinin teknik olarak web bileşeni olmadığını göstermiştim. <map> ve <video> gibi bazı bileşenler, WebView'in üzerine katman olarak yerleştirilen işletim sistemine yerleşik bileşenler olarak oluşturulur. Geliştirici için bu uygulama ayrıntısı gösterilmez. Bu bileşenler, diğer bileşenler gibi programlanır.

Ayrıntılar her zaman farklılık gösterse de genel programlama kavramları tüm süper uygulama sağlayıcılarında aynıdır. Markup languages (İşaretleme dilleri) bölümünde daha önce gösterildiği gibi, önemli bir kavram da veri bağlamadır. Genellikle bileşenler işlevlerine göre gruplandırılır. Bu nedenle, iş için doğru bileşeni bulmak daha kolaydır. Aşağıda, Alipay'in diğer sağlayıcıların bileşen gruplandırmasına benzer olan kategorilendirmesine ilişkin 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çın.
  • web-view
  • lifestyle
  • contact-button
• Erişilebilirlik
  • aria-component

Aşağıda, index.js içinde sağlanan bir resim verileri dizisi üzerinde döngü oluşturan bir <image> direktifinde kullanılan Alipay'i görebilirsiniz (bkz. Liste oluşturma).a:for

/* 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 özelliğinin mode özelliğiyle, src özelliğinin src özelliğiyle ve onTap, onError ve onLoad adlı üç etkinlik işleyicinin aynı adlı işlevlerle olan veri bağlamasına dikkat edin. Daha önce gösterildiği gibi, <image> etiketi dahili olarak, resmin nihai boyutlarının yer tutucusu, isteğe bağlı geç yükleme ve varsayılan kaynak gibi özelliklere sahip bir <div> etiketine dönüştürülür.

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

Her bileşenin, bileşeni bağımsız bir minimal örnekte açan Alipay uygulamasıyla taranabilen bir QR kodu da vardır.

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

Özel bileşenler

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

Özel bileşen daha sonra index.json içine aktarılabilir. İçe aktarma işleminin anahtarı, özel bileşenin index.swan içinde kullanılabileceğ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.