迷你應用程式元件

Thomas Steiner

注意： 這篇文章是系列文章之一，每篇文章都會以前幾篇文章為基礎。如果您是第一次閱讀這篇文章，建議從開頭開始。

網頁元件

網頁元件的初衷是讓開發人員將元件組裝起來，並在元件的基礎上建構優質應用程式。這類原子元件的例子包括 GitHub 的 time-elements、Stefan Judis 的 web-vitals-element，以及 Google 的深色模式切換按鈕。不過，就完整的設計系統而言，我發現大家偏好使用同一供應商提供的一致元件組合。以下列舉部分範例，包括 SAP 的 UI5 網頁元件、Polymer 元素、Vaadin 的元素、Microsoft 的 FAST、Material 網頁元件，以及AMP 元件等。由於本文範圍外的許多因素，許多開發人員也紛紛採用 React、Vue.js、Ember.js 等架構。超級應用程式供應商普遍提供一組開發人員必須使用的元件，而不是讓開發人員自由選擇這些選項 (或根據您的觀點，強迫他們選擇技術)。

迷你應用程式中的元件

您可以將這些元件視為上述任一元件程式庫。如要概略瞭解可用的元件，請瀏覽 WeChat 的元件庫、ByteDance 的元件、Alipay 的元件、Baidu 的元件，以及快速應用程式元件。

我先前已說明，雖然 WeChat 的 <image> 是底層的網頁元件，但並非所有這些元件在技術上都是網頁元件。部分元件 (例如 <map> 和 <video>) 會轉譯為OS 內建元件，並疊加在 WebView 上。開發人員不會看到這項實作詳細資料，他們會像程式設計任何其他元件一樣進行程式設計。

詳細資料一如往常會有所不同，但所有超級應用程式供應商的整體程式設計概念都相同。如先前在標記語言中所示，資料繫結是重要的概念。一般來說，元件會依功能分組，因此更容易找到適合工作使用的元件。以下是支付寶的分類範例，與其他供應商的元件分組類似。

• 查看容器
  • view
  • swiper
  • scroll-view
  • cover-view
  • cover-image
  • movable-view
  • movable-area
• 基本內容
  • text
  • icon
  • progress
  • rich-text
• 表單元件
  • button
  • form
  • label
  • input
  • textarea
  • radio
  • radio-group
  • checkbox
  • checkbox-group
  • switch
  • slider
  • picker-view
  • picker
• 導覽
  • navigator
• 媒體元件
  • image
  • video
• 畫布
  • canvas
• 地圖
  • map
• 開啟元件
  • web-view
  • lifestyle
  • contact-button
• 無障礙功能
  • aria-component

如下所示，Alipay 的 <image> 用於 a:for 指令 (請參閱「清單算繪」)，會對 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>

請注意 item.mode 到 mode 屬性的資料繫結、src 到 src 屬性的資料繫結，以及三個事件處理常式 onTap、onError 和 onLoad 到同名函式的資料繫結。如先前所示，<image> 標記會在內部轉換為 <div>，並包含圖片最終尺寸的預留位置、選用的延遲載入、預設來源等。

如要查看元件的所有可用設定選項，請參閱說明文件。文件內嵌的元件預覽畫面和模擬器，可讓您立即瞭解程式碼的實際效果。

內嵌元件預覽的 Alipay 元件說明文件。

Alipay 元件預覽畫面會在新分頁中彈出。

每個元件也都有 QR code，可使用支付寶應用程式掃描，在獨立的最小範例中開啟元件範例。

在實際裝置上預覽 Alipay <image> 元件，方法是從文件掃描 QR code 連結。

開發人員可以運用專屬 URI 配置 antdevtool-tiny://，直接從說明文件跳到 Alipay 開發人員工具 IDE。這樣一來，說明文件就能直接連結至要匯入的迷你應用程式專案，開發人員可以立即開始使用元件。

自訂元件

除了使用供應商提供的元件，開發人員也可以建立自訂元件。這個概念適用於 WeChat、ByteDance、Alipay 和 Baidu，以及快速應用程式。舉例來說，Baidu 自訂元件包含四個檔案，這些檔案必須位於同一個資料夾中：custom.swan、custom.css、custom.js 和 custom.json。

檔案 custom.json 會將資料夾內容標示為自訂元件。

{
  "component": true
}

檔案 custom.swan 包含標記和 custom.css CSS。

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

.name {
  color: red;
}

custom.js 檔案包含邏輯。元件生命週期函式包括 attached()、detached()、created() 和 ready()。此外，元件也可以對網頁生命週期事件 (即 show() 和 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 () {},
  },
});

接著，自訂元件可以匯入 index.json，匯入的鍵會決定自訂元件的名稱 (在此為 "custom")，自訂元件隨後可在 index.swan 中使用。

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

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

成功： 繼續閱讀，瞭解微型應用程式的專案結構、生命週期和組合。

特別銘謝

本文由 Joe Medley、 Kayce Basques、 Milica Mihajlija、 Alan Kent 和 Keith Gu 審查。