BearDiary的app.json配置指南：微信小程序tabBar与导航栏自定义的关键
【免费下载链接】BearDiary微信小程序之小熊の日记项目地址: https://gitcode.com/gh_mirrors/be/BearDiary
BearDiary 是一款主打个人/家庭日常记录的微信小程序（小熊の日记），它的 app.json 只用了短短 36 行，就把tabBar 底部标签栏、导航栏配色、页面注册三大核心配置讲得明明白白。对新手来说，读懂这份配置文件，就掌握了微信小程序「导航栏自定义」和「tabBar 配置」的关键，是学习小程序开发的最佳入门样板。
从 pages 配置看懂小程序页面注册与首页设置
打开 app.json，第一段就是页面清单：
"pages": [ "pages/list/list", "pages/mine/mine", "pages/new/new", "pages/entry/entry" ]这里有两个新手必须知道的规则：
- 第一个页面就是小程序首页。BearDiary 把
pages/list/list（日记聚合页）放在第一位，用户打开小程序第一眼看到的就是「印记」列表。 - 所有页面都必须在这里注册，否则
wx.navigateTo跳转过去会直接报错。
对照项目结构，四个页面各司其职：
| 页面 | 职责 | 对应代码 |
|---|---|---|
| list | 日记聚合列表（tabBar 页） | pages/list/list.js |
| mine | 个人中心 + 新建日记入口（tabBar 页） | pages/mine/mine.js |
| new | 写日记，文本/图片/视频混排 | pages/new/new.js |
| entry | 日记详情与图片预览 | pages/entry/entry.js |
📌 注意：pages里路径不带扩展名，这是小程序的固定写法。
window 配置：一行代码完成小程序导航栏自定义
window字段控制所有页面的全局窗口外观，BearDiary 的配置是：
"window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#39b5de", "navigationBarTitleText": "小熊の日记", "navigationBarTextStyle": "white", "backgroundColor": "#eceff4" }五个字段，逐个拆解：
- navigationBarBackgroundColor：导航栏背景色，这里用天蓝色
#39b5de，奠定整个小程序的视觉主色。 - navigationBarTitleText：导航栏标题，全局默认显示「小熊の日记」。
- navigationBarTextStyle：标题文字颜色，
white保证白字在蓝底上清晰可读（只能取white或black）。 - backgroundColor：下拉刷新等场景的页面底色
#eceff4。 - backgroundTextStyle：下拉指示的样式，
light表示浅色指示器。
💡 小技巧：背景色、tabBar 选中色都用了同一个#39b5de，保持色彩统一是小程序 UI 显「高级」的最低成本做法。
tabBar 配置：打造微信小程序底部标签栏
BearDiary 的 tabBar 是标准的「双 Tab」布局——印记与我的：
"tabBar": { "color": "#858585", "selectedColor": "#39b5de", "backgroundColor": "#ffffff", "borderStyle": "black", "list": [ { "pagePath": "pages/list/list", "iconPath": "images/icons/mark.png", "selectedIconPath": "images/icons/markHL.png", "text": "印记" }, { "pagePath": "pages/mine/mine", "iconPath": "images/icons/mine.png", "selectedIconPath": "images/icons/mineHL.png", "text": "我的" } ] }tabBar 关键属性速查
- color：未选中 Tab 的图标/文字色（灰色
#858585）。 - selectedColor：选中 Tab 的颜色，与导航栏同色形成呼应。
- backgroundColor / borderStyle：标签栏底色为白，顶部描黑边，与内容区分层。
- list 中的 pagePath：必须是
pages里已注册的页面路径。 - iconPath / selectedIconPath：普通态与选中态各配一张图标（markHL 即 mark 的高亮版），图标不显示文字时依然能辨认，体验更好。
⚠️ tabBar 硬性规则：list至少 2 项、最多 5 项；pagePath写错或页面未注册，整个小程序会编译失败——这是新手最常踩的坑。
原生 tabBar 之外的补充玩法
除了全局原生 tabBar，BearDiary 的 pages/mine/mine.js 还手写了一组页面内自定义 Tab（日记 / 收藏 / 喜欢 / 更多），通过setData切换currentTab高亮实现。对比两种方案你会发现：
- 需要页面级切换→ 用 app.json 的 tabBar；
- 只是同一页内切数据→ 用自定义 Tab 组件，更灵活。
动态修改导航栏标题
全局标题只是默认值。进入写日记页面时，BearDiary 在 pages/new/new.js 的onReady中调用：
wx.setNavigationBarTitle({ title: '编辑日记' });一行 API 就把导航栏标题动态改为「编辑日记」。这演示了导航栏自定义的完整闭环：app.json 定全局默认 → wx.setNavigationBarTitle 改单页标题。
app.json 配置常见坑与检查清单
最后给新手一份自查清单，逐项对照 app.json 验证你的项目：
- 首页页面是否放在
pages数组第一位？ - tabBar 的
pagePath是否全部出现在pages中？ - 图标文件路径是否正确，选中/未选中两张是否都配置了？
- 导航栏文字颜色与背景色是否对比明显？
- 开发期
"debug": true是否保留？（BearDiary 开启了 debug 方便查看日志，正式上线前建议移除）
配置完成后，用微信开发者工具编译，底部应该出现蓝色高亮的「印记 / 我的」双 Tab，顶部是蓝底白字的「小熊の日记」标题——这正是 BearDiary 的运行效果。掌握这份 36 行的 app.json，你就已经跨过了微信小程序「导航栏 + tabBar 自定义」的第一道门槛。
【免费下载链接】BearDiary微信小程序之小熊の日记项目地址: https://gitcode.com/gh_mirrors/be/BearDiary
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
