上面的图,就是Uni-App启动页,那开发者可以对它进行哪些配置呢?
可以配置:1、是否等待首页加载完成在关闭启动界面
注意:若App启动时有动态显示其他页面的需求,场景举例:
2、是否在程序启动界面显示等待雪花
3、是否自动关闭程序启动界面
注意:这个delay不能任意使用,从应用启动到splash关闭的总时长,不会超过6s。也就是说,delay的时长也是计算在这个6s的限制内。
Uni-App引导页,引导页很多都是安装app,第一次打开才会显示,后面打开都不会出现。大多显示内容是,告诉用户如何操作,或者核心介绍app作用等。
下面我们就来实现一个超级简单的UniApp引导页。
第一步:建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对应的内容,用于判断是否是第一次打开应用constvalue=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页面就可以写引导页的内容了。
记得pages.json里面引导页去掉头部标题栏,同时设置样式使swiper全屏。
我们先了解一波,Uni-APP中video组件提供了那些api?src要播放视频的资源地址
autoplay是否自动播放
loop是否循环播放
muted是否静音播放
initial-time指定视频初始播放位置,单位为秒(s)。
duration指定视频时长,单位为秒(s)。
danmu-listObjectArray弹幕列表
danmu-btn是否显示弹幕按钮,只在初始化时有效,不能动态变更
enable-danmu是否展示弹幕,只在初始化时有效,不能动态变更
show-progress若不设置,宽度大于240时才会显示
show-fullscreen-btn是否显示全屏按钮
show-play-btn是否显示视频底部控制栏的播放按钮
show-center-play-btn是否显示视频中间的播放按钮
enable-progress-gesture是否开启控制进度的手势
@play当开始/继续播放时触发play事件
@pause当暂停播放时触发pause事件
@ended当播放到末尾时触发ended事件
@timeupdate播放进度变化时触发,event.detail={currentTime,duration}。触发频率250ms一次
@fullscreenchange当视频进入和退出全屏时触发,event.detail={fullScreen,direction},direction取为vertical或horizontal
@waiting视频出现缓冲时触发
@error视频播放出错时触发
总的来看,功能还是非常的强大,而且还支持弹幕,这是我没有想到的。
视频格式支持情况:
App平台:支持本地视频(mp4/flv)、网络视频地址(mp4/flv/m3u8)及流媒体(rtmp/hls/rtsp)。
下面,用video做一个引导页:guide.vuehtml模板
2、为什么要timeupdate监听视频播放?
这里涉及到一个兼容问题,android,可以在ended事件后,直接到首页,但是iOS会出现一下短暂的暂停样式(显示了播放按钮),所以这里用监听播放进度,来计算快要播放完毕,就跳走。
uni.getSystemInfo。获取设备系统信息。
3、为什么用cover-view,不直接用view组件?
因为部分组件如map、video、textarea、canvas通过原生控件实现,原生组件层级高于前端组件,为了能正常覆盖原生组件,所以使用cover-view。这样我们就可以在video上面显示按钮,用户可以跳过视频直接进去首页。
今天你学到了什么?1、uni-app启动页和引导页的区别2、uni-app引导页制作3、uni-app视频video组件使用