Uni-App 简单引导页示例

最新推荐文章于 2024-05-22 02:49:32 发布

前端小咸鱼一条

最新推荐文章于 2024-05-22 02:49:32 发布

阅读量2.4k

点赞数 2

文章标签： uni-app

原文链接：https://www.cnblogs.com/plBlog/p/13876792.html

版权

Uni-App 简单引导页示例

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

pages.json：

{
   {
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/init",
			"style": {
				"titleNView": false  //pages.json里面引导页去掉头部标题栏
			}
		},
		{
			"path": "pages/index/guide",
			"style": {
				"navigationBarTitleText": "引导页面",
				"titleNView": false,
				"app-plus": {
					"bounce": "none"
				}
			}
		},
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "首页",
				"navigationStyle": "custom"
			}
		}]
}

注意排放顺序，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 style="width:100%;">
		<swiper :style="{height:windowHeight+'px'}" :current="tabIndex"  :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" @click="changeTab">
			<swiper-item style="width: 100%;" v-for="(item,index) in guidelList" :key="index">
				<image class="img" :src="item" mode="widthFix"></image>
			</swiper-item>
		</swiper>
	</view> 
</template>

引导页时一个swiper轮播试的方式
!](https://img-blog.csdnimg.cn/20210406205858451.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW94aWFubnZo,size_16,color_FFFFFF,t_7

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。（组件编译到 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，以操作组件内组件。

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

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

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

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

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