uniapp开发App——登陆流程 判断是否登陆,是,进入首页,否,跳转到登录页

news/2024/10/24 6:37:13/

一、登陆流程

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

流程图如下:

二、在uniapp项目中代码实现

实现逻辑:

1. 前提准备:登录页、首页、在pages.json里配置App展示的第一个页面就是首页

2. 在app.vue页面的 onLaunch 方法中,判断用户是否登陆

<script>export default {onLaunch: function() {console.log('App Launch')//通过本地缓存取出登陆的凭证let loginValue = uni.getStorageSync("isLoginKey");//如果没有登陆,就跳转到登陆页,如果已经登陆过,那就默认,会直接展示首页if (!loginValue) {//跳转进入登录页uni.reLaunch({url: "/pages/login/login",success: () => {}})} },onShow: function() {console.log('App Show')},onHide: function() {console.log('App Hide')},}
</script><style></style>

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

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

原理:

利用App splash(启动封面)遮挡住那一瞬间,那么用户就看不到了。

Splashscreen的基础知识看官方文档manifest.json 应用配置 | uni-app官网

实现逻辑:

1. 将启动封面Splashscreen的默认配置修改。

alwaysShowBeforeRender = false

autoclose = false
=》因为我要手动控制启动封面什么时候关闭,所以不然它自动关闭。

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

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

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

<script>export default {onLaunch: function() {console.log('App Launch')let loginValue = uni.getStorageSync("isLoginKey");//关闭启动封面,当然它要延迟1秒this.closeSplashscreen();if (!loginValue) {uni.reLaunch({url: "/pages/login/login",success: () => {}})} },onShow: function() {console.log('App Show')},onHide: function() {console.log('App Hide')},methods: {closeSplashscreen: function() {// #ifdef APP-PLUSsetTimeout(() => {//手动关闭App启动封面plus.navigator.closeSplashscreen()}, 1000)// #endif}}}
</script>

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

原理:设置登录页,跳转无动画


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


http://www.ppmy.cn/news/1400545.html

相关文章

聊聊websocket opcode中的text / binary模式

webscoket 协议中有一个非常有意思的设计&#xff0c;在opcode内&#xff0c;对帧类型进行了区分&#xff1a;文本和二进制流。但这个区分并没有规定文本类型有类似于http协议中空行表示结束的说法&#xff0c;而且长度也是由帧头记录&#xff0c;也就是说&#xff0c;单纯从协…

K8S基本概念+pod生命周期+容器重启策略+Init容器和边车容器+pod探针+postStart和preStop

一 kubernetes 基础 Kubernetes是谷歌以Borg为前身&#xff0c;基于谷歌15年生产环境经验的基础上开源的一个项目&#xff0c;Kubernetes致力于提供跨主机集群的自动部署、扩展、高可用以及运行应用程序容器的平台。 二 Master 节点 kube-APIServer&#xff1a;集群的控制中…

爬虫工作量由小到大的思维转变---<第六十二章 Scrapy统计收集器类的分析与应用(1)>

​​​​​​​前言: 在当今信息时代的互联网环境中&#xff0c;网络爬虫正日益成为了获取和分析大量数据的关键工具。网络爬虫的用途广泛&#xff0c;包括搜索引擎的建立、商业情报的收集、舆情分析等。然而&#xff0c;随着互联网规模和复杂性的不断增加&#xff0c;监控和统…

「CISP题库精讲」CISP题库习题解析精讲4道

第一题 以下关于互联网协议安全(InternetProtocolSecurity,IPSec)协议,说法错误的是?() A.在传送模式中,保护的是IP负载。 B.验证头协议(AuthenticationHeader,AH)和IP封装安全负载协议(EncapsulatingSecurityPayload,ESP)都能以传输模式和隧道模式工作。 C.在隧道模…

Ubuntu+Caddy:免费服务器上部署WordPress!

嘿&#xff0c;大家好&#xff01;今天我要分享如何在免费的三丰云服务器上使用Caddy部署WordPress&#xff01;首先&#xff0c;我要给这个免费服务器点个赞&#xff0c;别小看它&#xff0c;虽然免费&#xff0c;但提供了1核CPU、1G内存、10G硬盘和5M带宽&#xff0c;完全免费…

kafka集群介绍+部署Filebeat+Kafka+ELK

一、消息队列 1、为什么需要消息队列&#xff08;MQ&#xff09; 主要原因是由于在高并发环境下&#xff0c;同步请求来不及处理&#xff0c;请求往往会发生阻塞。比如大量的请求并发访问数据库&#xff0c;导致行锁表锁&#xff0c;最后请求线程会堆积过多&#xff0c;从而触…

Qt+OpenGL入门教程(三)——绘制三角形

通过前两篇文章的学习&#xff0c;我想大家应该有了基本的理解&#xff0c;我们接下来实操一下。 创建Qt OpenGL窗口 QOpenGLWidget QGLWidget是传统QtOpenGL模块的一部分&#xff0c;与其他QGL类一样&#xff0c;应该在新的应用程序中避免使用。相反&#xff0c;从Qt5.4开始…

对象的内存布局

在Java虚拟机&#xff08;HotSpot&#xff09;中&#xff0c;对象在 Java 内存中的 存储布局 可分为三块&#xff1a; 对象头 存储区域实例数据 存储区域对齐填充 存储区域 对象头区域&#xff1a; 存储对象自身的运行时数据&#xff0c;如&#xff1a;哈希码、GC分代年龄、锁状…