Trong framework uni-app, mảng trang trong tệp pages.json xác định tập hợp màn hình chính của ứng dụng. Mỗi phần tử trong mảng là một đối tượng chứa hai thuộc tính cốt lõi:

Lưu ý quan trọng:
- Phần tử đầu tiên trong mảng trang được coi là trang chủ
- Mọi thay đổi cấu trúc ứng dụng đều yêu cầu cập nhật mảng này
- Không cần khai báo đuôi file .vue khi định nghĩa đường dẫn

Ví dụ minh họa:
Cấu trúc thư mục ứng dụng:

┌─man-hinh
│  ├─trang-chu
│  │  └─trang-chu.vue
│  └─dang-nhap
│     └─dang-nhap.vue
├─tai-nguyen
├─main.js
├─App.vue
├─manifest.json
└─pages.json

Tương ứng với cấu hình:

{
  "trang": [
    {
      "duongDan": "man-hinh/trang-chu/trang-chu",
      "thietLap": {
        "mauNen": "#F8F9FA",
        "kichHoatKéoXuong": true
      }
    },
    {
      "duongDan": "man-hinh/dang-nhap/dang-nhap",
      "thietLap": {
        "mauChuThanhDieuHuong": "black",
        "tieuDe": "Đăng nhập hệ thống"
      }
    }
  ]
}

Khối thietLap cho phép tuỳ chỉnh chi tiết giao diện với các thông số chính:

• mauNenThanhDieuHuong: Màu nền thanh điều hướng (mặc định #000000)
• kichHoatKéoXuong: Bật/tắt tính năng kéo làm mới (mặc định false)
• maxWidth: Giới hạn chiều rộng tối đa trên nền tảng H5 (đơn vị px)
• disableSwipeBack: Vô hiệu hóa vuốt lùi trên iOS (phiên bản App 3.4.0+)

Các thiết lập trong thietLap sẽ ghi đè thông số từ globalStyle. Khi sử dụng maxWidth, các thành phần position: fixed cần áp dụng biến CSS --window-left và --window-right để căn chỉnh vị trí chính xác.

Một số lưu ý nền tảng đặc thù:
- Thuộc tính titleImage trên Alipay Mini Program bắt buộc sử dụng đường dẫn HTTPS
- Tính năng navigationStyle: custom loại bỏ thanh điều hướng mặc định (hỗ trợ WeChat 7.0+)
- Cấu hình app-plus chỉ áp dụng khi biên dịch cho ứng dụng native

{
  "thietLap": {
    "app-plus": {
      "phan-vung": {
        "mauNen": "#FFFFFF"
      }
    },
    "mp-weixin": {
      "kichThuocPhongTo": 1.2
    }
  }
}