uni-app的pages.json配置文件

一剪轻寒 發表於 2021-8-25 15:46:00

pages.json文件是uni-app 中页面管理、窗口样式、原生的导航栏、底部的原生tabbar 等的配置文件,包含如下节点
1.pages : 设置页面路径及窗口表现
一个pages接收一个数组,数组中由多个page组成,每个page有一个path和一个style组成,如:
<div class="cnblogs_code">
<pre>{
"pages": [
 {
 "path": "pages/index/index", 
 "style": { ... }
 }, {
 "path": "pages/login/login", 
 "style": { ... }
 }
]
}</pre>
</div>
　　style部分属性挺多,这里只列举出其中通用的部分
<div class="cnblogs_code">
<pre>navigationBarBackgroundColor导航栏背景颜色（同状态栏背景色），如"#000000" 
navigationBarTextStyle 导航栏标题颜色及状态栏前景颜色，仅支持 black/white
navigationBarTitleText 导航栏标题文字内容
navigationBarShadow 导航栏阴影，配置参考下方导航栏阴影
backgroundTextStyle 下拉 loading 的样式，仅支持 dark/light
enablePullDownRefresh 是否开启下拉刷新，详见页面生命周期。Boolean
onReachBottomDistance 页面上拉触底事件触发时距页面底部距离，单位只支持px，详见页面生命周期 </pre>
</div>
 
2.tabBar : 设置底部 tab 的表现
<div class="cnblogs_code">
<pre>"tabBar": {
"color": "#7A7E83",//文字颜色
"selectedColor": "#3cc51f",//选中后文字颜色
"borderStyle": "black",//边框的颜色，可选值 black/white
"backgroundColor": "#ffffff",//背景色
"list": [{//tab 的列表，2-5个 tab
 "pagePath": "pages/component/index",//页面路径，必须在 pages 中先定义
 "iconPath": "static/image/icon_component.png",//图片路径，icon 大小限制为40kb,建议尺寸81px*81px
 "selectedIconPath": "static/image/icon_component_HL.png",//选中时的图片路径
 "text": "组件"//tab 上按钮文字
 }, {
 "pagePath": "pages/API/index",
 "iconPath": "static/image/icon_API.png",
 "selectedIconPath": "static/image/icon_API_HL.png",
 "text": "接口"
 }]
} </pre>
</div>
 
可以通过midButton来设置中间按钮,仅为偶数时有效
midButton:中间按钮仅在 list 项为偶数时有效
 
3.globalStyle : 设置默认页面的窗口表现
<div class="cnblogs_code">
<pre> "globalStyle": {
 "navigationBarTextStyle": "black",//导航栏标题颜色及状态栏前景颜色，仅支持 black/white
 "navigationBarTitleText": "演示",//导航栏标题文字内容
 "navigationBarBackgroundColor": "#F8F8F8",//导航栏背景颜色（同状态栏背景色）
 "backgroundColor": "#F8F8F8",//下拉显示出来的窗口的背景色
 "usingComponents":{//引用小程序组件
 "collapse-tree-item":"/components/collapse-tree-item"
 },
 "pageOrientation": "portrait", //横屏配置，全局屏幕旋转设置(仅 APP/微信/QQ小程序)，支持 auto / portrait / landscape
 "rpxCalcMaxDeviceWidth": 960,//rpx 计算所支持的最大设备宽度，单位 px
 "rpxCalcBaseDeviceWidth": 375,//rpx 计算使用的基准设备宽度
 "rpxCalcIncludeWidth": 750 // rpx 计算特殊处理的值，始终按实际的设备宽度计算，单位 rpx
},</pre>
</div>
 
4.easycom : 组件自动引入规则
<div class="cnblogs_code">
<pre>"easycom": {
"autoscan": true,//是否开启自动扫描，开启后将会自动扫描符合components/组件名称/组件名称.vue目录结构的组件
"custom": {//以正则方式自定义组件匹配规则
"^uni-(.*)": "@/components/uni-$1.vue", // 匹配components目录内的vue文件
"^vue-file-(.*)": "packageName/path/to/vue-file-$1.vue" // 匹配node_modules内的vue文件
}
}</pre>
</div>
 
5.condition : 启动模式配置
<div class="cnblogs_code">
<pre>"condition": { //模式配置，仅开发期间生效
"current": 0, //当前激活的模式（list 的索引项）
"list": [{
 "name": "swiper", //模式名称
 "path": "pages/component/swiper/swiper", //启动页面，必选
 "query": "interval=4000&autoplay=false" //启动参数，在页面的onLoad函数里面得到。
 },
 {
 "name": "test",
 "path": "pages/component/switch/switch"
 }
]
}</pre>
</div>
 
6.subPackages : 分包加载配置
分包加载配置，此配置为小程序的分包加载机制,因小程序有体积和资源加载限制，各家小程序平台提供了分包方式，优化小程序的下载和启动速度。
<div class="cnblogs_code">
<pre> "subPackages": [{
 "root": "pagesA",//子包的跟目录,pages中的路径都是相对于这个路径的
 "pages": [{
 "path": "list/list",
 "style": { ...}
 }]
}, {
 "root": "pagesB",
 "pages": [{
 "path": "detail/detail",
 "style": { ...}
 }]
}]</pre>
</div>
 
7.其他对特定平台的支持
这部分暂时不用管 
来源：https://www.cnblogs.com/codermuyi/p/15185368.html

頁: [1]

琼殿技术论坛's Archiver

uni-app的pages.json配置文件