Komponen aplikasi mini

Thomas Steiner

Komponen web

Komponen web yang dimulai dengan janji untuk mengizinkan pengembang menyatukannya dan membangun aplikasi hebat di atasnya. Contoh komponen atomik tersebut adalah elemen waktu GitHub, Stefan Judis web-vitals-element, atau steker yang tidak malu-malu, Tombol mode gelap Google. Jika menyangkut sistem desain yang lengkap, namun, saya telah mengamati bahwa orang lebih suka mengandalkan seperangkat komponen dari vendor yang sama. Daftar contoh yang tidak lengkap termasuk Komponen Web UI5, Elemen Polimer, Elemen Vaadin, fitur Microsoft FAST, Komponen Web Material, dapat dikatakan sebagai komponen AMP, dan masih banyak lagi. Karena sejumlah faktor di luar cakupan artikel ini, namun banyak pengembang juga berbondong-bondong ke framework seperti React, Vue.js, Ember.js, dll. Daripada memberikan kebebasan kepada developer untuk memilih salah satu opsi ini (atau, bergantung pada sudut pandang Anda, memaksa pengguna untuk membuat pilihan teknologi), penyedia aplikasi super secara universal menyediakan serangkaian komponen yang harus digunakan pengembang.

Komponen dalam aplikasi mini

Anda dapat menganggap komponen ini seperti salah satu library komponen yang disebutkan di atas. Untuk mendapatkan ikhtisar komponen yang tersedia, Anda dapat menelusuri Library komponen WeChat, Komponen ByteDance, Komponen Alipay, Baidu, dan Komponen Aplikasi Cepat.

Sebelumnya saya telah menunjukkan bahwa, misalnya, <image> WeChat adalah komponen web, tidak semua komponen ini secara teknis merupakan komponen web. Agak besar komponen, seperti <map> dan <video>, dirender sebagai Komponen bawaan OS yang ditempatkan di atas WebView. Bagi pengembang, detail implementasi ini tidak terungkap, mereka diprogram seperti komponen lainnya.

Seperti biasa, detailnya bervariasi, tetapi konsep pemrograman secara keseluruhan sama di semua aplikasi super penyedia layanan. Konsep penting adalah {i>data binding<i}, seperti yang ditunjukkan sebelumnya dalam Bahasa markup. Umumnya, komponen dikelompokkan berdasarkan fungsi, jadi menemukan tepat untuk pekerjaan itu lebih mudah. Di bawah ini adalah contoh dari kategorisasi Alipay, yang serupa ke pengelompokan komponen dari vendor lain.

  • Lihat penampung
    • view
    • swiper
    • scroll-view
    • cover-view
    • cover-image
    • movable-view
    • movable-area
  • Konten dasar
    • text
    • icon
    • progress
    • rich-text
  • Komponen formulir
    • button
    • form
    • label
    • input
    • textarea
    • radio
    • radio-group
    • checkbox
    • checkbox-group
    • switch
    • slider
    • picker-view
    • picker
  • {i>Navigation<i}
    • navigator
  • Komponen media
    • image
    • video
  • Kanvas
    • canvas
  • Peta
    • map
  • Membuka komponen
    • web-view
    • lifestyle
    • contact-button
  • Fitur
    • aria-component

Di bawah ini, Anda dapat melihat <image> Alipay digunakan di Perintah a:for (lihat Rendering daftar) yang melakukan loop di atas array data gambar yang disediakan di index.js.

/* 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>

Perhatikan binding data item.mode ke atribut mode, src ke atribut src, dan tiga pengendali peristiwa onTap, onError, dan onLoad ke fungsi dengan nama yang sama. Sebagai ditampilkan sebelumnya, tag <image> secara internal dikonversi menjadi <div> dengan placeholder dimensi akhir gambar, pemuatan lambat opsional, sumber default, dll.

Opsi konfigurasi komponen yang tersedia semuanya tercantum dalam dokumentasi. Tertanam di dalam dokumen pratinjau komponen dengan simulator membuat kode segera nyata.

Dokumentasi komponen Alipay dengan pratinjau komponen tersemat, menampilkan editor kode dengan simulator yang menunjukkan komponen yang dirender pada simulasi iPhone 6.
Dokumentasi komponen Alipay dengan pratinjau komponen tersemat.
Pratinjau komponen Alipay yang berjalan di tab browser terpisah yang menampilkan editor kode dengan simulator yang menampilkan komponen yang dirender pada simulasi iPhone 6.
Pratinjau komponen Alipay muncul di tabnya sendiri.

Setiap komponen juga memiliki kode QR yang dapat dipindai dengan aplikasi Alipay yang membuka komponen dalam contoh minimal mandiri.

Komponen `image` Alipay dipratinjau di perangkat sebenarnya setelah memindai kode QR dalam dokumentasi.
Pratinjau komponen <image> Alipay di perangkat sebenarnya setelah mengikuti link kode QR dari dokumen.

Developer dapat langsung beralih dari dokumentasi ke Alipay DevTools IDE dengan memanfaatkan skema URI eksklusif antdevtool-tiny://. Hal ini memungkinkan dokumentasi untuk terhubung langsung ke project aplikasi mini yang akan diimpor, sehingga developer dapat langsung memulai komponen.

Komponen kustom

Selain menggunakan komponen yang disediakan vendor, developer juga dapat membuat komponen kustom. Tujuan konsep tersedia untuk WeChat, ByteDance, Alipay, dan Baidu, serta Aplikasi Cepat. Misalnya, komponen kustom Baidu terdiri dari empat file yang harus berada di folder yang sama: custom.swan, custom.css, custom.js, dan custom.json.

File custom.json menunjukkan konten folder sebagai komponen kustom.

{
  "component": true
}

File custom.swan berisi markup dan custom.css CSS.

<view class="name" bindtap="tap">{{name}} {{age}}</view>

.name {
  color: red;
}

File custom.js berisi logika. Fungsi siklus proses komponen adalah attached(), detached(), created(), dan ready(). Komponen tersebut juga dapat bereaksi pada peristiwa siklus proses halaman, yaitu show() dan hide().

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 () {},
  },
});

Komponen kustom kemudian dapat diimpor di index.json, kunci impor akan menentukan namanya (di sini: "custom") yang kemudian dapat digunakan dengan komponen kustom di index.swan.

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

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

Ucapan terima kasih

Artikel ini telah ditinjau oleh Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent, dan Keith Gu.