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 = StorageSync('launchFlag');
if (value) {
// 如何已经有，直接去home⾸页
uni.switchTab({
url: '/pages/index/home'
});
} else {
// 没有值，跳到引导页，并存储，下次打开就不会进去引导页
uni.setStorage({
key: 'launchFlag',
data: true
});
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轮播试的⽅式
记得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 = ateVideoContext('video', this)
videoContext.play()
},
methods: {
timeupdate(event){
success: (data) => {
if(data.platform=='ios') {
if(event.detail){
event.detail.diff = event.detail.duration - event.detail.currentTime;
if(event.detail.diff < 0.4){
}
}
}
}
})
},
goIndex(){
uni.switchTab({
url: '/pages/index/index'app开发实例
});
}
}
这⾥为什么写的有点点复杂？下⾯详细讲讲：
1、为什么没有做成⾃动播放？
如果配置了“等待⾸页加载完成在关闭启动界⾯”，⾃动播放，就好关闭启动页就进去到了⾸页，因为视频播放也会占⽤加载时
间，会在启动页⾯等待。
2、为什么要timeupdate监听视频播放？
这⾥涉及到⼀个兼容问题，android，可以在ended事件后，直接到⾸页，但是iOS会出现⼀下短暂的暂停样式（显⽰了播放按钮），所以这⾥⽤监听播放进度，来计算快要播放完毕，就跳⾛。
3、为什么⽤cover-view，不直接⽤view组件？
因为部分组件如map、video、textarea、canvas通过原⽣控件实现，原⽣组件层级⾼于前端组件，为了能正常覆盖原⽣组件，所以使⽤cover-view。这样我们就可以在video上⾯显⽰按钮，⽤户可以跳过视频直接进去⾸页。
init.vue这个页⾯如果页⾯是空⽩的不布局，百分百的当下次重启app运⾏，会在init.vue页⾯等待⼀下再去⾸页，会给你感觉是⽩屏⼀下。其实就是因为init.vue页⾯没布局，空⽩页⾯，然后⼜跳转到⾸页了
app.vue⾥⾯好像不能跳，那就去init.vue的onShow⾥⾯判断就好了，⽬前我是onShow⾥⾯处理的，好像没有⽩屏现象

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。