Uni-App 启动页和引导页介绍

石学元 發表於 2020-10-26 09:22:00

<h1>Uni-App 启动页和引导页介绍</h1>
Uni-App 启动页和引导页是两个不同的东西，启动页是 Uni-App 自带的，不可去掉，只能修改相关配置。而引导页完全是需要开发者自行开发的。
<img src="http://cdn.javanx.cn/wp-content/themes/lensnews2.2/images/201909/7/2.png" alt="uni-app: 引导页功能如何实现？" data-original="http://cdn.javanx.cn/wp-content/themes/lensnews2.2/images/201909/7/2.png">
上面的图，就是Uni-App 启动页，那开发者可以对它进行哪些配置呢？
<img src="http://cdn.javanx.cn/wp-content/themes/lensnews2.2/images/201909/7/20190919150751.png" alt="uni-app: 引导页功能如何实现？" data-original="http://cdn.javanx.cn/wp-content/themes/lensnews2.2/images/201909/7/20190919150751.png">
可以配置： 1、是否等待首页加载完成在关闭启动界面
<blockquote>
设置为true，则splash的关闭逻辑为：App启动时，App引擎自动检测首页渲染情况，若首页未渲染（白屏），则不关闭splash；否则，关闭splash；若启动时间超过10秒，则不管首页是否白屏，自动关闭splash

</blockquote>
注意：若App启动时有动态显示其他页面的需求，场景举例：
欢迎页场景：首次启动，显示App欢迎页；否则，显示首页内容 登录页场景：用户未登录，打开登录页；否则，显示首页内容 此时，App引擎无法高效判断首页及跳转页渲染情况，建议将alwaysShowBeforeRender 设置为false，开发者手动调用 plus.navigator.closeSplashscreen() 关闭启动界面。
2、是否在程序启动界面显示等待雪花
3、是否自动关闭程序启动界面
<blockquote>
autoclose 可设置App引擎是否自动关闭splash，默认为true；若修改为false，则需开发者手动调用 plus.navigator.closeSplashscreen() 方法关闭启动图。但是这个时间不能太晚，6s 超时后依旧会主动关闭。

</blockquote>
4、启动界面在应用的首页面加载完毕后延迟关闭的时间
<blockquote>
启动界面在应用的首页加载完毕后延迟关闭的时间，单位为毫秒，仅在 autoclose 设置为 true 时有效。

</blockquote>
注意：这个 delay 不能任意使用，从应用启动到 splash 关闭的总时长，不会超过 6s。也就是说，delay 的时长也是计算在这个 6s 的限制内。
<img src="http://cdn.javanx.cn/wp-content/themes/lensnews2.2/images/201909/7/20190919150950.png" alt="uni-app: 引导页功能如何实现？" data-original="http://cdn.javanx.cn/wp-content/themes/lensnews2.2/images/201909/7/20190919150950.png">
Uni-App 引导页，引导页很多都是安装app，第一次打开才会显示，后面打开都不会出现。大多显示内容是，告诉用户如何操作，或者核心介绍app作用等。
下面我们就来实现一个超级简单的Uni App引导页。
 
<h1 id="h1-uni-app-">Uni-App 简单引导页示例</h1>
第一步：建3个页面文件。在pages目录下，新建index/init.vue、index/guide.vue、index/home.vue。
对应pages.json：
<div class="code-toolbar">
<div class="cnblogs_code">
<pre>{
"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"
 }
}]
}</pre>
</div>
 
</div>
注意排放顺序，init一定要第一个，作为入口页面。
init.vue
<div class="code-toolbar">
<div class="cnblogs_code">
<pre>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'
});
}
}</pre>
</div>
 
<pre class="language-javascript"><code class="language-javascript"> </code></pre>
</div>
然后我们guide.vue页面就可以写引导页的内容了。
<div class="code-toolbar">
<div class="cnblogs_code">
<pre><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></pre>
</div>
 
</div>
假设我们引导页时一个swiper轮播试的方式
<img src="http://cdn.javanx.cn/wp-content/themes/lensnews2.2/images/201909/7/20190919153628.png" alt="uni-app: 引导页功能如何实现？">
 
记得pages.json里面引导页去掉头部标题栏，同时设置样式使swiper全屏。
 
<div class="code-toolbar">
<div class="cnblogs_code">
<pre>"titleNView": false,</pre>
</div>
<pre class="language-json"><code class="language-json"> </code></pre>
</div>
现在很多app，都加了广告视频，作为app引导页，Uni-APP如何实现了，其实和上面swiper一样，但是还是有很多需要注意的地方。
<h1 id="h1-uni-app-">Uni-App 视频引导页示例</h1>
我们先了解一波，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。（<code><video/</code>> 组件编译到 H5 时会替换为标准 html 的 video 标签）。H5端也可以自行在条件编译里使用video.js等三方库，这些库可以自动判断环境兼容以决定使用标准video或flash来播放。
小程序平台：各小程序平台支持程度不同，详见各家文档：微信小程序视频组件文档、支付宝不支持video组件、百度小程序视频组件文档、头条小程序视频组件文档
App平台：支持本地视频(mp4/flv)、网络视频地址（mp4/flv/m3u8）及流媒体（rtmp/hls/rtsp）。
下面，用video做一个引导页： guide.vue html模板
<div class="code-toolbar">
<div class="cnblogs_code">
<pre><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></pre>
</div>
 
</div>
guide.vue javascript
 
<div class="code-toolbar">
<div class="cnblogs_code">
<pre>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'
});
}
}</pre>
</div>
<pre class="language-javascript"><code class="language-javascript"> </code></pre>
</div>
这里为什么写的有点点复杂？下面详细讲讲： 1、为什么没有做成自动播放？
<blockquote>
如果配置了“等待首页加载完成在关闭启动界面”，自动播放，就好关闭启动页就进去到了首页，因为视频播放也会占用加载时间，会在启动页面等待。

</blockquote>
<blockquote>
uni.createVideoContext(videoId, this)。创建并返回 video 上下文 videoContext 对象。在自定义组件下，第二个参数传入组件实例this，以操作组件内 <code><video></code> 组件。

</blockquote>
2、为什么要timeupdate监听视频播放？
<blockquote>
这里涉及到一个兼容问题，android，可以在ended事件后，直接到首页，但是iOS会出现一下短暂的暂停样式（显示了播放按钮），所以这里用监听播放进度，来计算快要播放完毕，就跳走。

</blockquote>
<blockquote>
uni.getSystemInfo。获取设备系统信息。

</blockquote>
3、为什么用cover-view，不直接用view组件？
<blockquote>
因为部分组件如map、video、textarea、canvas通过原生控件实现，原生组件层级高于前端组件，为了能正常覆盖原生组件，所以使用cover-view。这样我们就可以在video上面显示按钮，用户可以跳过视频直接进去首页。

</blockquote>
<img src="http://cdn.javanx.cn/wp-content/themes/lensnews2.2/images/201909/7/3.gif" alt="uni-app: 引导页功能如何实现？">
 
init.vue这个页面如果页面是空白的不布局，百分百的当下次重启app运行，会在init.vue页面等待一下再去首页，会给你感觉是白屏一下。其实就是因为init.vue页面没布局，空白页面，然后又跳转到首页了
app.vue里面好像不能跳，那就去init.vue的onShow里面判断就好了，目前我是onShow里面处理的，好像没有白屏现象
  
来源：https://www.cnblogs.com/plBlog/p/13876792.html

頁: [1]

琼殿技术论坛's Archiver

Uni-App 启动页和引导页介绍