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

Thomas Steiner

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

Tương tự 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 thu nhỏ cũng vậy, các thông tin 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 ứng dụng cao cấp. Cấu trúc dự án luôn bao gồm:

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

Tất cả các trang đều được lưu trữ trong từng 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 không bắt buộc. Tất cả tệp phải được đặt tên giống như thư mục chứa tệp, ngoài đuôi tệp. Như vậy, ứng dụng nhỏ chỉ cần con trỏ đến thư mục trong tệp app.json (tệp giống như tệp kê khai) và có thể tìm thấy tất cả các tài nguyên phụ một cách linh động. Từ góc độ của nhà phát triển web, các ứng dụng nhỏ chí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 nhỏ

Ứng dụng nhỏ phải được đăng ký với ứng dụng cấp cao này bằng cách gọi phương thức App() được xác định chung. Tham chiếu đến cấu trúc dự án đã nêu trước đó, điều này xảy ra trong app.js. Vòng đời của ứng dụng nhỏ về cơ bản bao gồm 4 sự kiện: launch, show, hide và error. Trình xử lý cho những sự kiện này có thể được chuyển đến phương thức App() dưới dạng đối tượng cấu hình, đối tượng này cũng có thể chứa thuộc tính globalData lưu giữ dữ liệu có sẵn trên toàn bộ 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 là khác nhau, nhưng khái niệm thì giống nhau đối với WeChat, Alipay, Baidu, ByteDance và Ứng dụng nhanh.

Vòng đời của 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 các sự kiện bổ sung 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 mỗi trang. Đối với các trang index hoặc other trong cấu trúc dự án trước, việc này sẽ lần lượt xảy ra 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

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

Xác nhận

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