# 启动时的生命周期 v 1.4.8+
截止之前的版本，在 app 端都无法做到拦截首屏加载的问题。v1.4.8 发布后将会拦截首屏处理，并自动注册首屏页面触发生命周期。首次打开app则会触发，你可以在里面做什么想完成的操作。启动页不支持nvue，以此则会出现白屏现象。永远进不去APP。
# 等待页加载动画
v1.4.8 起路由提供了一个全局app启动生命周期，loadingPageHook。它保证了在app启动时你可以做一些操作！loadingPageHook 重置等待页样式。
const router = createRouter({
APP:{
//设置等待页面背景色
loadingPageStyle:()=>JSON.parse('{"backgroundColor":"#96DBF3"}'),
//通过启动页生命钩子绘制加载gif
loadingPageHook:(view)=>{
plus.navigator.closeSplashscreen();
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
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
通过 loadingPageHook 函数重置掉等待页样式，默认的等待页面为白色。我现在改为 #96DBF3。搭配 wait.gif 完成等待页加载动画。loadingPageHook 生命钩子会传递一个原生 View 对象，你可以在上面搞一些骚操作。loadingPageHook 函数同理。API及样式设置 移步这里查看
# 启动完成后的钩子
const router = createRouter({
APP:{
launchedHook:()=>{
plus.navigator.closeSplashscreen();
console.log('加载完成啦')
}
},
routes:[
// ....
]
});
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
通过此钩子可以精准的捕捉到首次启动是否加载完毕。
# 打包后可能出现闪屏
打包后可能有添加启动图片，所以与等待页面冲突。先是显示启动图，闪屏显示白色的等待页面，最后显示页面。这是正常的情况！如果你想提前关闭启动图 可以在 launchedHook 生命钩子下执行 plus.navigator.closeSplashscreen()，默认路由插件已经添加。启动操作均可在此钩子完成！
隐藏等待页
const router = createRouter({
APP:{
loadingPageHook:(view)=>{
view.hide();
}
},
routes:[
// ....
]
});
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
取消等待页
const router = createRouter({
APP:{
registerLoadingPage: false,
},
routes:[
// ....
]
});
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
如果再未使用等待页时，打包后会呈现白色等待页面。如果不想看到等待页可以按上面的代码关闭。