Uni-app极速入门(二) - 登录demo

需求

背景

1、进入小程序，默认页面判断用户是否已经登录，已经登录则进入首页，没有登录则进入登录页面
2、首页为tabbar，包括首页和设置页，设置页可以退出登录，回到登录页面

页面流转

graph TD A[Index Page] --> C{isLogin} C -->|true| D[HomePage] C -->|false| E[LoginPage] D --> |logout| A E --> |login| D

技术实现

Vue页面

目录结构

页面截图

登录页

设置页

路由配置

pages.json

{
	"pages": [ 
		//pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationStyle":"custom",
                "enablePullDownRefresh": false
			}
		}
	    ,{
            "path" : "pages/main/HomePage",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
        ,{
            "path" : "pages/setting/Setting/Setting",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
        ,{
            "path" : "pages/login/Login/Login",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false,
				"navigationStyle":"custom" // 隐藏导航栏，防止出现回退按钮和首页按钮
            }
            
        }
    ],
	"tabBar": {
		"list": [{
			"pagePath":"pages/main/HomePage",
			"text":"首页"
		}, {
			"pagePath":"pages/setting/Setting/Setting",
			"text":"设置页"
		}]
	},
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	}
}

关键代码

index.vue

判断是否已经登录:

<script>
	export default {
		data() {
			return {

			}
		},
		onLoad: function(param) {
			console.log(param.isLogin)
			// 判断用户是否已经登录成功,isLogin参数由其他的页面传入
			if (param.isLogin) {
				uni.switchTab({
					url: '/pages/main/HomePage' //url前面需要加/，否则不会跳转
				})
			} else {
				console.log('进入登录页')
				uni.reLaunch({
					url: '../login/Login/Login'
				})
			}

		},
		methods: {}
	};
</script>

Login.vue

提交以后，重新进入启动页，并传入已经登录成功的参数

    onSubmit() {
	  uni.reLaunch({
	  	url:'../../index/index?isLogin=true' // 提交后，isLogin为true
	  })
    }

Home.vue

空页面，代码略

Setting.vue

退出登录

    logout() {
        uni.reLaunch({
            url:'../../index/index'
        })
    }

方法说明

uni.reLaunch: 关闭所有页面，打开到应用内的某个页面

uni.switchTab: 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面