效果图如下

整体思路

准备三个组件分别为login(登录页) 和 home 、mine是tabBar里面的两个页面，

点击login页按钮跳转到tabbar页面

技术关键点

1. uniapp的路由在page,json的配置方式

在官网tabBar是有tabbar的配置的，重点是如何融入进page.json

（1）tabbar的基本配置

"tabBar": {
		"color": "#7A7E83",
		"selectedColor": "#3cc51f",
		"borderStyle": "black",
		"backgroundColor": "#000",
		"list": [
			{
				"pagePath": "pages/component/home",
				"iconPath": "static/logo.png",
				"selectedIconPath": "static/icon2.jpg",
				"text": "home"
			},
			{
				"pagePath": "pages/component/mine",
				"iconPath": "static/logo.png",
				"selectedIconPath": "static/icon2.jpg",
				"text": "mine"
			}
		]
	},

（2）注意要将这两个组件，同时还要添加到pages数组里（感觉uniapp这样写写两遍很别扭）

"pages": [ 
		...//上面省略了登陆页的配置
		{
			"path": "pages/component/home",
			"style": {
				"navigationBarTitleText": "首页",
				"enablePullDownRefresh": false
			}
		},
		{
			"path": "pages/component/mine",
			"style": {
				"navigationBarTitleText": "我的",
				"enablePullDownRefresh": false
			}
		}
	],

2. 跳转时的方法 和 路径要加 / (斜杠)

uni.switchTab({ url: '/pages/component/home' });

下面的详细代码就不粘贴，下一篇是 uniapp顶部导航栏的实现