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

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

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

---

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

一、今日实战目标

• 配置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"
		}
	}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

---

总结

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

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

• 温馨提示：

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