update
迁移文档 小爱为你推荐使用新版本哦~~

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

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

# 等待页加载动画

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



 
 
 
 
 
 
 
 
 
 
 
 
 






const router = createRouter({
    APP:{
        //设置等待页面背景色
        loddingPageStyle:()=>JSON.parse('{"backgroundColor":"#96DBF3"}'),   
        //通过启动页生命钩子绘制加载gif
        loddingPageHook:(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

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

# 启动完成后的钩子



 
 
 
 






const router = createRouter({
    APP:{
        launchedHook:()=>{
            plus.navigator.closeSplashscreen();
            console.log('加载完成啦')
        }
    }, 
    routes:[
        // ....
    ]
});
1
2
3
4
5
6
7
8
9
10
11

通过此钩子可以精准的捕捉到首次启动是否加载完毕。

# 打包后可能出现闪屏

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

取消等待页




 







const router = createRouter({
    APP:{
        loddingPageHook:(view)=>{  
            view.hide();
        }
    }, 
    routes:[
        // ....
    ]
});
1
2
3
4
5
6
7
8
9
10

如果再未使用等待页时,打包后会呈现白色等待页面。如果不想看到等待页可以按上面的代码关闭。