# 启动时的生命周期 v 1.4.8+

截止之前的版本，在 app 端都无法做到拦截首屏加载的问题。v1.4.8 发布后将会拦截首屏处理，并自动注册首屏页面触发生命周期。首次打开app则会触发，你可以在里面做什么想完成的操作。启动页不支持nvue，以此则会出现白屏现象。永远进不去APP。

# 等待页加载动画

v1.4.8 起路由提供了一个全局app启动生命周期，loddingPageHook。它保证了在app启动时你可以做一些操作！loddingPageStyle 重置等待页样式。

const router = new Router({
    APP:{
        //设置等待页面背景色
        loddingPageStyle:()=>JSON.parse('{"backgroundColor":"#96DBF3"}'),   
        //通过启动页生命钩子绘制加载gif
        loddingPageHook:(view)=>{  
            view.show();
            view.drawBitmap('/static/wait.gif', {}, {
                top: 'auto',
                left: 'auto',
                width: '200px',
                height: '200px'
            })
        }
    }, 
    routes:[
        // ....
    ]
});

通过 loddingPageStyle 函数重置掉等待页样式，默认的等待页面为白色。我现在改为 #96DBF3。搭配 wait.gif 完成等待页加载动画。loddingPageHook 生命钩子会传递一个原生 View 对象，你可以在上面搞一些骚操作。loddingPageStyle 函数同理。API及样式设置 移步这里查看

# APP.vue 生命周期的处理

路由插件通过混入 onLaunch，拦截 app.vue 及 index.vue 的生命钩子，通过动态更改、触发生命钩子等操作来完成对首屏的拦截。 因为对app.vue下的部分生命钩子做了处理，所以你可以在 onLaunch 钩子中做一些异步操作来延缓index.vue下 onLoad 钩子的触发。你可以返回一个 Promise 告诉路由 onLaunch 生命钩子执行完成后才执行首页下的 onLoad。

//app.vue
export default {
  onLaunch: function() {
	  return new Promise(resolve=>{
		  setTimeout(()=>{  
			  console.log('onLaunch')
              resolve();
		  },3000)
	  })
  },
  onShow: function() {
	   console.log('onLaunch---onShow')
  },
};

它保证了 onLaunch 和 首页 onLoad 的执行顺序。写成同步函数相同！onLaunch执行的时间影响加载页。

# 下面列举出有强化的生命钩子

# app.vue

# 打包后可能出现闪屏

打包后可能有添加启动图片，所以与等待页面冲突。先是显示启动图，闪屏显示白色的等待页面，最后显示页面。这是正常的情况！如果你想提前关闭启动图 可以在 loddingPageHook 生命钩子下执行 plus.navigator.closeSplashscreen()，默认路由插件已经添加。启动操作均可在此钩子完成！