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

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

一、Uni-App 启动页和引导页介绍 二、Uni-App 简单引导页示例 三、Uni-App 视频引导页示例

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

Uni-App 启动页和引导页是两个不一样的东西，启动页是 Uni-App 自带的，不可去掉，只能修改相关配置。而引导页彻底是须要开发者自行开发的。

上面的图，就是Uni-App 启动页，那开发者能够对它进行哪些配置呢？

能够配置： 一、是否等待首页加载完成在关闭启动界面

设置为true，则splash的关闭逻辑为：App启动时，App引擎自动检测首页渲染状况，若首页未渲染（白屏），则不关闭splash；不然，关闭splash；若启动时间超过10秒，则无论首页是否白屏，自动关闭splash

注意：若App启动时有动态显示其余页面的需求，场景举例：

欢迎页场景：首次启动，显示App欢迎页；不然，显示首页内容 登陆页场景：用户未登陆，打开登陆页；不然，显示首页内容 此时，App引擎没法高效判断首页及跳转页渲染状况，建议将alwaysShowBeforeRender 设置为false，开发者手动调用 plus.navigator.closeSplashscreen() 关闭启动界面。

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

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

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

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

启动界面在应用的首页加载完毕后延迟关闭的时间，单位为毫秒，仅在 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平台：支持支持的视频格式视浏览器而定，通常通用的都支持：mp四、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'
    });
  }
}
复制代码

这里为何写的有点点复杂？下面详细讲讲： 一、为何没有作成自动播放？

若是配置了“等待首页加载完成在关闭启动界面”，自动播放，就好关闭启动页就进去到了首页，由于视频播放也会占用加载时间，会在启动页面等待。

uni.createVideoContext(videoId, this)。建立并返回 video 上下文 videoContext 对象。在自定义组件下，第二个参数传入组件实例this，以操做组件内 <video> 组件。

二、为何要timeupdate监听视频播放？

这里涉及到一个兼容问题，android，能够在ended事件后，直接到首页，可是iOS会出现一下短暂的暂停样式（显示了播放按钮），因此这里用监听播放进度，来计算快要播放完毕，就跳走。

uni.getSystemInfo。获取设备系统信息。

三、为何用cover-view，不直接用view组件？

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

总结

今天你学到了什么？ 一、uni-app启动页和引导页的区别 二、uni-app 引导页制做 三、uni-app 视频video组件使用

每次进步一点点，之后日子好过点。 最后，谢谢你们支持。

喜欢的能够关注我哦!

原文地址：www.javanx.cn/20190919/un…