Trong phát triển ứng dụng bằng uni-app, việc hiểu rõ về chu kỳ sống của ứng dụng, trang và cách quản lý định tuyến đóng vai trò quan trọng. Dưới đây là các khái niệm cơ bản và cách sử dụng chúng.

Chu kỳ sống ứng dụng

uni-app cung cấp các hàm chu kỳ sống như onLaunch, onShow, và onHide để xử lý các sự kiện khi ứng dụng khởi động, hiển thị hoặc ẩn đi. Các hàm này được kích hoạt dựa trên trạng thái hiện tại của ứng dụng.

Chu kỳ sống trang

Mỗi trang trong uni-app cũng có các hàm chu kỳ sống riêng biệt như onLoad, onShow, và onReady. Những hàm này giúp bạn kiểm soát hành vi của trang khi nó được tải, hiển thị hoặc sẵn sàng cho người dùng tương tác.

Định tuyến

Định tuyến trong uni-app được quản lý thông qua cấu hình trong file pages.json. Bạn cần thiết lập đường dẫn và kiểu giao diện cho mỗi trang ở đây. Cách làm này tương tự như việc cấu hình định tuyến trong các ứng dụng mini-program thông qua file app.json. Nếu muốn sử dụng cách tiếp cận giống với Vue Router, bạn có thể tìm kiếm plugin tương thích trên thị trường plugin.

Cách chuyển trang

Có hai cách chính để chuyển trang trong uni-app: 1. Sử dụng thành phần navigator. 2. Gọi API trực tiếp.

Stack trang

Framework quản lý các trang đang hoạt động dưới dạng stack. Khi chuyển đổi giữa các trang, stack sẽ thay đổi theo các quy tắc sau:

Cách chuyển	Thay đổi stack	Kích hoạt khi
Khởi tạo	Thêm trang mới vào stack	Mở trang đầu tiên của ứng dụng
Mở trang mới	Thêm trang mới vào stack	Gọi API uni.navigateTo hoặc sử dụng thành phần <navigator open-type="navigate"/>
Chuyển hướng	Xóa trang hiện tại và thêm trang mới	Gọi API uni.redirectTo hoặc sử dụng thành phần <navigator open-type="redirectTo"/>
Quay lại	Xóa các trang liên tục cho đến trang mục tiêu	Gọi API uni.navigateBack, sử dụng thành phần <navigator open-type="navigateBack"/>, hoặc người dùng nhấn nút quay lại
Chuyển Tab	Xóa tất cả các trang ngoài trang Tab mới	Gọi API uni.switchTab hoặc sử dụng thành phần <navigator open-type="switchTab"/>
Tải lại	Xóa tất cả các trang ngoại trừ trang mới	Gọi API uni.reLaunch hoặc sử dụng thành phần <navigator open-type="reLaunch"/>

Phán đoán môi trường chạy

Bạn có thể sử dụng biến process.env.NODE_ENV để xác định xem ứng dụng đang chạy trong môi trường phát triển hay sản xuất.

if (process.env.NODE_ENV === 'development') {
    console.log('Ứng dụng đang chạy trong môi trường phát triển');
} else {
    console.log('Ứng dụng đang chạy trong môi trường sản xuất');
}

Nếu cần nhiều môi trường hơn, chẳng hạn như môi trường thử nghiệm, bạn có thể cấu hình thêm trong file package.json hoặc vue.config.js.

Xác định nền tảng

Việc xác định nền tảng có thể thực hiện ở hai giai đoạn: biên dịch và thời gian chạy.

• Biên dịch: Sử dụng điều kiện biên dịch để áp dụng mã khác nhau cho từng nền tảng.

// #ifdef H5
alert("Chỉ có trên nền tảng H5");
// #endif

• Thời gian chạy: Sử dụng hàm uni.getSystemInfoSync().platform để nhận biết nền tảng hiện tại là Android, iOS hay công cụ phát triển.

const platform = uni.getSystemInfoSync().platform;
switch (platform) {
    case 'android':
        console.log('Đang chạy trên Android');
        break;
    case 'ios':
        console.log('Đang chạy trên iOS');
        break;
    default:
        console.log('Đang chạy trên công cụ phát triển');
        break;
}