uni-app启动出现闪动、登录页再现以及页面切换闪动问题解决

Webmaster · 浏览 2522 · 点赞 50 · 评论 4 · 2年前 (2020-07-31)

既然在开发使用想必都已经对uni-app框架不是很陌生了，小编开发app已经有好几个，其中上架的也有。在每次打开自己开发的app中有可能会遇到已经登录用户通过判断而出现的登录页再现并且跳转的首页。针对此类问题优化，我们使用到的就是plus.navigator.closeSplashscreen();手动关闭启动页。

manifest.json的配置

/* 5+App特有相关 */
"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的执行方法（退出登录即跳转登录页）
}

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
}
})
}

全部定义之后，在启动页关闭期间就不再出现，闪动或者已登陆用户再现登陆页造成的体验差问题。

注: 另外如果app主题背景色非白色，为避免页面切换出现白色闪动和关闭启动页跳转瞬间可能出现的闪动，那么你可以在vue中把最外层的body设置background-color把它自带的白色覆盖掉,以及在page.json =》 globalStyle把 “backgroundColor”: “自己的背景主题色”。