uniapp开发App（一）登陆流程判断是否登陆，是，进入首页，否，跳转到登录页

╰+攻爆jí腚メ 2024-04-22 15:22 61阅读 0赞

## 一、登陆流程 ##

> 文字描述：用户进入App，之后就是判断该App是否有用户登陆过，如果有，直接进入首页，否则跳转到登陆页，登陆成功后，进入首页。

流程图如下：

![099758ccea554d3f91e7a525c9eafa2f.png][]

## 二、在uniapp项目中代码实现 ##

> 实现逻辑：
> 
> 1. 前提准备：登录页、首页、在pages.json里配置App展示的第一个页面就是首页
> 
> 2. 在app.vue页面的 onLaunch 方法中，判断用户是否登陆

**做到这里，实际操作中，都会发现， 进入App时，都会先进入首页，我们往往能看到它存在的一瞬间，这个体验非常差，接下来解决该问题**。

## 三、解决显示登录页前，会看到首页存在的一瞬间 ##

> **原理：**
> 
> 利用App splash（启动封面）遮挡住那一瞬间，那么用户就看不到了。
> 
> Splashscreen的基础知识看官方文档[manifest.json 应用配置 | uni-app官网][manifest.json _ _ uni-app]  
>   
> **实现逻辑：**
> 
> 1. 将启动封面Splashscreen的默认配置修改。
> 
> alwaysShowBeforeRender = false
> 
> autoclose = false  
> =》因为我要手动控制启动封面什么时候关闭，所以不让它自动关闭。

### 1. 在manifest.json的源码试图中修改启动封面Splashscreen配置 ###

![487058d6ee3446bd8d9733bd33cd010c.png][]

这样启动封面就不会消失，无法看到App里面的内容。

### 2. 延时手动调用关闭App封面，让跳转的一瞬间发生时，App还停留在显示启动封面 ###

##  ##

## 四、优化：在未登录情况下，首页跳转到登陆的速度 ##

> 原理：设置登录页，跳转无动画

//pages.json
    	{
    			"path": "pages/login/login",
    			"style": {
    				"navigationBarTitleText": "",
    				"navigationStyle": "custom",
    				"app-plus": {
    					"bounce": "none",//页面回弹效果取消
    					"animationType": "none", //关闭动画
    					"animationDuration": "none" //关闭动画
    				}
    			}
    		},

## 五、进入index首页两次，导致页面引用的组件 模板引用丢失 ##

解决方法：将让路由跳转时同步 async 、await

[099758ccea554d3f91e7a525c9eafa2f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/c58f1994fa924c55b0cc0a551fa995fc.png
[manifest.json _ _ uni-app]: https://uniapp.dcloud.net.cn/collocation/manifest.html#splashscreen
[487058d6ee3446bd8d9733bd33cd010c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/0dbf89538483460d80b42fe9ca83ddb1.png