Mini uygulama bileşenleri

Thomas Steiner

Not: Bu yayın, her makalenin önceki makaleleri temel aldığı bir makale koleksiyonunun parçasıdır. Bu yeni bölüme yeni indiyseniz okumaya baştan başlayabilirsiniz.

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.

Yerleşik bileşen önizlemesine sahip Alipay bileşen dokümanları.

ziyaret edin.

'nı inceleyin.

Alipay bileşeninin önizlemesi ayrı bir sekmede açıldı.

Her bileşenin, bileşeni açan Alipay uygulamasıyla taranabilen bir QR kodu da vardır. küçük bir örnekle açıklayabiliriz.

Dokümanlardaki bir QR kodu bağlantısı takip edildikten sonra Alipay <image> bileşeninin gerçek bir cihazda önizlemesi.

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>

Başarı: Mini uygulamaların proje yapısı, yaşam döngüsü ve paketlenmesi hakkında bilgi edinmek için okumaya devam edin.

Teşekkür

Bu makale tarafından incelendi Ali Demir, Kayce Basklar, Milica Mihajlija, Alan Kent, ve Keith Gu.