通过本章节你能学到那些?

1、Uni-App 启动页和引导页介绍
2、Uni-App 简单引导页示例
3、Uni-App 视频引导页示例

uni-app: 引导页功能如何实现?

Uni-App 启动页和引导页介绍

Uni-App 启动页和引导页是两个不同的东西,启动页是 Uni-App 自带的,不可去掉,只能修改相关配置。而引导页完全是需要开发者自行开发的。

uni-app: 引导页功能如何实现?

上面的图,就是Uni-App 启动页,那开发者可以对它进行哪些配置呢?

uni-app: 引导页功能如何实现?

可以配置:
1、是否等待首页加载完成在关闭启动界面

设置为true,则splash的关闭逻辑为:App启动时,App引擎自动检测首页渲染情况,若首页未渲染(白屏),则不关闭splash;否则,关闭splash;若启动时间超过10秒,则不管首页是否白屏,自动关闭splash

注意:若App启动时有动态显示其他页面的需求,场景举例:

欢迎页场景:首次启动,显示App欢迎页;否则,显示首页内容
登录页场景:用户未登录,打开登录页;否则,显示首页内容
此时,App引擎无法高效判断首页及跳转页渲染情况,建议将alwaysShowBeforeRender 设置为false,开发者手动调用 plus.navigator.closeSplashscreen() 关闭启动界面。

2、是否在程序启动界面显示等待雪花

3、是否自动关闭程序启动界面

autoclose 可设置App引擎是否自动关闭splash,默认为true;若修改为false,则需开发者手动调用 plus.navigator.closeSplashscreen() 方法关闭启动图。但是这个时间不能太晚,6s 超时后依旧会主动关闭。

4、启动界面在应用的首页面加载完毕后延迟关闭的时间

启动界面在应用的首页加载完毕后延迟关闭的时间,单位为毫秒,仅在 autoclose 设置为 true 时有效。

注意:这个 delay 不能任意使用,从应用启动到 splash 关闭的总时长,不会超过 6s。也就是说,delay 的时长也是计算在这个 6s 的限制内。

uni-app: 引导页功能如何实现?

Uni-App 引导页,引导页很多都是安装app,第一次打开才会显示,后面打开都不会出现。大多显示内容是,告诉用户如何操作,或者核心介绍app作用等。

下面我们就来实现一个超级简单的Uni App引导页。