一、问题

我们经常有个需求,就是一款app,当用户已经登录了那么打开app进入的是首页,当用户没有登录过那么打开app进入的是登录页。

在uniapp中我看见很多人回复都是用应用的生命周期onLaunch上面做判断来进行页面跳转,但是小编试过这个方法,会出现先跳转app设置的第一个页面然后再跳转指定页面,这样用户体验不好。

所以小编就想到使用html5 + 功能模块 navigator来解决方案

二、解决方案

首先把app下的manifest.json配置文件更改启动界面为不关闭,在我们需要关闭的时候再关闭
在这里插入图片描述
部分配置内容

/* 5+App特有相关 */
    "app-plus" : {
        "splashscreen" : {
            "alwaysShowBeforeRender" : false,
            "waiting" : true,
            "autoclose" : false,
            "delay" : 0
        }
     }

然后在app.vue文件下

首先在onLaunch生命周期判断是否已经存在登录信息,存在则关闭启动页进入首页index,不存在则跳转登录页login在成功跳转的回调里面关闭启动页

onLaunch: ()=> {
	// #ifdef APP-PLUS  
	let userinfo = uni.getStorageSync('userinfo');
	//判断是否存在登录信息
	if(!userinfo.role){
		//不存在则跳转登录页
		uni.reLaunch({
			url:"/pages/login/login",
			success:()=>{
				//跳转完页面后再关闭启动页
				plus.navigator.closeSplashscreen();
			}
		})
	}else{
		//存在则关闭启动页进入首页
	     plus.navigator.closeSplashscreen();
	}
	// #endif
},

这样就可以指定app打开的第一个页面啦

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐