启动页设置

uniapp自带的启动页是一个白底的页面，上面有个uni的logo，然后周围有个圆圈的进度条，这个是启动页。

uniapp中可以自定义启动页，注意两点：

不要勾选“启动界面显示等待雪花”
Android启动界面设置中，要选择“自定义启动图”，然后在上传三种不同尺寸的启动图图片即可。

IOS的目前公司还没有要求实现，等到了这一步再写详细步骤。

闪屏页介绍

一直以来，我以为闪屏页就是类似于下方的这种图片。

我一直以为这种图片是出现在app开始启动的时候。结果，上面的这种图片有另一个名字叫：引导页，是app刚下载完成时，引导用户使用的。
而闪屏页，是在启动页出现之前，由于网络或者服务器数据请求的问题出现数据缓慢时，缓解用户焦虑或者增加用户互动性的一个东西。
这个闪屏页目前没有实现。

引导页功能实现

引导页一般都是3-5张图片，每张都是全屏展示，然后滑动时，能够切换到上一张/下一张，在最后一张可以点击进入app首页或者登录页的图片。

引导页功能的实现可以通过swiper组件来进行实现：
在uniapp插件市场中有个APP-引导页+官方示例的组件可以直接使用。
组件地址如下：
APP-引导页+官方示例插件地址https://ext.dcloud.net.cn/plugin?id=192

使用方法如下：

原理就是通过缓存中存入一个key，然后根据Key的值判断是否要展示引导页页面。

插件提供的使用方法：

 <view class="main"><code-elf-guide v-if="guidePages"></code-elf-guide></view>

import codeElfGuide from '@/components/code-elf-guide/code-elf-guide.vue'export default {components: {codeElfGuide},data() {return {guidePages:true}},onLoad(){this.loadExecution()},methods: {loadExecution: function(){/*** 获取本地存储中launchFlag的值* 若存在，说明不是首次启动，直接进入首页；* 若不存在，说明是首次启动，进入引导页；*/try {// 获取本地存储中launchFlag标识const value = uni.getStorageSync('launchFlag');if (value) {// launchFlag=true直接跳转到首页uni.switchTab({url: '/pages/tabBar/component/component'});} else {// launchFlag!=true显示引导页this.guidePages = true}} catch(e) { // error uni.setStorage({ key: 'launchFlag', data: true, success: function () {console.log('error时存储launchFlag');} }); this.guidePages = true}}}}

 page,.main{width: 100%;height: 100%;
}

最终实现的效果会有点瑕疵，引导页会再次打开app时隐藏，但是有个闪屏效果出现。
这个问题目前没有解决，后续有解决办法会再次更新。如果您有好的处理办法，也可以评论区帮我解决一下。谢谢。

uniapp 引导页启动页闪屏页功能介绍及部分功能实现相关推荐

Android如何接入渠道SDK的闪屏页？一个activity就够了
如果你是做SDK开发的,应该接入过很多渠道SDK,常见的渠道有华为.小米.VIVO.OPPO.应用宝.UC九游.三星.小七等,还有一些小的渠道以及一些聚合渠道SDK,成千上万个渠道,其中部分渠道是需要 ...
Flutter——踩坑之旅（iOS闪屏页+启动页闪屏之后会黑一下才进入启动页）
程序猿日常 flutter填坑--iOS闪屏页+启动页效果优化闪屏之后会黑一下进入启动页问题描述大部分app都有自己的启动页,我们经常在启动页做一些判断逻辑,例如是否第一次启动app,第一次启 ...
【Android】android开发之splash闪屏页的四种实现方式，启动页的实现教程。
2019独角兽企业重金招聘Python工程师标准>>> 作者:程序员小冰,GitHub主页: https://github.com/QQ986945193 新浪微博:http://w ...
关于APP在小米5s第一次安装启动后，点击home返回桌面，再次进入重进闪屏页问题
现象今天工作中,在对公司产品进行测试的时候,程序员小哥点出了一个问题.问题点出的步骤是这样的: 1.安装APP 2.点击打开 3.经过闪屏页,进入主页后,点击HOME键 4.再次进入程序会重新进入闪 ...
关于APP在小米5s第一次安装启动后，点击home返回桌面，再次进入重进闪屏页问题...
现象今天工作中,在对公司产品进行测试的时候,程序员小哥点出了一个问题.问题点出的步骤是这样的: 1.安装APP 2.点击打开 3.经过闪屏页,进入主页后,点击HOME键 4.再次进入程序会重新进入闪 ...
Flutter 项目在iPhone/苹果手机启动页/闪屏页黑屏问题
问题很奇怪不清楚什么原因,有知道的朋友求告知,设置如图一所示的 storyboard 布局文件,就会显示1-2s的黑屏,去掉就可以了,那在 xcode 里面怎么设置开屏页呢,需要在 Info.lis ...
android 闪屏页处理_Android应用闪屏页延迟跳转的三种写法
闪屏页也称之为欢迎页.在打开一个App时,我们第一眼看到的往往是一个闪屏页面,之所以叫闪屏页,是因为它出现之后会短暂地停留几秒钟再跳转到其他页面.闪屏页除了使用户体验更好外,还能给app留出初始化数据 ...
闪屏页新手引导页面主页判断跳转的逻辑
闪屏页的实现 : import android.app.Activity; import android.content.Intent; import android.os.Bundle; impor ...
Flutter 项目的闪屏页方案
前言在APP项目中闪屏页(或启动页)的作用是为了解决在程序显示第一帧之前,不要出现白屏的现象,尤其是在纯RN和Flutter的项目里面,资源加载完成到显示的速度会比Native要逊色一些.这里主要总 ...

uniapp 引导页启动页闪屏页功能介绍及部分功能实现

启动页设置

闪屏页介绍

引导页功能实现

uniapp 引导页启动页闪屏页功能介绍及部分功能实现相关推荐

最新文章

热门文章

uniapp 引导页 启动页 闪屏页功能介绍及部分功能实现

启动页设置

闪屏页介绍

引导页功能实现

uniapp 引导页 启动页 闪屏页功能介绍及部分功能实现相关推荐

最新文章

热门文章

uniapp 引导页启动页闪屏页功能介绍及部分功能实现

uniapp 引导页启动页闪屏页功能介绍及部分功能实现相关推荐