迷你應用程式元件

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>，其中包含圖片最終尺寸的預留位置、選用的延遲載入、預設來源 依此類推

如要查看元件可用的設定選項，請參閱 說明文件。文件內嵌 使用模擬器的元件預覽 讓程式碼立即成為實質的

，瞭解如何調查及移除這項存取權。

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

開發人員可以運用 專屬 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