Mini uygulama bileşenleri

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.

Her bileşende, bileşen örneğini bağımsız minimal örnekte açan ve Alipay uygulamasıyla taranabilen bir QR kodu da bulunur.

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.