BearDiary的app.json配置指南：微信小程序tabBar与导航栏自定义的关键

BearDiary的app.json配置指南微信小程序tabBar与导航栏自定义的关键【免费下载链接】BearDiary微信小程序之小熊の日记项目地址: https://gitcode.com/gh_mirrors/be/BearDiaryBearDiary 是一款主打个人/家庭日常记录的微信小程序小熊の日记它的 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.jsmine个人中心 新建日记入口tabBar 页pages/mine/mine.jsnew写日记文本/图片/视频混排pages/new/new.jsentry日记详情与图片预览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 之外的补充玩法除了全局原生 tabBarBearDiary 的 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），仅供参考