Thành phần của ứng dụng nhỏ

Thomas Steiner

Thành phần web

Các thành phần web bắt đầu với lời hứa cho phép nhà phát triển ghép các thành phần này lại với nhau và xây dựng các ứng dụng tuyệt vời dựa trên các thành phần đó. Ví dụ về các thành phần nguyên tử như vậy là các phần tử thời gian của GitHub, phần tử Web Vitals của Stefan Judis hoặc (xin lỗi vì quảng cáo lộ liễu) nút bật tắt chế độ tối của Google. Tuy nhiên, khi nói đến các hệ thống thiết kế hoàn chỉnh, tôi nhận thấy rằng mọi người thích dựa vào một tập hợp các thành phần nhất quán của cùng một nhà cung cấp. Một danh sách ví dụ chưa đầy đủ bao gồm các Thành phần web UI5 của SAP, các Phần tử Polymer, các phần tử của Vaadin, FAST của Microsoft, các Thành phần web Material, các thành phần AMP (có thể tranh cãi) 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 đã chuyển sang các khung như React, Vue.js, Ember.js, v.v. Thay vì cho nhà phát triển quyền tự do chọn bất kỳ lựa chọn nào trong số này (hoặc tuỳ thuộc vào quan điểm của bạn, buộc họ phải lựa chọn công nghệ), các nhà cung cấp siêu ứng dụng đều cung cấp một tập hợp các thành phần mà nhà phát triển phải sử dụng.

Các thành phần trong ứng dụng nhỏ

Bạn có thể coi các thành phần này như bất kỳ thư viện thành phần nào được đề cập ở trên. Để xem tổng quan về các thành phần hiện có, bạn có thể duyệt xem 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, các thành phần của Baidu và các thành phần của Ứng dụng nhanh.

Trước đó tôi đã chỉ ra rằng mặc dù ví dụ: <image> của WeChat là một thành phần web ở bên trong, nhưng 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 kết xuất dưới dạng các thành phần tích hợp sẵn trong hệ điều hành được xếp 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ộ, chúng được lập trình như bất kỳ thành phần nào khác.

Như mọi khi, các chi tiết sẽ khác nhau, nhưng các khái niệm lập trình tổng thể đề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 phần Ngôn ngữ đánh dấu. Nói chung, các thành phần được nhóm theo chức năng, vì vậy, việc tìm thành phần phù hợp cho công việc sẽ dễ dàng hơn. Dưới đây là một ví dụ về cách phân loại của Alipay, tương tự như cách nhóm thành phần của các nhà cung cấp khác.

• Vùng chứa chế độ xem
  • 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 nghe nhìn
  • image
  • video
• Canvas
  • canvas
• Bản đồ
  • map
• Thành phần mở
  • web-view
  • lifestyle
  • contact-button
• Khả năng tiếp cận
  • aria-component

Dưới đây, bạn có thể thấy <image> của Alipay được sử dụng trong chỉ thị a:for (xem phần Kết xuất danh sách) lặp lại trên 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>

Lưu ý về 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ó cùng tên. Như đã trình bày trước đó, thẻ <image> sẽ được chuyển đổi nội bộ thành a <div> với phần giữ chỗ cho kích thước cuối cùng của hình ảnh, tính năng tải từng phần (không bắt buộc), nguồn mặc định, v.v.

Tất cả các lựa chọn cấu hình hiện có của thành phần đều được liệt kê trong tài liệu. Bản xem trước thành phần được nhúng trong tài liệu cùng với trình mô phỏng sẽ giúp bạn hình dung ngay được đoạn mã.

Mỗi thành phần cũng có một mã QR có thể được quét bằng ứng dụng Alipay. Mã này sẽ mở ví dụ về thành phần trong một ví dụ tối thiểu khép kín.

Nhà phát triển có thể chuyển thẳng từ tài liệu sang IDE Alipay DevTools bằng cách tận dụng một 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 đến một dự án ứng dụng nhỏ sẽ được nhập, nhờ đó nhà phát triển có thể bắt đầu sử dụng thành phần 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 tồn tại cho WeChat, ByteDance, Alipay và Baidu, cũng như Ứng dụng nhanh. Ví dụ: một thành phần tuỳ chỉnh của Baidu bao gồm 4 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 là một thành phần tuỳ chỉnh.

{
  "component": true
}

Tệp custom.swan chứa mã đánh dấu và custom.css chứa CSS.

<view class="name" bindtap="tap">{{name}} {{age}}</view>

.name {
  color: red;
}

Tệp custom.js chứa logic. Các hàm vòng đời 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 với các sự kiện vòng đời 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 trong index.json. Khoá của quá trình nhập sẽ xác định tên (ở đây là: "custom") mà thành phần tuỳ chỉnh có thể được sử dụng trong index.swan.

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

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

Lời cảm ơn

Bài viết này được Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent, và Keith Gu xem xét.