Cấu trúc, vòng đời và gói dự án

Thomas Steiner

Cấu trúc dự án ứng dụng nhỏ

Giống như trước đây với ngôn ngữ đánh dấu, ngôn ngữ định kiểu và các thành phần; với cấu trúc dự án ứng dụng nhỏ cũng vậy, các chi tiết như đuôi tệp hoặc tên mặc định cũng sẽ khác nhau. Tuy nhiên, ý tưởng tổng thể là giống nhau đối với tất cả các nhà cung cấp siêu ứng dụng. Cấu trúc dự án luôn bao gồm:

  • Tệp gốc app.js khởi chạy ứng dụng nhỏ.
  • Tệp cấu hình app.json gần như tương ứng với tệp kê khai ứng dụng web.
  • Tệp biểu định kiểu chung không bắt buộc app.css với các kiểu mặc định được chia sẻ.
  • Tệp project.config.json chứa thông tin bản dựng.

Tất cả các trang được lưu trữ trong thư mục con riêng lẻ trong thư mục pages. Mỗi thư mục con của trang chứa một tệp CSS, một tệp JS, một tệp HTML và một tệp JSON cấu hình tuỳ chọn. Tất cả tệp phải được đặt tên giống như thư mục chứa tệp, ngoài phần mở rộng tệp. Như vậy, ứng dụng nhỏ chỉ cần một con trỏ đến thư mục trong tệp app.json (tệp giống như tệp kê khai) và có thể linh động tìm thấy tất cả tài nguyên phụ. Từ góc độ của một nhà phát triển web, ứng dụng nhỏ là ứng dụng nhiều trang.

├── app.js               # Initialization logic
├── app.json             # Common configuration
├── app.css              # Common style sheet
├── project.config.json  # Project configuration
└── pages                # List of pages
   ├── index               # Home page
   │   ├── index.css         # Page style sheet
   │   ├── index.js          # Page logic
   │   ├── index.json        # Page configuration
   │   └── index.html        # Page markup
   └── other               # Other page
       ├── other.css         # Page style sheet
       ├── other.js          # Page logic
       ├── other.json        # Page configuration
       └── other.html        # Page markup

Vòng đời của ứng dụng thu nhỏ

Một ứng dụng nhỏ phải được đăng ký với siêu ứng dụng đó bằng cách gọi phương thức App() được xác định chung. Tham khảo cấu trúc dự án được nêu trước đây, điều này xảy ra trong app.js. Về cơ bản, vòng đời của ứng dụng thu nhỏ bao gồm 4 sự kiện: launch, show, hide và error. Trình xử lý cho các sự kiện này có thể được truyền đến phương thức App() dưới dạng một đối tượng cấu hình. Đối tượng này cũng có thể chứa thuộc tính globalData chứa dữ liệu có sẵn trên tất cả các trang.

/* app.js */
App({
  onLaunch(options) {
    // Do something when the app is launched initially.
  },
  onShow(options) {
    // Do something when the app is shown.
  },
  onHide() {
    // Do something when the app is hidden.
  },
  onError(msg) {
    console.log(msg);
  },
  globalData: "I am global data",
});

Như thường lệ, từng thông tin chi tiết sẽ khác nhau, nhưng khái niệm là như nhau đối với WeChat, Alipay, Baidu, ByteDance và cả Quick App (Ứng dụng nhanh).

Vòng đời trang

Tương tự như vòng đời của ứng dụng, vòng đời của trang cũng có các sự kiện trong vòng đời mà nhà phát triển có thể theo dõi và phản ứng. Các sự kiện chính này là load, show, ready, hide và unload. Một số nền tảng cung cấp thêm các sự kiện khác như pulldownrefresh. Quá trình thiết lập trình xử lý sự kiện diễn ra trong phương thức Page() được xác định cho từng trang. Đối với các trang index hoặc other trong cấu trúc dự án trước đây, điều này sẽ xảy ra tương ứng trong index.js hoặc other.js.

/* index.js */
Page({
  data: {
    text: "This is page data.",
  },
  onLoad: function (options) {
    // Do something when the page is initially loaded.
  },
  onShow: function () {
    // Do something when the page is shown.
  },
  onReady: function () {
    // Do something when the page is ready.
  },
  onHide: function () {
    // Do something when the page is hidden.
  },
  onUnload: function () {
    // Do something when the page is closed.
  },
  onPullDownRefresh: function () {
    // Do something when the user pulls down to refresh.
  },
  onReachBottom: function () {
    // Do something when the user scrolls to the bottom.
  },
  onShareAppMessage: function () {
    // Do something when the user shares the page.
  },
  onPageScroll: function () {
    // Do something when the user scrolls the page.
  },
  onResize: function () {
    // Do something when the user resizes the page.
  },
  onTabItemTap(item) {
    // Do something when the user taps the page's tab.
  },
  customData: {
    foo: "bar",
  },
});

Quy trình xây dựng

Quy trình xây dựng ứng dụng nhỏ được tách riêng khỏi nhà phát triển. Về sau, nền tảng này sử dụng các công cụ trong ngành như trình biên dịch Babel để dịch chuyển và giảm kích thước, cũng như bộ biến đổi CSS postcss. Trải nghiệm tạo bản dựng tương tự như trải nghiệm của Next.js hoặc create-react-app, trong đó nhà phát triển (nếu rõ ràng chọn không làm như vậy) sẽ tuyệt đối không chạm vào tham số bản dựng. Cuối cùng, các tệp đã xử lý kết quả sẽ được ký, mã hoá và đóng gói trong một hoặc một số gói (con) rồi tải lên máy chủ của các nhà cung cấp siêu ứng dụng. Các gói con dùng để tải từng phần, vì vậy, bạn không cần phải tải một ứng dụng nhỏ xuống cùng một lúc. Thông tin đóng gói được đảm bảo riêng tư và không được ghi lại. Tuy nhiên, một số định dạng gói như định dạng wxapkg của WeChat đã được thiết kế đảo ngược.

Xác nhận

Bài viết này do Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent, và Keith Gu đánh giá.