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 ứng dụng nhỏ cấu trúc dự án cũng vậy, các chi tiết như đuôi tệp hoặc tên mặc định sẽ khác nhau. Chiến lược phát hành đĩa đơn ý tưởng chung là như 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 mini. - 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 trang tính kiểu chung
app.css
không bắt buộc có 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 được lưu trữ trong thư mục con riêng lẻ trong
pages
thư mục. 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
tệp JSON cấu hình. Ngoài tệp, bạn phải đặt tên cho tất cả tệp giống như thư mục chứa tệp
tiện ích. 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ể tự động tìm thấy tất cả các tài nguyên phụ. Từ quan điểm của nhà phát triển web, ứng dụng mini 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 mini
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 đó, việc này xảy ra trong app.js
. Về cơ bản, vòng đời của ứng dụng mini bao gồm 4 sự kiện: launch
, show
, hide
và error
. Bạn có thể truyền trình xử lý cho các sự kiện này đến phương thức App()
ở 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 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ệ, các chi tiết riêng lẻ sẽ khác nhau, nhưng khái niệm thì giống nhau cho WeChat, Alipay, Baidu, ByteDance, và cũng Ứng dụng nhanh.
Vòng đời của trang
Tương tự như vòng đời ứng dụng, vòng đời trang cũng có các sự kiện trong vòng đời mà nhà phát triển có thể lắng nghe và phản ứng. Các sự kiện chính này là load
, show
, ready
, hide
và unload
. Hơi nhiều
nền tảng cung cấp 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 mỗi trang. Đối với các trang index
hoặc other
từ cấu trúc dự án trước, việc 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 mini được tóm tắt cho nhà phát triển. Trong phần nội dung, công cụ này đang sử dụng các công cụ trong ngành như trình biên dịch Babel để chuyển đổi mã và rút gọn mã cũng như trình chuyển đổi CSS postcss. Trải nghiệm xây dựng tương đương với
Next.js hoặc
create-react-app
là nơi nhà phát triển, nếu
họ chọn không sử dụng, không bao giờ chạm đến các tham số bản dựng. Các tệp đã xử lý kết quả
cuối cùng được ký, mã hoá và đóng gói trong một hoặc nhiều gói (phụ) sau đó được tải lên
vào máy chủ của các nhà cung cấp siêu ứng dụng. Gói con dùng để tải lười, vì vậy, bạn không cần tải ứng dụng mini xuống cùng một lúc. Thông tin đóng gói cần đảm bảo tính riêng tư và
không được ghi lại, nhưng một số định dạng gói hàng như định dạng wxapkg
của WeChat đã bị
reverse-engineered.
Lời cảm ơ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.