实战项目名称：仿知识星球App
技术栈：前端 => uni-app （ 后端：Node.js + Mysql + Apollo + Graphql ）
已实现功能：微信登录，创建星球，内容管理，星球管理
项目git地址：请点击访问

项目最终效果图：@点击访问效果图，欢迎关注收藏订阅专栏！！！

• 文章会先按照 ① uni-app端 、 ② Node.js后端 、③ 微信小程序、④ 利用宝塔面板部署项目；先后顺序更新文章。

文章目录

• 一、今日实战目标
• 二、实战步骤
• • 1.存入相应图片文件
  • 2. 配置page.json
• 总结

提示：该项目只用于个人实战，不应用于任何商业用途。

一、今日实战目标

• 配置tabBar

二、实战步骤

1.存入相应图片文件

• 每个tabBar都应该有两张图片，分为选中和未选中,uniapp也可以自定义tabBar，在这个项目中我们就不进行自定义，之后会专门写一篇文章关于如何自定义tabBar的。
  

2. 配置page.json

代码如下（示例）：

{"pages": [{"path": "pages/index/index","style": {"navigationStyle": "custom"}}, {"path": "pages/user/user","style": {"navigationBarTitleText": "","enablePullDownRefresh": false,"navigationStyle": "custom"}}, {"path": "pages/discover/discover","style": {"navigationBarTitleText": "发现","enablePullDownRefresh": true,"navigationStyle": "custom"}}],"tabBar": {// "blurEffect": "extralight", tabBar毛玻璃效果"color": "#6c6c6c",  // 未选中字体颜色"selectedColor": "#17B99A",  // 被选中字体颜色"borderStyle": "white",   "backgroundColor": "white",   "list": [{"pagePath": "pages/index/index","iconPath": "./static/tabbar/index.png", // 未选中显示的图像"selectedIconPath": "./static/tabbar/index-  select.png",   // 选中显示的图像"text": "星球"}, {"pagePath": "pages/discover/discover","iconPath": "./static/tabbar/discover.png","selectedIconPath": "./static/tabbar/discover-select.png","text": "发现"}, {"pagePath": "pages/user/user","iconPath": "./static/tabbar/user.png","selectedIconPath": "./static/tabbar/user-select.png","text": "我"}]},"globalStyle": {"navigationBarTextStyle": "black","navigationBarTitleText": "uni-app","navigationBarBackgroundColor": "#FFFFFF","backgroundColor": "#FFFFFF",// 输入框聚焦页面内容不往上顶"app-plus": {"background": "#FFFFFF","softinputMode": "adjustResize"}}
}

总结

配置了tabBar，接下来我们就可以开始页面的开发，我会先按登录页、首页、发现页、个人中心的顺序进行更新

由于项目目前在对接后台api中，项目git地址：请点击访问，大家可以去clone下来借鉴下；

• 温馨提示：

1. 项目仅用于个人实战，设计图和架构是自己基于知识星球APP进行设计的，算得上是入门级的uni-app，后期会更新一个企业级uniapp项目。
2. 我是在空闲中写写博客，并没有很规范，欢迎在评论区留下你的建议与意见。
3. git项目拷贝下来的代码有不懂的，可以截图私信给我，看到会回复你，希望可以帮助到你了解和开发uniapp。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！