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页面就可以写引导页的内容了。


假设我们引导页时一个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-listObject 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 是否开启控制进度的手势

objectFitStringcontain当视频大小与 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。(

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

下面,用video做一个引导页:

guide.vue html模板

立即体验

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,以操作组件内

这里涉及到一个兼容问题,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组件使用

内容出处:,

声明:本网站所收集的部分公开资料来源于互联网,转载的目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品,请与我们取得联系,我们会及时修改或删除。文章链接:http://www.yixao.com/procedure/13023.html

发表评论

登录后才能评论