迷你應用程式元件

網頁元件

網頁元件的用意是讓開發人員能夠整合在一起，並在其上建構出色的應用程式。這類原子元件的範例包括 GitHub 的時間元素、Stellfan Judis 的 web-vitals-element，或是 Google 的深色模式切換鈕。然而，設計完整的設計系統時，我發現使用者偏好依賴同一廠商提供的一組連貫元件。部分範例並不完整，包括 SAP 的 UI5 網頁元件、Polymer 元素、Vaadin 的元素、Microsoft 的 FAST、Material Web 元件 (可能是 AMP 元件等)。由於許多因素不在本文的涵蓋範圍內，很多開發人員還整合到 React、Vue.js、Ember.js 等架構中，而非讓開發人員自由選擇任一選項 (或者取決於你的觀點，強制應用程式供應商forcing任何一種技術元件可供選擇)。

迷你應用程式中的元件

您可以把這些元件想成是上述的任何元件程式庫。如需可用元件的總覽，您可以瀏覽 WeChat 的元件程式庫、ByteDance 的元件、Alipay 的元件、百度，以及 快速應用程式元件。

先前我展示了，舉例來說，WeChat 的 <image> 是當時的網頁元件，並不是所有這些元件都是技術上的網頁元件。<map> 和 <video> 等部分元件會轉譯為 OS 內建元件，並疊加在 WebView 上。不會對開發人員顯示此實作詳細資料，其設計方式和任何其他元件一樣。

一如既往，細節不盡相同，但所有超級應用程式供應商的整體程式設計概念都相同。一項重要的概念是資料繫結，如標記語言所示。一般來說，元件會按函式分組，因此找出工作所需的元件會比較容易。以下是 Alipay 的分類範例，類似其他廠商的元件群組。

• 查看容器
  • 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

下方您會看到 a:for 指令中使用的 Alipay <image> (請參閱「清單轉譯」一節)，迴圈會覆蓋 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>，其中包含圖片最終尺寸的預留位置、選用的延遲載入、預設來源等。

說明文件列出了該元件可用的設定選項。嵌入文件內使用模擬器的元件預覽可讓程式碼立即實際顯示。

每個元件也都有一個 QR code，您可以使用 Alipay 應用程式掃描這個 QR code，該應用程式會在獨立的最小範例中開啟元件範例。

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

自訂元件

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

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

{
  "component": true
}

custom.swan 檔案包含標記和 CSS custom.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 中匯入自訂元件，匯入的鍵會決定可在 index.swan 中搭配自訂元件的名稱 (此處："custom")。

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

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

特別銘謝

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