app启动页自动跳转源码_uni-app: 视频引导页开发需要注意些什么？

点击右上方红色按钮关注“web秀”，让你真正秀起来

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

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

2、Uni-App 简单引导页示例

3、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 引导页，引导页很多都是安装app，第一次打开才会显示，后面打开都不会出现。大多显示内容是，告诉用户如何操作，或者核心介绍app作用等。

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

Uni-App 简单引导页示例

第一步：建3个页面文件。在pages目录下，新建index/init.vue、index/guide.vue、index/home.vue。

对应pages.json：

{"pages": [{"path": "pages/index/init