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

Thomas Steiner

Thành phần web

Thành phần web bắt đầu bằng hứa hẹn cho phép các nhà phát triển kết hợp chúng với nhau và xây dựng các ứng dụng tuyệt vời dựa trên chúng. Ví dụ về thành phần nguyên tử như vậy là phần tử thời gian của GitHub, Stefan Giu-đa web-vitals-element hoặc trình cắm không biết xấu hổ, Nút bật/tắt chế độ tối của Google. Khi nói đến hệ thống thiết kế hoàn chỉnh, tuy nhiên, tôi quan sát thấy rằng mọi người thích dựa vào tập hợp từ cùng một nhà cung cấp. Một số ví dụ chưa đầy đủ bao gồm mã SAP Thành phần web UI5, Phần tử polymer, Phần tử của Valadin, phần tử của Microsoft FAST, Thành phần web Material, có thể là thành phần AMP và nhiều thành phần khác. Do một nhiều yếu tố nằm ngoài phạm vi của bài viết này, tuy nhiên, rất nhiều nhà phát triển cũng đã đổ xô vào các khung này như React, Vue.js, Ember.js, v.v. Thay vì để nhà phát triển được thoải mái lựa chọn bất kỳ phương án nào trong số này (hoặc tuỳ thuộc vào quan điểm của bạn, buộc họ chọn công nghệ), nhà cung cấp ứng dụng cao cấp cung cấp một nhóm thành phần mà nhà phát triển phải sử dụng trên toàn cầu.

Thành phần trong ứng dụng nhỏ

Bạn có thể xem 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. Để nhận được Tổng quan về các thành phần có sẵn, bạn có thể duyệt 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 và Thành phần ứng dụng nhanh.

Trước đó, tôi đã trình bày rằng trong khi <image> của WeChat, là thành phần web nâng cao, 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. Hơi nhiều các thành phần, như <map> và <video>, được kết xuất dưới dạng Thành phần tích hợp sẵn 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ư thường lệ, thông tin chi tiết sẽ khác nhau, nhưng khái niệm lập trình tổng thể thì giống nhau trên tất cả các siêu ứng dụng Google Cloud. Một khái niệm quan trọng là liên kết dữ liệu, như đã trình bày ở phần 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, do đó việc tìm phù hợp với công việc sẽ dễ dàng hơn. Dưới đây là một ví dụ tương tự trong cách phân loại của Alipay vào 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
  • Tính năng chỉ đường
    • navigator
  • Thành phần nội dung nghe nhìn
    • image
    • video
  • Vải bố
    • canvas
  • Bản đồ
    • map
  • Mở thành phần
    • web-view
    • lifestyle
    • contact-button
  • Hỗ trợ người khuyết tật
    • aria-component

Dưới đây, bạn có thể thấy <image> của Alipay được sử dụng trong Lệnh 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>

Hãy lưu ý rằng 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 cho các hàm cùng tên. Như hiển thị trước đó, thẻ <image> nội bộ sẽ được chuyển đổi thành <div> có phần giữ chỗ cho kích thước cuối cùng của hình ảnh, tuỳ chọn tải từng phần, một nguồn mặc định, và hơn thế nữa

Tất cả các tuỳ chọn cấu hình có sẵn của thành phần này đều được liệt kê trong tài liệu. Tài liệu được nhúng vào tài liệu bản xem trước thành phần với trình mô phỏng sẽ làm cho mã trở nên rõ ràng ngay lập tức.

Tài liệu về thành phần của Alipay có bản xem trước thành phần được nhúng, cho thấy một trình soạn thảo mã cùng 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, hiển thị một 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 Alipay mở rộng trong thẻ riêng.

Mỗi thành phần cũng có một mã QR mà bạn có thể quét bằng ứng dụng Alipay để mở thành phần đó trong ví dụ tối thiểu độc lập.

Bản xem trước thành phần &quot;image&quot; của Alipay 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 vào đườ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 vào IDE của Alipay trong Công cụ cho nhà phát triển bằng cách tận dụng một giao thứ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 để các 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 đưa ra, nhà phát triển cũng có thể tạo các thành phần tuỳ chỉnh. Chiến lược phát hành đĩa đơn có một khái niệm là WeChat, ByteDance! Alipay và Baidu, cũng như Ứng dụng nhanh. Ví dụ: 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à 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 thành phần là attached(), detached(), created() và ready(). Thành phần này cũng có thể phản ứng với 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á của lệnh nhập sẽ xác định tên (tại đây: "custom") mà sau đó bạn có thể dùng với 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 đánh giá bởi Joe Medley thân mến! Kayce Basques, Milica Mihajlija, Alan Kent, và Keith Gu.