解决uniapp首页闪烁问题

问题

大部分需要登录的程序在进入时都会先判断用户是否登录，再决定跳转登录页还是首页。uniapp将pages.json中第一项作为项目首页，这也导致了如果登录页作为第一页，用户已登录时就会先显示登录页然后很快跳转到首页，出现页面“闪烁”现象

APP端解决方案

在APP端提供了启动界面配置，可以将Splash图设置为手动关闭，完成鉴权判断并跳转到正确页面后再关闭Splash图

打开manifest.json源码视图，添加以下代码：

{
  ...
  "app-plus": {
    "splashscreen": {
      // 是否等待首页渲染完毕后再关闭启动界面
      "alwaysShowBeforeRender" : false,
      // 是否在启动界面显示等待雪花
      "waiting" : true,
      // 是否自动关闭启动界面，仅当alwaysShowBeforeRender设置为false时生效，如果需要手动关闭启动界面，需将 alwaysShowBeforeRender 及 autoclose 均设置为 false。
      "autoclose" : false,
      "delay" : 0
    },
    ...
  },
  ...
}

在App.vue中增加逻辑：

onLaunch(){
  const token = xxxx
  if(token){
    uni.reLaunch({
      url: 'home',
      success: plus.navigator.closeSplashscreen
    })
  } else {
    // 假设pages.json第一项设置为登录页，直接关闭启动图
    plus.navigator.closeSplashscreen()
  }
}

小程序端解决方案

小程序未提供启动图的配置方式，但可以借用APP端思路，使用空白页模拟启动图的解决方案

添加空白页并设为pages.json第一项，空白页中可以设置加载动画等，鉴权后再跳转到正确页面