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

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

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",
        "style": {
            "navigationBarTitleText": "入口页"
        }
    }, {
        "path": "pages/index/guide",
        "style": {
            "navigationBarTitleText": "引导页",
            "titleNView": false,
            "app-plus": {
                "bounce": "none"
            }
        }
    }, {
        "path": "pages/index/home",
        "style": {
            "navigationBarTitleText": "首页",
            "navigationBarTextStyle": "black"
        }
    }]
}

注意排放顺序，init一定要第一个，作为入口页面。

init.vue

onLoad() {
  // 从本地缓存中同步获取指定 key 对应的内容，用于判断是否是第一次打开应用
  const value = uni.getStorageSync('launchFlag');
  if (value) {
    // 如何已经有，直接去home首页
    uni.switchTab({
      url: '/pages/index/home'
    });
  } else {
    // 没有值，跳到引导页，并存储，下次打开就不会进去引导页
    uni.setStorage({
      key: 'launchFlag',
      data: true
    });
    uni.redirectTo({
      url: '/pages/index/guide'
    });
  }
}

然后我们guide.vue页面就可以写引导页的内容了。

<template>
    <view id="guide">
        <swiper
      class="swiper"
      circular 
      :indicator-dots="true" 
      :current="tabIndex"
      @change="changeTab">
            <swiper-item
        class="item"
        v-for="(item, index) in guidelList" :key="index">
                <image :src="item.src" mode="aspectFill"></image>
            </swiper-item>
        </swiper>
    </view>
</template>

假设我们引导页时一个swiper轮播试的方式

记得pages.json里面引导页去掉头部标题栏，同时设置样式使swiper全屏。

"titleNView": false,

现在很多app，都加了广告视频，作为app引导页，Uni-APP如何实现了，其实和上面swiper一样，但是还是有很多需要注意的地方。

Uni-App 视频引导页示例

我们先了解一波，Uni-APP中video组件提供了那些api？ src 要播放视频的资源地址

autoplay 是否自动播放

loop 是否循环播放

muted 是否静音播放

initial-time 指定视频初始播放位置，单位为秒（s）。

duration 指定视频时长，单位为秒（s）。

controls 是否显示默认播放控件（播放/暂停按钮、播放进度、时间）

danmu-list Object Array 弹幕列表

danmu-btn 是否显示弹幕按钮，只在初始化时有效，不能动态变更

enable-danmu 是否展示弹幕，只在初始化时有效，不能动态变更

page-gesture 在非全屏模式下，是否开启亮度与音量调节手势 微信小程序、H5 direction 设置全屏时视频的方向，不指定则根据宽高比自动判断。有效值为 0（正常竖向）, 90（屏幕逆时针90度）, -90（屏幕顺时针90度）

show-progress 若不设置，宽度大于240时才会显示

show-fullscreen-btn 是否显示全屏按钮

show-play-btn 是否显示视频底部控制栏的播放按钮

show-center-play-btn 是否显示视频中间的播放按钮

enable-progress-gesture 是否开启控制进度的手势

objectFit String contain 当视频大小与 video 容器大小不一致时，视频的表现形式。contain：包含，fill：填充，cover：覆盖 微信小程序、H5 poster 视频封面的图片网络资源地址，如果 controls 属性值为 false 则设置 poster 无效

@play 当开始/继续播放时触发play事件

@pause 当暂停播放时触发 pause 事件

@ended 当播放到末尾时触发 ended 事件

@timeupdate 播放进度变化时触发，event.detail = {currentTime, duration} 。触发频率 250ms 一次

@fullscreenchange 当视频进入和退出全屏时触发，event.detail = {fullScreen, direction}，direction取为 vertical 或 horizontal

@waiting 视频出现缓冲时触发

@error 视频播放出错时触发

总的来看，功能还是非常的强大，而且还支持弹幕，这是我没有想到的。

视频格式支持情况：

H5平台：支持支持的视频格式视浏览器而定，一般通用的都支持：mp4、webm 和 ogg。（<video/> 组件编译到 H5 时会替换为标准 html 的 video 标签）。H5端也可以自行在条件编译里使用video.js等三方库，这些库可以自动判断环境兼容以决定使用标准video或flash来播放。

小程序平台：各小程序平台支持程度不同，详见各家文档：微信小程序视频组件文档、支付宝不支持video组件、百度小程序视频组件文档、头条小程序视频组件文档

App平台： 支持本地视频(mp4/flv)、网络视频地址（mp4/flv/m3u8）及流媒体（rtmp/hls/rtsp）。

下面，用video做一个引导页： guide.vue html模板

<template>
    <view id="guide">
        <video
            id="video"
            src="/static/guide.mp4"
            :direction="0"
            :autoplay="false"
            :controls="false"
            :show-play-btn="false"
            :show-center-play-btn="false"
            :enable-progress-gesture="false"
            objectFit="fill"
            @timeupdate="timeupdate"
            @ended="goIndex"></video>
        <cover-view @click="goIndex">立即体验</cover-view>
    </view>
</template>

guide.vue javascript

onShow() {
  let videoContext = uni.createVideoContext('video', this)
  videoContext.play()
},
methods: {
  timeupdate(event){
    uni.getSystemInfo({
      success: (data) => {
        if(data.platform=='ios') {
          if(event.detail){
            event.detail.diff = event.detail.duration - event.detail.currentTime;
            if(event.detail.diff < 0.4){
              this.goIndex()
            }
          }
        }
      }
    })

  },
  goIndex(){
    uni.switchTab({
      url: '/pages/index/index'
    });
  }
}

这里为什么写的有点点复杂？下面详细讲讲： 1、为什么没有做成自动播放？

如果配置了“等待首页加载完成在关闭启动界面”，自动播放，就好关闭启动页就进去到了首页，因为视频播放也会占用加载时间，会在启动页面等待。 uni.createVideoContext(videoId, this)。创建并返回 video 上下文 videoContext 对象。在自定义组件下，第二个参数传入组件实例this，以操作组件内 <video> 组件。

2、为什么要timeupdate监听视频播放？

这里涉及到一个兼容问题，android，可以在ended事件后，直接到首页，但是iOS会出现一下短暂的暂停样式（显示了播放按钮），所以这里用监听播放进度，来计算快要播放完毕，就跳走。 uni.getSystemInfo。获取设备系统信息。

3、为什么用cover-view，不直接用view组件？

因为部分组件如map、video、textarea、canvas通过原生控件实现，原生组件层级高于前端组件，为了能正常覆盖原生组件，所以使用cover-view。这样我们就可以在video上面显示按钮，用户可以跳过视频直接进去首页。

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

总结

今天你学到了什么？ 1、uni-app启动页和引导页的区别 2、uni-app 引导页制作 3、uni-app 视频video组件使用

每次进步一点点，以后日子好过点。 最后，谢谢大家支持。