pages.json 和 manifest.json 有什么作用?uni-app 核心配置文件详解

在使用 uni-app 开发项目时,我们会经常接触到两个最核心、最不能缺少 的 JSON 配置文件:pages.json 和 manifest.json。

很多新手会疑惑:这两个文件到底是干嘛的?能不能删?有什么区别?

这篇博客就用清晰、通俗、实战化的方式,带你彻底搞懂 pages.json 和 manifest.json 的作用、区别、使用场景,让你在开发 uni-app 时不再迷茫。

一、先一句话分清两者

  • pages.json :管页面 和全局样式、导航栏、tabBar等界面展示配置。
  • manifest.json :管项目本身,包括应用名称、图标、权限、各端发布配置。

一个管界面与页面 ,一个管项目与发布,分工非常明确。


二、pages.json 作用详解

1. 核心定位

pages.json 是 uni-app 的页面配置文件,用来告诉框架:

  • 项目有哪些页面
  • 页面的路径是什么
  • 页面的标题、导航栏样式
  • 底部 tabBar 菜单
  • 全局下拉刷新、窗口样式等

它相当于小程序的 app.json,是 uni-app 启动时必须读取的文件。

2. 主要功能

  1. 注册页面

json

复制代码
"pages": [
  { "path": "pages/index/index", "style": { "navigationBarTitleText": "首页" } },
  { "path": "pages/user/user", "style": { "navigationBarTitleText": "我的" } }
]
  • 必须在这里注册,页面才能被访问
  • 第一项默认为首页
  1. **全局样式配置(globalStyle)**统一设置导航栏颜色、文字颜色、背景色等。

  2. 底部 tabBar 配置配置 App 最常见的底部菜单。

  3. 条件编译、启动页、分包加载优化小程序和 App 性能。

3. 一句话总结

pages.json = 页面列表 + 界面样式 + 导航配置


三、manifest.json 作用详解

1. 核心定位

manifest.json 是 uni-app 的项目配置文件,用来描述整个应用的 "身份信息" 和 "运行环境"。

它决定了你的项目打包后变成什么 、叫什么名字 、拥有什么权限。

2. 主要功能

  1. 应用基础信息应用名称、版本号、入口页面、描述。

  2. 各端专属配置

  • App 端:图标、启动页、权限、安卓 /iOS 配置
  • 小程序端:appid、小程序基础库版本
  • H5 端:网站标题、运行路径、打包配置
  1. 权限管理如摄像头、定位、相册、网络、推送等权限。

  2. 发布与打包控制控制打包后的应用行为、模块引用、是否开启原生渲染。

示例结构:

json

复制代码
{
  "name": "我的应用",
  "appid": "__UNI__XXXXXXX",
  "versionName": "1.0.0",
  "app-plus": { "modules": {}, "distribute": { "icons": {} } },
  "mp-weixin": { "appid": "wxXXXXXXX" },
  "h5": { "title": "我的H5网站" }
}

3. 一句话总结

manifest.json = 应用身份信息 + 各端打包配置 + 权限管理


四、pages.json 和 manifest.json 核心区别(表格速记)

表格

对比项 pages.json manifest.json
作用 管理页面、导航、tabBar、界面样式 管理应用信息、打包、权限、各端配置
关注点 页面结构 + UI 样式 项目本身 + 发布环境
运行时影响 决定页面能否打开、样式是否正确 决定应用能否正常打包、运行、授权
修改后效果 立即生效 通常需要重新编译 / 运行
类比 相当于 "目录、导航、菜单" 相当于 "身份证、户口本、打包说明书"
是否必须 必须,无则无法启动 必须,无则无法打包发布

五、最容易混淆的 3 个问题

1. 我想修改应用名称,改哪个?

→ manifest.json

2. 我想新增页面、配置导航栏,改哪个?

→ pages.json

3. 我想配置小程序 appid,改哪个?

→ manifest.json


六、实战记忆口诀

plaintext

复制代码
页面路由找 pages,
导航 tab 它都管;
应用身份看 manifest,
打包权限全靠它。

七、总结

  • pages.json :负责页面和界面,控制你 "能看到什么"。
  • manifest.json :负责项目和发布,控制应用 "是什么、能做什么、能打包成什么"。

两者都是 uni-app 的核心基础配置,缺一不可,理解它们能让你更快掌握 uni-app 开发逻辑。


总结

  1. pages.json :管理页面路径、导航栏、tabBar、全局样式,控制界面展示。
  2. manifest.json :管理应用名称、版本、图标、权限、各端打包配置,控制项目本身。
  3. 两者分工明确,是 uni-app 项目必须存在、不可删除的核心配置文件。
相关推荐
冒险的豆子5 分钟前
Proxy & Vue 响应式(合并精简版,适合面试)
前端·javascript·vue.js
Java后端的Ai之路30 分钟前
前端技术Vue-18-视图中的渲染
前端·javascript·vue.js
程序员海军7 小时前
用了两年多 GPT,我最近开始换模型了,还折腾了个求职避坑 Agent
前端·人工智能·后端
zttbee7 小时前
echarts图表tooltip色块失效
前端·javascript·echarts
excel9 小时前
IndexNow:让搜索引擎更快发现网站更新的主动通知协议
前端·后端·架构
子兮曰9 小时前
CSS 复现 23 种设计风格:从拟物到液态玻璃的成本阶梯与兜底写法【实战】
前端·css·视觉设计
虚无境9 小时前
如何用AI帮我写出实用的插件
前端·javascript·ai编程
柳杉10 小时前
从数字化到数智化:3D 可视化大屏的下一个五年
前端·ai编程·数据可视化
风骏时光牛马11 小时前
从零到实战:AI全栈学习进阶路线
前端
FRing0311 小时前
JavaScript入门到精通二十六(变量提升、函数剩余参数、展开运算符、ES6箭头函数)
开发语言·前端·javascript·es6·箭头函数