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

启动页设置

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

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

1. 不要勾选“启动界面显示等待雪花”
2. 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时隐藏，但是有个闪屏效果出现。
这个问题目前没有解决，后续有解决办法会再次更新。如果您有好的处理办法，也可以评论区帮我解决一下。谢谢。