uni-app에서 pages.json 파일은 애플리케이션의 전역 설정을 관리하며, 페이지 경로, 화면 스타일, 네이티브 네비게이션 바 및 하단 탭바 등을 결정하는 데 사용됩니다. 이는 WeChat Mini Program의 app.json과 유사합니다.

아래는 모든 설정 옵션을 포함한 예제입니다:

{
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "샘플",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8",
    "usingComponents": {
      "tree-item": "/components/tree-item"
    },
    "pageOrientation": "portrait",
    "renderingMode": "separated"
  },
  "pages": [
    {
      "path": "views/main/home",
      "style": {
        "navigationBarTitleText": "홈"
      }
    },
    {
      "path": "views/setting/profile",
      "style": {
        "navigationBarTitleText": "프로필"
      }
    }
  ],
  "tabBar": {
    "list": [
      {
        "pagePath": "views/main/home",
        "text": "홈",
        "iconPath": "assets/icons/home.png",
        "selectedIconPath": "assets/icons/home-selected.png"
      },
      {
        "pagePath": "views/setting/profile",
        "text": "프로필",
        "iconPath": "assets/icons/profile.png",
        "selectedIconPath": "assets/icons/profile-selected.png"
      }
    ]
  },
  "easycom": {
    "autoscan": true,
    "custom": {
      "^u-(.*)": "@/components/u-$1.vue"
    }
  },
  "leftWindow": {
    "path": "windows/left/sidebar",
    "style": {
      "width": "250px"
    }
  },
  "topWindow": {
    "path": "windows/top/header",
    "style": {
      "height": "50px"
    }
  },
  "rightWindow": {
    "path": "windows/right/menu",
    "style": {
      "width": "200px"
    },
    "matchMedia": {
      "minWidth": 768
    }
  }
}

globalStyle

애플리케이션 상태 표시줄, 네비게이션 바, 제목, 배경색 등을 설정하는 데 사용됩니다.

topWindow

넓은 화면에 적합하도록 상단 창을 구성합니다.

"topWindow": {
  "path": "modules/topbar/index",
  "style": {
    "height": "60px"
  }
}

• path: 상단 창으로 사용할 페이지 경로.
• style: 창 스타일 설정.

leftWindow & rightWindow

왼쪽 및 오른쪽 창을 구성합니다.

"leftWindow": {
  "path": "modules/sidebar/index",
  "style": {
    "width": "250px"
  }
},
"rightWindow": {
  "path": "modules/menu/index",
  "style": {
    "width": "200px"
  },
  "matchMedia": {
    "minWidth": 768
  }
}

matchMedia

다음 조건에 따라 창을 자동으로 표시하거나 숨깁니다.

예시:

"matchMedia": {
  "minWidth": 768
}

주의사항

• globalStyle에서 설정된 titleImage는 각 페이지의 개별 설정을 덮어씁니다.
• 넓은 화면에서는 추가적인 창들이 자동으로 표시될 수 있으며, 필요 시 CSS를 통해 네비게이션 바를 숨길 수 있습니다.