Điều hướng trang là quá trình chuyển đổi giữa các màn hình khác nhau trong ứng dụng. Tương tự như cách web sử dụng thẻ liên kết hoặc đối tượng vị trí cửa sổ, môi trường Mini Program cung cấp hai cơ chế chính để thực hiện thao tác này: điều hướng khai báo và điều hướng lập trình.

1. Điều hướng khai báo (Declarative Navigation)

Cách tiếp cận này tận dụng trực tiếp thành phần <navigator> được tích hợp sẵn trong ngôn ngữ template WXML. Nhà phát triển chỉ cần định nghĩa thuộc tính tương ứng và hệ thống sẽ tự động gắn bó sự kiện nhấn để kích hoạt chuyển trang.

Chuyển đến mục Tab Bar

Các trang được đăng ký trong cấu hình tabBar yêu cầu phương thức chuyển đổi đặc biệt. Khi sử dụng <navigator>, bắt buộc phải gán open-type="switchTab" kèm đường dẫn tuyệt đối bắt đầu bằng ký tự /.

<navigator url="/views/contact/contact" open-type="switchTab">Mở màn hình Tin nhắn</navigator>

Chuyển đến trang thường

Đối với các trang không nằm trong tab bar, thuộc tính open-type mặc định sẽ là navigate. Bạn có thể khai báo rõ ràng hoặc bỏ qua vì hệ thống đã ngầm định hành vi này cho các đường dẫn thông thường.

<navigator url="/views/profile/profile" open-type="navigate">Xem thông tin cá nhân</navigator>

Trở về trang trước

Để di chuyển ngược lại trong lịch sử ngăn xếp trang, cần thiết lập open-type="navigateBack". Thuộc tính delta cho phép chỉ định số lượng cấp độ cần quay lui, mặc định là 1.

<navigator open-type="navigateBack" delta="2">Quay lại màn hình trước đó</navigator>

2. Điều hướng lập trình (Programmatic Navigation)

Khi logic chuyển trang cần được kích hoạt bởi sự kiện JavaScript (ví dụ: sau khi gọi API thành công hoặc xác thực dữ liệu), bộ công cụ wx cung cấp các hàm lệnh tương ứng.

Chuyển đến mục Tab Bar

Hàm wx.switchTab() cho phép chuyển đổi chương trình đến các trang đã cấu hình tab. Đối tượng tham số cần chứa đường dẫn đích.

// Cấu trúc WXML
<view bindtap="handleOpenContact">Chuyển sang Tin nhắn</view>

// Logic xử lý trong JS
Page({
  handleOpenContact() {
    wx.switchTab({
      url: '/views/contact/contact'
    });
  }
});

Chuyển đến trang thường

Hàm wx.navigateTo() đẩy một trang mới vào ngăn xếp điều hướng, giữ nguyên trang hiện tại ở chế độ nền.

// Cấu trúc WXML
<button bindtap="handleOpenProfile">Xem Hồ sơ</button>

// Logic xử lý trong JS
Page({
  handleOpenProfile() {
    wx.navigateTo({
      url: '/views/profile/profile'
    });
  }
});

Trở về trang trước

Hàm wx.navigateBack() xóa trang hiện tại khỏi ngăn xếp và hiển thị trang nằm phía dưới cùng. Nếu không truyền tham số, nó sẽ tự động quay lui 1 cấp.

// Cấu trúc WXML
<button bindtap="handleGoBack">Trở lại</button>

// Logic xử lý trong JS
Page({
  handleGoBack() {
    wx.navigateBack({
      delta: 1
    });
  }
});

3. Truyền và nhận dữ liệu giữa các trang

Cơ chế phân trang trong Mini Program hỗ trợ truyền tham số dưới dạng query string thông qua thuộc tính url. Cú pháp tuân theo chuẩn HTTP: ?key1=value1&key2=value2.

Khai báo tham số qua WXML

<navigator url="/views/profile/profile?userId=8842&status=active">Đi đến Hồ sơ</navigator>

Khai báo tham số qua JavaScript

Page({
  handleOpenProfile() {
    const queryData = 'userId=8842&status=active';
    wx.navigateTo({
      url: `/views/profile/profile?${queryData}`
    });
  }
});

Thu nhận tham số tại trang đích

Trang được mở ra sẽ nhận toàn bộ chuỗi tham số dưới dạng đối tượng thông qua tham số options trong hook vòng đời onLoad. Dữ liệu này có thể được ánh xạ trực tiếp vào state của trang hoặc dùng cho các lệnh gọi API ban đầu.

Page({
  onLoad(queryParams) {
    console.log('Tham số nhận được:', queryParams);
    const { userId, status } = queryParams;
    // Thực hiện logic tải dữ liệu dựa trên userId
    this.fetchUserProfile(userId);
  },
  fetchUserProfile(id) {
    // Mã giả cho việc gọi API
  }
});