前言
在上一篇文章中，我们完成了项目的初始化工作，搭建了清晰的模块化目录结构。今天，我们将深入小程序的全局配置，重点讲解入口文件 app.js、全局配置文件 app.json，以及底部导航栏 tabBar 的实现。这些配置共同构成了小程序的"骨架"，它们决定了应用的整体行为模式和用户体验的基础框架。一个稳固且合理的全局配置，将为后续的页面开发和功能迭代提供坚实的支撑。
一、app.json：小程序的全局蓝图
app.json 是微信小程序的核心配置文件，它承载着页面路由注册、窗口视觉表现、底部导航栏设定以及网络超时时间等关键配置项。任何一个小程序项目的根目录下都必须包含这个文件，它是小程序启动时最先被解析的配置文件之一。
1.1 pages 数组：页面路由的注册中心
pages 数组是小程序所有页面的集中注册列表。当微信小程序启动时，框架会读取这个数组，并根据配置的路径依次加载对应的页面文件。需要特别注意的是，数组中的第一个路径会被自动识别为小程序的默认首页，因此页面顺序的安排直接决定了用户进入应用后的初始界面。
核心知识点：所有需要通过 wx.navigateTo、wx.redirectTo 或 wx.switchTab 等 API 进行跳转的页面，都必须提前在 pages 数组中完成注册。如果某个页面路径未在此数组中声明，框架将无法找到对应的页面文件，导致路由跳转失败。
json
{
"pages": [
"pages/kitchen/kitchen",
"pages/square/square",
"pages/login/login",
"pages/mine/mine",
"pages/recipy-detail/recipy-detail",
"pages/recipy-edit/recipy-edit",
"pages/cook/cook",
"pages/teach/teach"
]
}在本项目中，我将 kitchen（厨房）页面设置为首页，用户启动应用后会直接进入菜谱展示界面。square（广场）和 mine（我的）页面作为 tabBar 页面存在，而 recipy-detail（菜谱详情）、teach（教学演示）等则作为二级跳转页面，通过用户交互触发导航。
1.2 window 配置：全局窗口的视觉表现
window 配置项用于统一管理小程序的状态栏、导航条、标题文字、窗口背景色等视觉元素。这些设置默认作用于所有页面，但如果某个页面需要独立的外观表现，可以在该页面的同名 json 文件中进行覆盖配置。
核心知识点：window 配置定义了应用的整体视觉基调，导航栏的颜色搭配和文字样式应当与产品设计保持高度一致，避免给用户造成风格割裂的不良体验。
json
{
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTitleText": "菜谱",
"navigationBarTextStyle": "black"
}
}在上述配置中，我将导航栏背景设置为白色，标题文字颜色设为黑色，这是一种简洁通用的设计思路。白色背景不会与后续页面中出现的各类图片和内容产生视觉冲突，而黑色的标题文字保证了足够的可读性。navigationBarTitleText 被设置为"菜谱"，作为应用的通用标题，在具体页面中可以通过调用 wx.setNavigationBarTitle 方法进行动态修改。
1.3 其他核心配置项
除了 pages 和 window，app.json 中还包含一些容易被忽略但影响深远的配置项。
核心知识点：style 配置项决定了小程序使用的基础组件样式版本，"v2" 版本提供了更丰富的组件类型和更现代化的样式表现能力，推荐所有新项目使用。sitemapLocation 则关系到小程序及其页面能否被微信搜索引擎索引，对后续的搜索曝光有直接影响。
json
{
"style": "v2",
"sitemapLocation": "sitemap.json"
}这两个配置项虽然看似不起眼，但它们分别影响着组件的渲染表现和搜索可见性，属于基础但关键的优化配置。
二、tabBar 实现：底部导航栏的搭建
tabBar 是微信小程序提供的原生底部导航栏组件，用户可以通过点击不同的 tab 图标在主要页面之间快速切换。作为应用中最核心的用户交互入口之一，tabBar 的设计和实现需要兼顾视觉美感和操作便捷性。
在iconfont网站里可以找到海量的图标资源
2.1 tabBar 配置详解
tabBar 配置项通过一个 JSON 对象定义了底部导航栏的完整表现，包括默认颜色、选中颜色、文字标签以及每个 tab 对应的页面路径。
核心知识点：list 数组中的 pagePath 字段所指向的页面路径，必须已经在 pages 数组中完成注册，否则 tabBar 将无法正常渲染和跳转。同时，list 数组的顺序决定了 tab 图标从左到右的显示顺序。
json
{
"tabBar": {
"color": "#999999",
"selectedColor": "#333333",
"list": [
{
"pagePath": "pages/kitchen/kitchen",
"text": "厨房",
"iconPath": "images/tab/kitchen.png",
"selectedIconPath": "images/tab/kitchen-active.png"
},
{
"pagePath": "pages/square/square",
"text": "广场",
"iconPath": "images/tab/square.png",
"selectedIconPath": "images/tab/square-active.png"
},
{
"pagePath": "pages/mine/mine",
"text": "我的",
"iconPath": "images/tab/mine.png",
"selectedIconPath": "images/tab/mine-active.png"
}
]
}
}配置项详解：
color：tab 文字在未选中状态下的默认颜色，设置为 #999999（灰色），符合非活跃元素的视觉规范。
selectedColor：tab 文字在选中状态下的高亮颜色，设置为 #333333（深灰色），提供清晰的选中反馈。
list：包含三个 tab 对象的数组，每个对象必须包含以下字段：
pagePath：页面的相对路径，必须是 pages 数组中已注册的路径。
text：显示在 tab 图标下方的文字标签。
iconPath：未选中状态下的图标资源路径。
selectedIconPath：选中状态下的图标资源路径。
2.2 tabBar 图标设计与资源管理
tabBar 图标是影响用户体验的关键视觉元素。在项目实践中，我将所有 tab 相关的图标资源统一存放在 images/tab/ 目录下，并严格按照普通态和选中态两种状态分别命名。
核心知识点：为了保证在不同屏幕密度的设备上都能获得清晰的显示效果，tabBar 图标建议设计为 81px 乘以 81px 的两倍图尺寸，图片格式推荐使用 PNG 且背景必须为透明。图标风格应当保持统一，与整个应用的视觉调性协调一致。
从项目资源目录可以看到，我为每个 tab 页面都准备了两张状态图片：
kitchen.png 和 kitchen-active.png：厨房页面的默认态与选中态图标。
square.png 和 square-active.png：广场页面的默认态与选中态图标。
mine.png 和 mine-active.png：个人中心页面的默认态与选中态图标。
这种分类存放、统一命名的资源管理方式，使得图标维护变得非常便捷。如果后续需要更换主题色或替换整套图标，只需要将对应目录下的图片文件进行替换即可，完全不需要修改任何配置代码。
三、app.js：小程序的入口脚本
app.js 是小程序的入口脚本文件，它通过调用 App() 函数来完成小程序实例的注册，同时可以声明小程序级别的生命周期回调函数和全局共享方法。
3.1 小程序生命周期与初始化
在 App() 函数中，我们可以定义多个生命周期回调，其中 onLaunch 是小程序初始化完成时触发的函数，并且在整个小程序运行期间全局只执行一次。这个特性使其成为执行一次性初始化逻辑的理想场所。
核心知识点：onLaunch 是小程序启动后第一个执行的业务逻辑入口，适合进行云开发环境初始化、全局登录状态检查、系统信息获取等操作。
javascript
App({
onLaunch() {
if (!wx.cloud) {
console.error('请使用 2.2.3 或以上的基础库以使用云能力')
} else {
wx.cloud.init({
env: 'cloud1-d3g0kjznk9caea1e8',
traceUser: true
})
}
}
})这段初始化代码完成以下工作：
首先判断当前小程序运行的基础库版本是否支持云开发能力。
如果支持，则调用 wx.cloud.init 方法初始化云开发环境，env 参数指定了在微信公众平台创建的云环境 ID。
traceUser 参数设置为 true，表示开启用户访问记录追踪，便于后续在云开发控制台中查看用户行为数据。
3.2 全局状态与数据管理
虽然 app.js 中可以通过定义 globalData 对象来存储全局共享数据，但在项目初期阶段，我倾向于保持 app.js 文件的简洁性。对于用户信息、登录状态等复杂的全局状态管理需求，我计划将其封装在 utils/auth.js 等独立的工具模块中，通过模块化导出的方式在各个页面中按需引入和使用。
核心知识点：将全局状态管理逻辑从 app.js 中抽离到独立工具模块，能够有效避免入口文件的过度膨胀，同时提升代码的可维护性和可测试性。
javascript
App({
globalData: {
userInfo: null,
isLogin: false,
systemInfo: null
},
onLaunch() {
// 获取系统信息并存储到全局数据中
this.globalData.systemInfo = wx.getSystemInfoSync()
// 后续可在此处添加登录状态检查等初始化逻辑
}
})上述代码展示了 globalData 的典型用法，将系统信息在启动阶段获取并缓存，避免在多个页面中重复调用 wx.getSystemInfoSync 方法。这种集中获取、全局共享的模式，是全局状态管理的基础实践方式。
四、project.config.json：项目配置文件
project.config.json 是存储在项目根目录下的工具配置文件，它记录了微信开发者工具对该项目的各项配置信息，包括项目名称、AppID、编译设置、上传时的代码压缩选项等。
核心知识点：该文件由开发者工具自动生成和维护，一般情况下不需要手动编辑。但了解其中的关键配置项，有助于在遇到编译或上传问题时进行针对性的排查。
json
{
"setting": {
"es6": true,
"postcss": true,
"minified": true,
"enhance": true
},
"compileType": "miniprogram",
"appid": "wx962c43d4938733c0",
"cloudfunctionRoot": "cloudfunctions/"
}配置项解析：
setting：编译相关的设置集合。
es6：是否启用 ES6 语法转 ES5，建议开启以保证低版本兼容。
postcss：是否启用 PostCSS 处理，可使样式兼容性更好。
minified：上传时是否压缩代码，建议开启以减小包体积。
enhance：是否启用增强编译，可提升开发体验。
appid：小程序在微信公众平台申请的唯一标识，每个项目对应一个固定的 AppID。
cloudfunctionRoot：指定云函数代码的存放根目录，此处设置为 cloudfunctions/。
五、今日总结与后续预告
在 Day2 的开发日志中，我们系统性地完成了小程序的全局配置工作，涵盖了 app.json、tabBar、app.js 和 project.config.json 四个核心配置文件。这些配置共同构建了应用的基础框架，决定了小程序的页面结构、视觉风格和初始行为。
核心要点回顾：
app.json 作为全局蓝图，通过 pages 数组注册所有页面路由，通过 window 配置统一定义视觉表现，通过 tabBar 配置搭建底部导航体系。
tabBar 是用户最频繁使用的导航入口，配置时需要确保 pagePath 已正确注册，图标资源尺寸合规且风格统一。
app.js 通过 App() 函数注册小程序实例，onLaunch 生命周期是执行一次性初始化逻辑的最佳位置。
project.config.json 记录了开发者工具的各项配置，了解其内容有助于更好地管理和维护项目。
完成了项目骨架的搭建和全局配置，我们的应用已经具备了基本的页面路由能力和导航框架。从 Day3 开始，我们将正式进入页面开发阶段，重点实现 kitchen（厨房）首页的菜谱列表渲染、下拉刷新和上拉加载功能，让应用真正动起来。
想要解锁更多微信小程序模块化实战、前后端联调排错、项目工程化规范干货以及新手开发避坑指南吗？持续关注本系列文章，后续将陆续更新组件封装技巧、AI 菜谱智能解析、步骤动画联动实现等硬核内容，带你从新手快速进阶，轻松搞定小程序全栈开发。
想要解锁更多小程序组件化封装、JSON 结构化菜谱解析、Lottie/GIF 动画适配、全栈项目落地实战干货、零基础入门避坑教程吗？
持续关注，后续将更新云端部署、跨端适配、样式统一美化、历史菜谱收藏功能等硬核内容，手把手带你吃透小程序全栈开发流程！