网站建设 好公司网站营销网
pages.json 页面路由
pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。
导航栏高度为 44px (不含状态栏)，tabBar 高度为 50px (不含安全区)。
它类似微信小程序中app.json的页面管理部分。注意定位权限申请等原属于app.json的内容，在uni-app中是在manifest中配置。
page.json配置项列表
| 属性 | 类型 | 必填 | 描述 | 平台兼容 |
|---|---|---|---|---|
| globalStyle | Object | 否 | 设置默认页面的窗口表现 | |
| pages | Object Array | 是 | 设置页面路径及窗口表现 | |
| easycom | Object | 否 | 组件自动引入规则 | 2.5.5+ |
| tabBar | Object | 否 | 设置底部 tab 的表现 | |
| condition | Object | 否 | 启动模式配置 | |
| subPackages | Object Array | 否 | 分包加载配置 | H5 不支持 |
| preloadRule | Object | 否 | 分包预下载规则 | 微信小程序 |
| workers | String | 否 | Worker 代码放置的目录 | 微信小程序 |
| leftWindow | Object | 否 | 大屏左侧窗口 | H5 |
| topWindow | Object | 否 | 大屏顶部窗口 | H5 |
| rightWindow | Object | 否 | 大屏右侧窗口 | H5 |
| uniIdRouter | Object | 否 | 自动跳转相关配置，新增于HBuilderX 3.5.0 | |
| entryPagePath | String | 否 | 默认启动首页，新增于HBuilderX 3.7.0 | 微信小程序、支付宝小程序 |
本篇先来学习 globalStyle
globalStyle用于设置应用的状态栏、导航条、标题、窗口背景色等。下面介绍下它几个常用的属性配置(PS:不同的小程序，配置属性会略有差异，详情请查看官方文档)：
1.navigationBarTextStyle：导航栏标题颜色及状态栏前景颜色，仅支持 black/white，默认为black;
2.navigationBarTitleText:导航栏标题文字内容;
3.navigationBarBackgroundColor:导航栏背景颜色（同状态栏背景色）;
4.backgroundColor:下拉显示出来的窗口的背景色;
5.backgroundTextStyle:下拉 loading 的样式，仅支持 dark / light；
6.enablePullDownRefresh：是否开启下拉刷新；
7.onReachBottomDistance：页面上拉触底事件触发时距页面底部距离，单位只支持px。
页面上拉触底事件的使用：
<script setup>import {onReachBottom} from "@dcloudio/uni-app"onReachBottom(()=>{console.log("触底加载...")})
</script>更多信息， 官方文档详见pages.json 页面路由 | uni-app官网