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 引导页,引导页很多都是安装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"><swiperclass="swiper"circular :indicator-dots="true" :current="tabIndex"@change="changeTab"><swiper-itemclass="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平台:支持支持的视频格式视浏览器而定,一般通用的都支持: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"><videoid="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上面显示按钮,用户可以跳过视频直接进去首页。
init.vue这个页面 如果页面是空白的 不布局,百分百的当下次重启app运行,会在init.vue页面等待一下 再去首页,会给你感觉是白屏一下。其实就是因为init.vue页面 没布局,空白页面,然后又跳转到首页了
app.vue里面好像不能跳,那就去init.vue的onShow里面判断就好了,目前我是onShow里面处理的,好像没有白屏现象
Uni-App 启动页和引导页介绍相关推荐
- android 闪屏拉伸,App设计体系之引导页/启动页/闪屏
1.定义 启动App需要一小段的等待时间,为了缓解用户等待焦虑,启动时需要过渡界面,过渡界面包括三种类别:启动页.闪屏.引导页. 1.1 启动页 启动页通常是一张静态图片,不能点击也不能跳过,通常会缓 ...
- android 闪屏引导,启动体验设计-闪屏,启动页,引导页
冷启动(cold start) 冷启动是指应用尚未运行,系统创建进程并初始化应用. 热启动是指应用已经运行但是在后台被挂起,从后台恢复应用. 冷启动时间稍微会长一点,在此期间可能会看到白屏或黑屏或感受 ...
- 基于 Google Flutter 的 WanAndroid 客户端,支持 Android 和 iOS。包括 BLoC、RxDart 、国际化、主题色、启动页、引导页,拥有较好的项目结构比较规范的代
flutter_wanandroid 项目地址:Sky24n/flutter_wanandroid 简介:??? 基于 Google Flutter 的 WanAndroid 客户端,支持 Andr ...
- mui 启动页和引导页
一.启动页和引导页的概念 "启动页"(splash):app的启动界面,每次启动都会看到的(每次打开QQ都会看到一只企鹅). "引导页"(guide):guid ...
- 一款好看的HTML介绍页、引导页源码
一款好看的个人极简介绍页.引导页源码,图标引用的是阿里巴巴矢量图标库,可引入自己的图标项目更换. 地图引入了高德的map lab 数据可视化,可用来做足迹,记录去过的地方. 页面信息修改都在index ...
- 【Android 小功能】启动 App 时实现启动页、引导页功能,并且只在第一次启动 App 时跳入引导页面
[Android]如何实现启动APP时引导页.欢迎页功能之(一)引导页功能的实现 [Android]如何实现启动APP时引导页.欢迎页功能设置之(二)设置只在第一次启动APP时跳入引导界面
- uniapp启动图和引导页的处理逻辑
pages.js pages节点的第一项为应用入口页(即首页,这里作为启动页来使用), 可以在home.vue放如一张gif动图,动图时间位2秒,设置定时器在2.5秒后跳转. 如图所示,添加两个vue ...
- uni-app 启动页,引导页,广告页
1 勾选自定义启动图 这个需要打包才能生效 2 引导页,广告页 1 plus.navigator.closeSplashscreen();//为关闭启动页,需要设置启动页为不自动关闭 2 请求接口后再 ...
- ZYI官网动态单页html引导页源码
介绍: 一款动态背景特效的html单页引导页面源码,喜欢的可以下载看看. 网盘下载地址: https://zijiewangpan.com/hOoCRoy9pdN 图片:
- ZYI官网单页html引导页源码动态背景特效
介绍: 一款动态背景特效的html单页引导页面源码,喜欢的可以下载看看. 网盘下载地址: http://kekewl.net/Eh0aZj8srbR 图片:
最新文章
- JSONP的实现原理
- python打开360浏览器_python selenium使用360浏览器出现新皮肤设置怎么办?
- .NET下安装卸载WindowsService批处理脚本
- oom 如何避免 高并发_【面试】如何避免OOM的发生
- 超详细前端开发案例:品优购商场项目(二)
- css网页设计作业_小姐姐用 HTML + CSS 画油画?谁能想到前端还有这么一手操作!...
- 【剑指 offer】(二十二)—— 栈的压入、弹出序列
- [转]常见的软件版本编号及命名
- 软考中级网络工程师的就业前景以及考试要求
- 三极管来源,及NPN与PNP区别
- Multi-attributed heterogeneous graph convolutional network for bot detection(SCI CCF B)
- 查询IP归属地的接口
- java set拷贝_Java之深浅拷贝
- Linux下常用软件安装指南
- 计算机丢失libdelogo.dll,电脑图标打开就出错,用联机解决说计算机中丢失Duilib.dll 是怎么回事...
- ETHEOS开发资源及工具集合(完整汇总版)
- 三菱触摸屏怎么改时间_三菱触摸屏界面显示设置
- 高光谱解混(一)——高光谱分解综述:基于几何,统计和稀疏回归的方法
- 利用OpenVSwitch构建多主机Docker网络
- 分享大数据建模工具-大数据挖掘建模平台
热门文章
- 交互体验设计优秀的产品
- shell grep正则匹配汉字
- 新手如何当好办公室主任?傻瓜才做“二当家的”,高手都懂这5个潜规则
- delphi android 升级,delphi android 自动升级
- Kernel Pwn 入门 (2)
- 揭秘!谷歌云确立领先地位的五大变革
- 小米和联想的“骁龙”之争,首发第一,友谊第二
- Puppet nginx+passenger模式配置
- smart3d4.4.5_在Android 5.0中使用Smart Lock,再也不必在家中解锁手机
- 【linux内核分析与应用-陈莉君】中断机制概述