既然在开发使用想必都已经对uni-app框架不是很陌生了，小编开发app已经有好几个，其中上架的也有。在每次打开自己开发的app中有可能会遇到已经登录用户 通过判断而出现的登录页再现 并且跳转的首页。针对此类问题优化，我们使用到的就是plus.navigator.closeSplashscreen();手动关闭启动页。
manifest.json的配置
/* 5+App特有相关 */
"splashscreen" : {
"alwaysShowBeforeRender" : false, //改为false
"waiting" : true,
"autoclose" : false, //改为false
"delay" : 0
}
"splashscreen" : {
"alwaysShowBeforeRender" : false, //改为false
"waiting" : true,
"autoclose" : false, //改为false
"delay" : 0
}
在这里实现登录我们使用的是vuex来实现当前登录态，当然持久的登录态我们还是采用的uni.setStorageSync() API.
在app.vue onLaunch中我们就要进行判断获取是否存在本地登录状态信息，存在即使用reLaunch跳转首页，在跳转成功回调中再手动关闭启动页，同理，未登录状态，在跳转登录页成功回调中手动关闭启动页，即可。
app.vue登录状态判断
//获取用户数据
if(uni.getStorageSync('q_tm_h5App_userInfo')!=''&&JSON.stringify(uni.getStorageSync('q_tm_h5App_userInfo')) != "{}"){
this.wg_appstystemLogin(uni.getStorageSync('q_tm_h5App_userInfo'));
uni.reLaunch({
url: './pages/q_tm_h5App_MenuHome/q_tm_h5App_MenuHome',
success: () => {
//#ifdef APP-PLUS
console.log('跳转首页，关闭启动页')
plus.navigator.closeSplashscreen();
//#endif
},
fail: () =>{
//#ifdef APP-PLUS
console.log('关闭启动页')
plus.navigator.closeSplashscreen();
//#endif
console.log('跳转失败')
}
})
}else{
console.log('未登录')
this.wg_appstystemLoginOut(); //定义在vuex的执行方法（退出登录即跳转登录页）
}
if(uni.getStorageSync('q_tm_h5App_userInfo')!=''&&JSON.stringify(uni.getStorageSync('q_tm_h5App_userInfo')) != "{}"){
this.wg_appstystemLogin(uni.getStorageSync('q_tm_h5App_userInfo'));
uni.reLaunch({
url: './pages/q_tm_h5App_MenuHome/q_tm_h5App_MenuHome',
success: () => {
//#ifdef APP-PLUS
console.log('跳转首页，关闭启动页')
plus.navigator.closeSplashscreen();
//#endif
},
fail: () =>{
//#ifdef APP-PLUS
console.log('关闭启动页')
plus.navigator.closeSplashscreen();
//#endif
console.log('跳转失败')
}
})
}else{
console.log('未登录')
this.wg_appstystemLoginOut(); //定义在vuex的执行方法（退出登录即跳转登录页）
}
vuex定义store文件mutations方法
wg_appstystemLoginOut(state) {
state.w_h5App_hasLogin = false;
state.w_h5App_userInfo = {};
uni.removeStorageSync('q_tm_h5App_userInfo');
console.log('去登陆')
uni.reLaunch({
url:'/pages/q_tm_h5App_userLogin/q_tm_h5App_userLogin',
success: () => {
//#ifdef APP-PLUS
plus.navigator.closeSplashscreen(); //关闭启动页
//#endif
},
fail: (err) => {
//#ifdef APP-PLUS
plus.navigator.closeSplashscreen();
//#endif
}
})
}
state.w_h5App_hasLogin = false;
state.w_h5App_userInfo = {};
uni.removeStorageSync('q_tm_h5App_userInfo');
console.log('去登陆')
uni.reLaunch({
url:'/pages/q_tm_h5App_userLogin/q_tm_h5App_userLogin',
success: () => {
//#ifdef APP-PLUS
plus.navigator.closeSplashscreen(); //关闭启动页
//#endif
},
fail: (err) => {
//#ifdef APP-PLUS
plus.navigator.closeSplashscreen();
//#endif
}
})
}
全部定义之后 ，在启动页关闭期间就不再出现，闪动或者已登陆用户再现登陆页造成的体验差问题。
注: 另外如果app主题背景色非白色，为避免页面切换出现白色闪动和关闭启动页跳转瞬间可能出现的闪动，那么你可以在vue中把最外层的body设置background-color把它自带的白色覆盖掉,以及在page.json =》 globalStyle把 “backgroundColor”: “自己的背景主题色”。
大佬，我照着做了，但是为什么我重新进入app还是先显示登录页面啊，要闪一下才能进入首页…
问题是否已解决？