启动时的生命周期 v1.4.8+

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

等待页加载动画

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

  1. const router = new Router({
  2.     APP:{
  3.         //设置等待页面背景色
  4.         loddingPageStyle:()=>JSON.parse('{"backgroundColor":"#96DBF3"}'),   
  5.         //通过启动页生命钩子绘制加载gif
  6.         loddingPageHook:(view)=>{  
  7.             view.drawBitmap('/static/wait.gif', {}, {
  8.                 top: 'auto',
  9.                 left: 'auto',
  10.                 width: '200px',
  11.                 height: '200px'
  12.             })
  13.         }
  14.     }, 
  15.     routes:[
  16.         // ....
  17.     ]
  18. });

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

APP.vue 生命周期的处理

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

  1. //app.vue
  2. export default {
  3.   onLaunch: function() {
  4.       return new Promise(resolve=>{
  5.           setTimeout(()=>{  
  6.               console.log('onLaunch')
  7.               resolve();
  8.           },3000)
  9.       })
  10.   },
  11.   onShow: function() {
  12.        console.log('onLaunch---onShow')
  13.   },
  14. };

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

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

app.vue

名称变化
onLaunch全局仅触发一次，可返回 promise 保证异步执行顺序

注意

app.vue中不建议使用 onLaunch、onShow 、 onHide以外的生命钩子，路由插件未处理其他钩子，执行顺序不在理想状态下！

打包后可能出现闪屏

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