本頁面由 Cloud Translation API 翻譯而成。

迷你應用程式元件

Thomas Steiner

網頁元件

最初是網頁元件讓開發人員將這些資訊拼湊起來並發展出出色的應用程式優先放送示例這些 atomic 元件是 GitHub 的「時間元素」， Stefan 尤迪斯web-vitals-element 或無害的插頭 Google 的深色模式切換功能。這張投影片的內容完整的設計系統，但我發現使用者元件範例清單還不完整，包括 SAP 的 UI5 網頁元件，聚合物元素、 Vaadin 的元素，Microsoft 的快速， Material Web 元件 AMP 元件等等由於至於超出本文討論範圍的因素，許多開發人員卻已著手修正 React、Vue.js 等架構 Ember.js 等，而不是讓開發人員自由選擇這些選項 (或取決於你的觀點，強制選擇技術選項) 超級應用程式供應商都會提供開發人員所需的一組元件。

迷你應用程式中的元件

您可以將這些元件想成是上述任一元件程式庫。若要取得所有元件的簡介 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

在下方可以看到 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 元件說明文件：內嵌元件預覽畫面，其中顯示程式碼編輯器和模擬工具，可在模擬的 iPhone 6 上算繪元件。 — 含嵌入式元件預覽的 Alipay 元件說明文件。

Alipay 元件預覽畫面是在獨立瀏覽器分頁中執行，顯示程式碼編輯器和模擬工具，可在模擬的 iPhone 6 上呈現元件。 — 支付元件預覽畫面在原本的分頁中彈出。

每個元件也都有一組 QR code 可使用開啟該元件的 Alipay 應用程式掃描。

Alipay 掃描說明文件中的 QR code 後，實際裝置會預覽 Alipay 的「image」元件。 — 開啟文件中的 QR code 連結後，在實際裝置上預覽 Alipay `<image>` 元件。

開發人員可以運用專屬 URI 配置 antdevtool-tiny://。這樣一來，說明文件就會直接連結至即可匯入迷你應用程式專案，方便開發人員立即開始使用這個元件。

自訂元件

除了使用供應商提供的元件外，開發人員也可以建立自訂元件。概念 WeChat ByteDance， Alipay 和 Baidu，以及快速應用程式。舉例來說，百度自訂元件包含必須在同一個資料夾中的 4 個檔案： 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