Thành phần web
Các thành phần web bắt đầu với cam kết cho phép các nhà phát triển ghép nối các thành phần này lại với nhau và xây dựng những ứng dụng tuyệt vời trên đó. Ví dụ về các thành phần nguyên tử như vậy là yếu tố thời gian của GitHub, web-vitals-element của Stefan Judis hoặc trình bổ trợ không giới hạn, nút bật/tắt chế độ tối của Google. Tuy nhiên, khi nói đến hệ thống thiết kế hoàn chỉnh, tôi đã quan sát thấy rằng mọi người thích dựa vào một bộ thành phần nhất quán từ cùng một nhà cung cấp. Danh sách các ví dụ không đầy đủ bao gồm Thành phần web UI5 của SAP, Các thành phần của Polymer, Các thành phần của Vaadin, FAST của Microsoft, Thành phần web Material, có thể là Thành phần AMP và nhiều thành phần khác. Tuy nhiên, do một số yếu tố nằm ngoài phạm vi của bài viết này, nhiều nhà phát triển cũng đã sử dụng các khung như React, Vue.js, Ember.js, v. v. Thay vì để nhà phát triển tự do lựa chọn bất kỳ tuỳ chọn nào trong số này (hoặc tuỳ thuộc vào quan điểm của bạn, forcing họ phải sử dụng các thành phần), các nhà cung cấp siêu ứng dụng phải cung cấp một tập hợp các nhà cung cấp siêu ứng dụng cung cấp một tập hợp
Thành phần trong ứng dụng nhỏ
Bạn có thể coi các thành phần này giống như bất kỳ thư viện thành phần nào nêu trên. Để xem thông tin tổng quan về các thành phần có sẵn, bạn có thể duyệt qua thư viện thành phần của WeChat, các thành phần của ByteDance, các thành phần của Alipay, Baidu của và các thành phần của Quick App.
Trước đó, tôi có giải thích rằng mặc dù <image>
của WeChat về bản chất là một thành phần web, nhưng về bản chất, không phải tất cả các thành phần này đều là thành phần web về mặt kỹ thuật. Một số thành phần, như <map>
và <video>
, được hiển thị dưới dạng thành phần tích hợp hệ điều hành được phân lớp trên WebView. Đối với nhà phát triển, chi tiết triển khai này không được tiết lộ mà được lập trình như mọi thành phần khác.
Như thường lệ, các thông tin chi tiết luôn khác nhau, nhưng tổng thể các khái niệm lập trình đều giống nhau trên tất cả các nhà cung cấp siêu ứng dụng. Một khái niệm quan trọng là liên kết dữ liệu, như đã trình bày trước đó trong Ngôn ngữ đánh dấu. Nhìn chung, các thành phần được nhóm theo chức năng, vì vậy, việc tìm thấy thành phần phù hợp với công việc sẽ dễ dàng hơn. Dưới đây là ví dụ về cách phân loại của Alipay, tương tự như cách phân nhóm thành phần của các nhà cung cấp khác.
- Xem vùng chứa
view
swiper
scroll-view
cover-view
cover-image
movable-view
movable-area
- Nội dung cơ bản
text
icon
progress
rich-text
- Thành phần biểu mẫu
button
form
label
input
textarea
radio
radio-group
checkbox
checkbox-group
switch
slider
picker-view
picker
- Điều hướng
navigator
- Thành phần nội dung đa phương tiện
image
video
- Canvas
canvas
- Bản đồ
map
- Mở thành phần
web-view
lifestyle
contact-button
- Hỗ trợ tiếp cận
aria-component
Dưới đây, bạn có thể thấy <image>
của Alipay được dùng trong lệnh a:for
(xem nội dung Kết xuất danh sách) lặp lại qua một mảng dữ liệu hình ảnh được cung cấp trong 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>
Hãy lưu ý rằng việc liên kết dữ liệu của item.mode
với thuộc tính mode
, src
với thuộc tính src
và 3 trình xử lý sự kiện onTap
, onError
và onLoad
với các hàm cùng tên. Như đã thấy trước đây, thẻ <image>
nội bộ được chuyển đổi thành <div>
với phần giữ chỗ cho kích thước cuối cùng của hình ảnh, tải từng phần không bắt buộc, nguồn mặc định, v.v.
Các tuỳ chọn cấu hình có sẵn của thành phần đều được liệt kê trong tài liệu này. Bản xem trước thành phần với trình mô phỏng được nhúng trong tài liệu giúp mã trở nên hữu hình ngay lập tức.
Mỗi thành phần cũng có một mã QR có thể quét được bằng ứng dụng Alipay để mở ví dụ về thành phần trong một ví dụ tối thiểu độc lập.
Nhà phát triển có thể chuyển thẳng từ tài liệu sang IDE Công cụ cho nhà phát triển của Alipay bằng cách tận dụng lược đồ URI độc quyền antdevtool-tiny://
. Điều này cho phép tài liệu liên kết trực tiếp với dự án ứng dụng nhỏ được nhập, vì vậy, nhà phát triển có thể bắt đầu sử dụng thành phần này ngay lập tức.
Thành phần tuỳ chỉnh
Ngoài việc sử dụng các thành phần do nhà cung cấp cung cấp, nhà phát triển cũng có thể tạo các thành phần tuỳ chỉnh. Khái niệm này dành cho WeChat, ByteDance, Alipay và Baidu, cũng như Quick App. Ví dụ: thành phần tuỳ chỉnh của Baidu bao gồm bốn tệp phải nằm trong cùng một thư mục: custom.swan
, custom.css
, custom.js
và custom.json
.
Tệp custom.json
biểu thị nội dung thư mục dưới dạng thành phần tuỳ chỉnh.
{
"component": true
}
Tệp custom.swan
chứa mã đánh dấu và custom.css
CSS.
<view class="name" bindtap="tap">{{name}} {{age}}</view>
.name {
color: red;
}
Tệp custom.js
chứa logic. Các hàm trong vòng đời của thành phần là attached()
, detached()
, created()
và ready()
. Ngoài ra, thành phần này cũng có thể phản ứng trên các sự kiện trong vòng đời của trang, cụ thể là show()
và 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 () {},
},
});
Sau đó, bạn có thể nhập thành phần tuỳ chỉnh vào index.json
. Khoá nhập sẽ xác định tên (ở đây: "custom"
) mà sau đó có thể sử dụng thành phần tuỳ chỉnh trong index.swan
.
{
"usingComponents": {
"custom": "/components/custom/custom"
}
}
<view>
<custom name="swanapp"></custom>
</view>
Xác nhận
Bài viết này được Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent và Keith Gu xem xét.