# 启动时的生命周期 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:[
        // ....
    ]
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

通过 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')
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14

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

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

# app.vue

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

注意

app.vue中不建议使用 onLaunchonShowonHide以外的生命钩子,路由插件未处理其他钩子,执行顺序不在理想状态下!

# 打包后可能出现闪屏

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