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

刺骨的言语ヽ痛彻心扉 2021-07-25 12:56 3297阅读 0赞

# 启动页设置 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center]  
uniapp自带的启动页是一个白底的页面，上面有个uni的logo，然后周围有个圆圈的进度条，这个是启动页。

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

1.  不要勾选“启动界面显示等待雪花”
2.  Android启动界面设置中，要选择“自定义启动图”，然后在上传三种不同尺寸的启动图图片即可。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 1]  
    IOS的目前公司还没有要求实现，等到了这一步再写详细步骤。

# 闪屏页介绍 #

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

# 引导页功能实现 #

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

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

使用方法如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 3]  
原理就是通过缓存中存入一个key，然后根据Key的值判断是否要展示引导页页面。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 4]  
插件提供的使用方法：

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时隐藏，但是有个闪屏效果出现。  
这个问题目前没有解决，后续有解决办法会再次更新。如果您有好的处理办法，也可以评论区帮我解决一下。谢谢。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center]: /images/20210725/968960e6737a4fad9a8915a29c63ad5b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20210725/9a2c7bad3a5f44b99b90f0602a5ca993.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20210725/35099c8230294568987d4c69aa01271d.png
[APP-_https_ext.dcloud.net.cn_plugin_id_192]: https://ext.dcloud.net.cn/plugin?id=192
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20210725/5af896354988470093d44a26a7328624.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20210725/c5e52d5097f748c3913c700a304be2bb.png