網頁元件
網頁元件的用意是讓開發人員能夠整合在一起,並在其上建構出色的應用程式。這類原子元件的範例包括 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 撰寫。