深入解析 UniApp 的 pages.json 配置文件

前言：家人们，大家好！今天分享一篇文章给大家！要是文章对你有帮助，激发了你的灵感，

求个收藏 + 关注啦～后续还有超多惊喜，别错过！

 

目录

引言

一、Easycom 组件自动引入配置

二、Pages 主包页面配置

三、SubPackages 分包配置

分包资源规则

四、PreloadRule 分包预加载配置

五、TabBar 配置

六、GlobalStyle 全局样式配置

总结

---

引言

在 UniApp 开发中，pages.json 是一个至关重要的配置文件，它承担着整个应用的页面路径、样式、分包、预加载以及 TabBar 等多方面的配置工作。通过合理配置 pages.json，开发者能够高效地管理应用的页面结构和功能，实现丰富多样的交互效果。本文将详细解读 pages.json 配置文件，结合具体示例，深入剖析其各个配置项的作用和使用方法。

一、Easycom 组件自动引入配置

"easycom": {
    "^u-(.*)": "@/uni_modules/uview-ui/components/u-$1/u-$1.vue",
    "^app-(.*)": "@/components/app-$1/index.vue"
}

easycom 是 UniApp 提供的一项便捷功能，用于实现组件的自动引入。在上述配置中，定义了两个规则：

• ^u-(.*)：以 u- 开头的组件，会自动从 @/uni_modules/uview-ui/components/u-$1/u-$1.vue 路径引入。这意味着在使用 uview-ui 库中的组件时，无需手动在每个页面中引入，大大提高了开发效率。
• ^app-(.*)：以 app- 开头的组件，会自动从 @/components/app-$1/index.vue 路径引入。这方便开发者对自定义组件进行统一管理和自动引入。

二、Pages 主包页面配置

"pages": [
    {
        "path": "pages/login/index",
        "style": {
            "navigationBarTitleText": "登录",
            "navigationStyle": "custom"
        }
    },
    {
        "path": "pages/index/index",
        "style": {
            "navigationBarTitleText": "首页",
            "navigationStyle": "custom"
        }
    },
    {
        "path": "pages/work/index",
        "style": {
            "navigationBarTitleText": "工作台",
            "navigationStyle": "custom"
        }
    },
    {
        "path": "pages/mine/index",
        "style": {
            "navigationBarTitleText": "我的",
            "navigationStyle": "custom"
        }
    }
]

pages 数组用于配置主包中的页面。每个页面对象包含 path 和 style 两个主要属性：

• path：指定页面的路径，UniApp 会根据该路径找到对应的页面文件。
• style：用于配置页面的样式，如 navigationBarTitleText 用于设置导航栏的标题文本，navigationStyle 设置为 custom 表示使用自定义导航栏。

三、SubPackages 分包配置

"subPackages": [
    {
        "root": "pagesNeed",
        "pages": [
            {
                "path": "need/index",
                "style": {
                    "navigationBarTitleText": "需求填报1",
                    "navigationStyle": "custom"
                }
            },
            {
                "path": "work/index",
                "style": {
                    "navigationBarTitleText": "需求填报2",
                    "navigationStyle": "custom"
                }
            },
            {
                "path": "media/index",
                "style": {
                    "navigationBarTitleText": "导出图片",
                    "navigationStyle": "custom"
                }
            }
        ]
    },
    {
        "root": "pagesMine",
        "pages": [
            {
                "path": "mine/profile",
                "style": {
                    "navigationBarTitleText": "个人资料",
                    "navigationStyle": "custom"
                }
            },
            {
                "path": "mine/pwd",
                "style": {
                    "navigationBarTitleText": "修改密码",
                    "navigationStyle": "custom"
                }
            }
        ]
    }
]

subPackages 用于配置分包。分包是 UniApp 为了优化应用体积和加载速度而提供的功能。每个分包对象包含 root 和 pages 两个属性：

• root：指定分包的根目录。
• pages：数组，包含该分包下的页面配置，与主包的页面配置类似。

分包资源规则

• 静态文件：分包下支持 static 等静态资源拷贝，即分包目录内放置的静态资源不会被打包到主包中，也不可在主包中使用。
• js 文件：当某个 js 仅被一个分包引用时，该 js 会被打包到该分包内，否则仍打到主包（即被主包引用，或被超过 1 个分包引用）。
• 自定义组件：若某个自定义组件仅被一个分包引用时，且未放入到分包内，编译时会输出提示信息。

四、PreloadRule 分包预加载配置

"preloadRule": {
    "pages/index/index": {
        "network": "all",
        "packages": ["pagesNeed", "pagesMine"]
    }
}

preloadRule 用于配置分包的预加载规则。在上述配置中，当用户访问 pages/index/index 页面时，会根据网络情况预加载 pagesNeed 和 pagesMine 两个分包。

• network：指定预加载的网络条件，all 表示在所有网络环境下都进行预加载。
• packages：指定要预加载的分包名称数组。

五、TabBar 配置

"tabBar": {
    "color": "#909399",
    "selectedColor": "#000000",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [
        {
            "pagePath": "pages/index/index",
            "iconPath": "static/images/tabbar/home.png",
            "selectedIconPath": "static/images/tabbar/home_art.png",
            "text": "首页"
        },
        {
            "pagePath": "pages/work/index",
            "iconPath": "static/images/tabbar/center.png",
            "selectedIconPath": "static/images/tabbar/center_art.png",
            "text": "工作台"
        },
        {
            "pagePath": "pages/mine/index",
            "iconPath": "static/images/tabbar/user.png",
            "selectedIconPath": "static/images/tabbar/user_art.png",
            "text": "我的"
        }
    ]
}

tabBar 用于配置应用底部的 TabBar 导航栏。主要属性如下：

• color：未选中状态下 TabBar 文字的颜色。
• selectedColor：选中状态下 TabBar 文字的颜色。
• borderStyle：TabBar 的边框样式。
• backgroundColor：TabBar 的背景颜色。
• list：数组，每个对象代表一个 TabBar 项，包含 pagePath（页面路径）、iconPath（未选中状态下的图标路径）、selectedIconPath（选中状态下的图标路径）和 text（显示的文字）。

六、GlobalStyle 全局样式配置

"globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "uni-app",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8",
    "app-plus": {
        "softinputMode": "adjustResize"
    },
    "rpxCalcMaxDeviceWidth": 0,
    "rpxCalcBaseDeviceWidth": 375,
    "rpxCalcIncludeWidth": 750
}

globalStyle 用于配置应用的全局样式：

• navigationBarTextStyle：导航栏文字的颜色。
• navigationBarTitleText：全局导航栏的标题文本。
• navigationBarBackgroundColor：导航栏的背景颜色。
• backgroundColor：应用的背景颜色。
• app-plus：针对 App 端的配置，softinputMode 设置为 adjustResize 表示当软键盘弹出时，调整页面布局。
• rpxCalcMaxDeviceWidth：rpx 计算所支持的最大设备宽度。
• rpxCalcBaseDeviceWidth：rpx 计算使用的基准设备宽度。
• rpxCalcIncludeWidth：rpx 计算特殊处理的值，始终按实际的设备宽度计算。

结语

pages.json 配置文件是 UniApp 开发中不可或缺的一部分，通过合理配置各个选项，能够实现应用的页面管理、分包优化、预加载策略、TabBar 导航和全局样式设置等功能。开发者需要深入理解每个配置项的含义和用法，根据项目需求进行灵活配置，以提高应用的性能和用户体验。希望本文能够帮助你更好地掌握 pages.json 的配置方法，在 UniApp 开发中更加得心应手。

到这里，这篇文章就和大家说再见啦！我的过往文章里还藏着许多干货，感兴趣的话也可以点击我的主页看看，下面的文章也很精彩，可别错过。创作这篇内容花费了不少心血，要是它帮你解决了问题，或者带来了启发，就多多支持下 “码上前端” 吧～要是想转载，麻烦一定注明本文链接，感谢大家！