【微信小程序开发】配置文件 - 全局配置 和 页面配置

目录

1. 配置文件介绍

2. 全局配置 - pages 配置

3. 全局配置 - window 配置

4. 全局配置 - tabbar 配置

5. 页面配置

6. 项目配置文件和配置sass

本章节对我有很大的收获， 希望对你也是！！！

本章节素材已上传到Gitee：

https://gitee.com/liu-yihao-hhh/WeChat-Mini-Program-Development/tree/master/01-mpbasehttps://gitee.com/liu-yihao-hhh/WeChat-Mini-Program-Development/tree/master/01-mpbase

1. 配置文件介绍

JSON 是一种轻量级的数据格式，常用于前后端数据的交互，但是在小程序中，JSON 扮演的配置项的角色，用于配置项目或者页面属性和行为，每个页面或组件也都有一个对应的 json 文件。小程序中常见的配置文件有以下几种：

1. app.json：小程序全局配置文件，用于配置小程序的一些全局属性和页面路由。
2. 页面.json：小程序页面配置文件，也称局部配置文件，用于配置当前页面的窗口样式、页面标题等
3. project.config.json：小程序项目的配置文件，用于保存项目的一些配置信息和开发者的个人设置
4. sitemap.json：配置小程序及其页面是否允许被微信索引，提高小程序在搜索引擎搜索到的概率

2. 全局配置 - pages 配置

pages 字段：用来指定小程序由哪些页面组成，用于让小程序知道由哪些页面组成以及页面定义在哪个目录，每一项都对应一个页面的路径信息。

在配置 pages 字段时，有以下注意事项：

1. 页面路由不需要写文件后缀，框架会自动去寻找对应位置的四个文件进行处理
2. 小程序中新增 / 减少页面，都需要对 pages 数组进行修改
3. 未指定 entryPagePath 时，数组的第一项代表小程序的初始页面（首页）

entryPagePath 是项目启动的首页第一个字段，若没有该字段，那么pages 数组的第一个就是首页

3. 全局配置 - window 配置

window 字段：用于设置小程序的状态栏、导航条、标题、窗口背景色。

小程序全局配置文档：https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#%E5%85%A8%E5%B1%80%E9%85%8D%E7%BD%AEhttps://developers.weixin.qq.com/miniprogram/dev/framework/config.html#%E5%85%A8%E5%B1%80%E9%85%8D%E7%BD%AEhttps://developers.weixin.qq.com/miniprogram/dev/framework/config.html#%E5%85%A8%E5%B1%80%E9%85%8D%E7%BD%AE

原始配置项先去掉！

​

"entryPagePath": "pages/index/index", "pages": [ "pages/index/index", "pages/list/list", "pages/profile/profile" ], "window": { "navigationBarTitleText": "慕尚花坊", "navigationBarBackgroundColor": "#f3514f", "enablePullDownRefresh": true, // 具有下拉刷新效果 "backgroundColor": "#bfbfbf", // 下拉背景色 "backgroundTextStyle": "dark" // 下拉刷新提示文字为深色样式 },

​

4. 全局配置 - tabbar 配置

tabBar 字段：定义小程序顶部、底部 tab 栏，用以实现页面之间的快速切换，可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

⚠️ 注意事项：tab 按数组的顺序排序，list 配置最少 2 个、最多 5 个 tab

​

{ "entryPagePath": "pages/index/index", "pages": [ "pages/index/index", "pages/cate/cate", "pages/cart/cart", "pages/profile/profile", "pages/list/list" ], "window": { "navigationBarTitleText": "慕尚花坊", "navigationBarBackgroundColor": "#f3514f", "enablePullDownRefresh": true, "backgroundColor": "#bfbfbf", "backgroundTextStyle": "dark" }, "tabBar": { "selectedColor": "#f3514f", "color": "#666", "borderStyle": "black", "list": [{ "pagePath": "pages/index/index", "text": "首页", "iconPath": "/assets/tabbar/index.png", "selectedIconPath": "/assets/tabbar/index-active.png" }, { "pagePath": "pages/cate/cate", "text": "分类", "iconPath": "/assets/tabbar/cate.png", "selectedIconPath": "/assets/tabbar/cate-active.png" }, { "pagePath": "pages/cart/cart", "text": "购物车", "iconPath": "/assets/tabbar/cart.png", "selectedIconPath": "/assets/tabbar/cart-active.png" }, { "pagePath": "pages/profile/profile", "text": "我的", "iconPath": "/assets/tabbar/profile.png", "selectedIconPath": "/assets/tabbar/profile-active.png" } ] }, "style": "v2", "sitemapLocation": "sitemap.json", "lazyCodeLoading": "requiredComponents" }

5. 页面配置

小程序的页面配置，也称局部配置，每一个小程序页面也可以使用自己的.json 文件来对本页面的窗口表现进行配置

需要注意的是：页面配置文件的属性和全局配置文件中的 window 属性几乎一致，只不过这里不需要额外指定 window 字段，因此如果出现相同的配置项，页面中配置项会覆盖全局配置文件中相同的配置项。

{ "usingComponents": {}, "navigationBarTitleText": "商品分类", "navigationBarBackgroundColor": "#00AF92", "enablePullDownRefresh": true, "backgroundTextStyle": "light" }

​

6. 项目配置文件和配置sass

在创建项目的时候，每个项目的根目录生成两个 config.json 文件，用于保存开发者在工具上做的个性化配置，例如和编译有关的配置。

当重新安装微信开发者工具或换电脑工作时，只要载入同一个项目的代码包，开发者工具就会自动恢复到当时开发项目时的个性化配置。

项目根目录中的 project.config.json 和 project.private.config.json 文件都可以对项目进行配置project.config.json：项目配置文件，常用来进行配置公共的配置

project.private.config.json：项目私有的配置，常用来配置个人的配置

⚠️ 注意事项：

1. project.private.config.json 写到.gitignore 避免版本管理的冲突。
2. 与最终编译结果有关的设置必须设置到 project.config.json 中

allow 就是运行所有页面被索引

disallow 只有部分页面被索引， 在page 中存在的页面被禁止索引

本章节对我有很大的收获， 希望对你也是！！！