uni-app的pages.json配置文件

一剪轻寒 · 发表于 2021-8-25 15:46:00

pages.json文件是uni-app 中页面管理、窗口样式、原生的导航栏、底部的原生tabbar 等的配置文件,包含如下节点

1.pages : 设置页面路径及窗口表现

一个pages接收一个数组,数组中由多个page组成,每个page有一个path和一个style组成,如:

{
    "pages": [
        {
            "path": "pages/index/index", 
            "style": { ... }
        }, {
            "path": "pages/login/login", 
            "style": { ... }
        }
    ]
}

　　style部分属性挺多,这里只列举出其中通用的部分

navigationBarBackgroundColor  导航栏背景颜色（同状态栏背景色），如"#000000"    
navigationBarTextStyle             导航栏标题颜色及状态栏前景颜色，仅支持 black/white    
navigationBarTitleText              导航栏标题文字内容    
navigationBarShadow               导航栏阴影，配置参考下方 导航栏阴影    
backgroundTextStyle                下拉 loading 的样式，仅支持 dark/light    
enablePullDownRefresh             是否开启下拉刷新，详见页面生命周期。Boolean    
onReachBottomDistance            页面上拉触底事件触发时距页面底部距离，单位只支持px，详见页面生命周期

2.tabBar : 设置底部 tab 的表现

"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": "接口"
    }]
}

可以通过midButton来设置中间按钮,仅为偶数时有效

midButton:中间按钮仅在 list 项为偶数时有效

3.globalStyle : 设置默认页面的窗口表现

 "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
    },

4.easycom : 组件自动引入规则

"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文件
  }
}

5.condition : 启动模式配置

"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"
        }
    ]
}

6.subPackages : 分包加载配置

分包加载配置，此配置为小程序的分包加载机制,因小程序有体积和资源加载限制，各家小程序平台提供了分包方式，优化小程序的下载和启动速度。

 "subPackages": [{
        "root": "pagesA",//子包的跟目录,pages中的路径都是相对于这个路径的
        "pages": [{
            "path": "list/list",
            "style": { ...}
        }]
    }, {
        "root": "pagesB",
        "pages": [{
            "path": "detail/detail",
            "style": { ...}
        }]
    }]

7.其他对特定平台的支持

这部分暂时不用管

来源：https://www.cnblogs.com/codermuyi/p/15185368.html