Uni-App

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

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

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引导页。

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轮播试的方式

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

记得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组件使用

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

(1)

本文由 Web秀 作者:Javan 发表,转载请注明来源!

热评文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注