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 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.

Tài liệu về thành phần Alipay với bản xem trước thành phần được nhúng, cho thấy trình soạn thảo mã với trình mô phỏng cho thấy thành phần kết xuất trên iPhone 6 mô phỏng.
Tài liệu về thành phần Alipay có bản xem trước thành phần được nhúng.
Bản xem trước thành phần Alipay chạy trong một thẻ trình duyệt riêng biệt thể hiện trình soạn thảo mã với trình mô phỏng cho thấy thành phần kết xuất trên iPhone 6 mô phỏng.
Bản xem trước thành phần của Alipay đã mở rộng trong thẻ riêng.

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.

Thành phần &quot;hình ảnh&quot; của Alipay đã được xem trước trên một thiết bị thực sau khi quét mã QR trong tài liệu.
Xem trước thành phần Alipay <image> trên thiết bị thực sau khi truy cập đường liên kết đến mã QR trong tài liệu.

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.