# 页面配置

app.json 中的部分配置，也支持对单个页面进行配置，可以在页面对应的 `.json` 文件来对本页面的表现进行配置。

页面中配置项在当前页面会覆盖 `app.json` 中相同的配置项（样式相关的配置项属于 `app.json` 中的 `window` 属性，但这里不需要额外指定 `window` 字段），具体的取值和含义可参考[全局配置文档](app)中说明。

文件内容为一个 JSON 对象，有以下属性：

## 配置项
| 属性                         | 类型     | 默认值   | 描述                                                                                                           | 最低版本                                                           |
|------------------------------|----------|----------|----------------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------|
| navigationBarBackgroundColor | HexColor | #000000  | 导航栏背景颜色，如 `#000000`                                                                                   |                                                                    |
| navigationBarTextStyle       | string   | white    | 导航栏标题、状态栏颜色，仅支持 `black` / `white`                                                                       |                                                                    |
| navigationBarTitleText       | string   |          | 导航栏标题文字内容                                                                                             |                                                                    |
| navigationStyle              | string   | default  | 导航栏样式，仅支持以下值：
`default` 默认样式
 `custom` 自定义导航栏，只保留右上角胶囊按钮。           | iOS/Android 微信客户端 7.0.0，Windows/Mac 端基础库 >= v3.6.1             |
| homeButton                   | boolean  | false    | 在非首页、非页面栈最底层页面或非tabbar内页面中的导航栏展示home键                                               | 微信客户端 8.0.24                                                  |
| backgroundColor              | HexColor | #ffffff  | 窗口的背景色                         |                                                                    |
| backgroundColorContent       | HexColor | #RRGGBBAA | 页面容器背景色，[点击查看设置背景色详情](/miniprogram/dev/framework/runtime/skyline/custom-route.md#%E8%AE%BE%E7%BD%AE%E9%A1%B5%E9%9D%A2%E9%80%8F%E6%98%8E) |                                                                    |
| backgroundTextStyle          | string   | dark     | 下拉 loading 的样式，仅支持 `dark` / `light`                                                                   |                                                                    |
| backgroundColorTop           | string   | #ffffff  | 顶部窗口的背景色，仅 iOS 支持                                                                                  | 微信客户端 6.5.16                                                  |
| backgroundColorBottom        | string   | #ffffff  | 底部窗口的背景色，仅 iOS 支持                                                                                  | 微信客户端 6.5.16                                                  |
| enablePullDownRefresh        | boolean  | false    | 是否开启当前页面下拉刷新。
详见 [Page.onPullDownRefresh](../api/Page#onpulldownrefresh)                         |                                                                    |
| onReachBottomDistance        | number   | 50       | 页面上拉触底事件触发时距页面底部距离，单位为px。
详见 [Page.onReachBottom](../api/Page#onreachbottom)           |                                                                    |
| pageOrientation              | string   | portrait | 屏幕旋转设置，支持 `auto` / `portrait` / `landscape` 
详见 [响应显示区域变化](/miniprogram/dev/framework/view/resizable.md)            | [2.4.0](/miniprogram/dev/framework/compatibility.md) (auto) / [2.5.0](/miniprogram/dev/framework/compatibility.md) (landscape) |
| disableScroll                | boolean  | false    | 设置为 `true` 则页面整体不能上下滚动。
只在页面配置中有效，无法在 `app.json` 中设置                        |                                                                    |
| usingComponents              | Object   | 否       | 页面[自定义组件](/miniprogram/dev/framework/component-framework/index.md)配置                                                | [1.6.3](/miniprogram/dev/framework/compatibility.md)                                               |
| initialRenderingCache        | string   |          | 页面[初始渲染缓存](/miniprogram/dev/framework/view/initial-rendering-cache.md)配置，支持 `static` / `dynamic` / `capture`         | [2.11.1](/miniprogram/dev/framework/compatibility.md)                                              |
| style                        | string   | default  | 启用新版的组件样式                                                                                             | [2.10.2](/miniprogram/dev/framework/compatibility.md)                                              |
| singlePage                   | Object   | 否       | 单页模式相关配置                                                                                               | [2.12.0](/miniprogram/dev/framework/compatibility.md)                                            |
| restartStrategy              | string | homePage | 重新启动策略配置 | [2.8.0](/miniprogram/dev/framework/compatibility.md) |
| handleWebviewPreload         | string | static   | 控制[预加载下个页面的时机](/miniprogram/dev/framework/performance/tips/runtime_nav.md#_2-4-%E6%8E%A7%E5%88%B6%E9%A2%84%E5%8A%A0%E8%BD%BD%E4%B8%8B%E4%B8%AA%E9%A1%B5%E9%9D%A2%E7%9A%84%E6%97%B6%E6%9C%BA)。支持 `static` / `manual` / `auto` | [2.15.0](/miniprogram/dev/framework/compatibility.md) |
| visualEffectInBackground     | string | 否   | 切入系统后台时，隐藏页面内容，保护用户隐私。支持 `hidden` / `none`，若对页面单独设置则会覆盖全局的配置，详见 [全局配置](app)                                                  | [2.15.0](/miniprogram/dev/framework/compatibility.md) |
| enablePassiveEvent           | Object 或 boolean | 否   | 事件监听是否为 passive，若对页面单独设置则会覆盖全局的配置，详见 [全局配置](app)                                                  | [2.24.1](/miniprogram/dev/framework/compatibility.md) |
| renderer                     | string | 否   | 渲染后端                                                            |  [2.30.4](/miniprogram/dev/framework/compatibility.md) |
| rendererOptions              | Object | 否   | 渲染后端选项，详情[相关文档](app) | [3.1.0](/miniprogram/dev/framework/compatibility.md) |
| componentFramework           | string | 否   | 组件框架，详情[相关文档](/miniprogram/dev/framework/custom-component/glass-easel/migration.md) | [2.30.4](/miniprogram/dev/framework/compatibility.md) |
- 注意：并不是所有 `app.json` 中的配置都可以在页面覆盖或单独指定，仅限于本文档包含的选项。
- 注意：iOS/Android 客户端 7.0.0 以下版本，`navigationStyle` 只在 `app.json` 中生效。

## 配置示例
```json
{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "微信接口功能演示",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
}
```