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

一、登陆流程

文字描述:用户进入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.mzph.cn/news/780106.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

代码随想录算法训练营第二十四天(回溯1)|77. 组合(JAVA)

文章目录 回溯理论基础概念类型回溯模板 77. 组合解题思路源码 回溯理论基础 概念 回溯是递归的副产品&#xff0c;本质上是一种穷举 回溯解决的问题可以抽象为一种树形结构 类型 回溯主要用来解决以下问题 组合问题&#xff1a;N个数里面按一定规则找出k个数的集合切割问…

如何使用Docker打包构建Java项目然后部署发布?

前言 今天我们来讲下如何使用Docker打包构建Java项目并且完成部署发布。 前期准备&#xff0c;需要安装好docker。 以及一个需要安装好Maven的镜像&#xff0c;可以参考下面的文章。 构建一个包含mvn命令的Java 17基础镜像-CSDN博客 一、打包构建Java项目镜像 1、创建Jav…

【力扣】300. 最长递增子序列(DFS+DP两种方法实现)

目录 题目传送最长递增子序列[DFS 方法]DFS方法思路图思路简述代码大家可以自行考虑有没有优化的方法 最长递增子序列[DP]方法DP方法思路图思路简述代码方案 题目传送 原题目链接 最长递增子序列[DFS 方法] DFS方法思路图 思路简述 对于序列中的每一个数字只有选择和不选择两…

电脑开机慢怎么办,电脑开机慢解决方法

新电脑呢&#xff0c;开机速度特别快。有很多人会感觉到电脑拿回家以后&#xff0c;一按开机键&#xff0c;六秒七秒&#xff0c;这个电脑就启动起来了&#xff0c;但是用一段时间以后呢&#xff0c;他会明显感觉到这个开机的速度呢&#xff0c;会特别慢&#xff0c;可能从六秒…

OSX-02-Mac OS应用开发系列课程大纲和章节内容设计

本节笔者会详细介绍下本系统专题的大纲&#xff0c;以及每个专题章节的组织结构。这样读者会有一个全局的概念。 在开始前还是在再介绍一下下面这个框架图&#xff0c;因为比较重要&#xff0c;在这里再冗余介绍一下。开发Apple公司相关产品的软件时&#xff0c;主要有两个框架…

kubernetes(K8S)学习(六):K8S之Dashboard图形界面

K8S之Dashboard图形界面 一、Dashboard简介二、k8s安装Dashboard(1)下载Dashboard镜像&#xff08;可选&#xff09;(2)根据yaml文件创建资源(3)查看资源(4)生成登录需要的token(5)使用火狐 / 搜狗浏览器访问&#xff08;个人用的搜狗&#xff09; 一、Dashboard简介 官网&…

【最新版RabbitMQ3.13】Linux安装基于源码构建的RabbitMQ教程

前言 linux环境 安装方式有三种&#xff0c;我们这里使用源码安装 Linux下rpm、yum和源码三种安装方式简介 个人语雀首发教程&#xff1a;https://www.yuque.com/wzzz/java/kl2zn22b42svsc6b csdn地址: https://blog.csdn.net/u013625306/article/details/137151862 安装版本…

Netty核心原理剖析与RPC实践6-10

Netty核心原理剖析与RPC实践6-10 06-粘包拆包问题&#xff1a;如何获取一个完整的网络包 本节课开始我们将学习 Netty 通信过程中的编解码技术。编解码技术这是实现网络通信的基础&#xff0c;让我们可以定义任何满足业务需求的应用层协议。在网络编程中&#xff0c;我们经常…

3D人体姿态估计项目 | 从2D视频中通过检测人体关键点来估计3D人体姿态实现

项目应用场景 人体姿态估计是关于图像或视频中人体关节的 2D 或 3D 定位。一般来说&#xff0c;这个过程可以分为两个部分&#xff1a;(1) 2D 视频中的 2D 关键点检测&#xff1b;(2) 根据 2D 关键点进行 3D 位姿估计。这个项目使用 Detectron2 从任意的 2D 视频中检测 2D 关节…

vue2处理跨域问题

vue中访问springboot中的RestController中的服务 &#xff08;vue.config.js不生效-CSDN博客&#xff09; 1、创建项目 使用vue init webpack my_frontend 创建vue项目 在HelloWorld.vue文件中添加内容&#xff1a; HelloWorld.vue 文件内容&#xff1a; <template>&…

LLMs之Mistral:Mistral 7B v0.2的简介、安装和使用方法、案例应用之详细攻略

LLMs之Mistral&#xff1a;Mistral 7B v0.2的简介、安装和使用方法、案例应用之详细攻略 导读&#xff1a;Mistral AI首个7B模型发布于2023年9月&#xff0c;在基准测试中超越Llama 2 13B&#xff0c;一下子声名大振。Mistral 7B v0.2对应的指令调优版本Mistral-7B-Instruct-v0…

JS数组练习

查找、筛选 Code <script>// 筛选>10的数组中元素var num1 [10, 2, 5, 0, 11, 121, 3, 0];var num2 [];var j 0;for (var i 0; i < num1.length; i) {// 法1// if (num1[i] > 10) {// num2[j] num1[i];// j;// }// 法2// if (num1[i] > 10) {/…

目前现货黄金行情技术分析

目前行情黄金可以投资吗&#xff1f;不论是黄金价格怎么波动&#xff0c;总是有投资者问这个问题&#xff0c;原因是他们搞不清现状&#xff0c;弄不懂当前的市场形势&#xff0c;对于技术分析和基本分析的方法也不甚了解&#xff0c;因此缺乏对未来行情判断的能力。下面我们就…

环境温度对测量平板有什么影响

环境温度可以对测量平板有影响。温度变化可以导致平板的尺寸发生变化。根据热膨胀原理&#xff0c;当环境温度升高时&#xff0c;平板的尺寸会扩大&#xff1b;当环境温度降低时&#xff0c;平板的尺寸会缩小。这种尺寸变化可能会导致测量结果的误差。因此&#xff0c;在测量平…

AI计算平台设计方案:901-基于3U VPX的图像数据AI计算平台

一、产品概述 设备基于3U VPX的导冷结构&#xff0c;集成FPGA接口预处理卡&#xff0c;GPU板卡、飞腾ARM处理卡&#xff0c;实现光纤、差分电口或者Camera link的图像接入&#xff0c;FPGA信号预处理&#xff0c;GPU AI计算&#xff0c;飞腾ARM的采集管理存储。 二、系统…

网安播报 | GitHub遭遇严重的供应链“投毒”攻击,影响GG平台

1、GitHub遭遇严重的供应链“投毒”攻击&#xff0c;影响GG平台 多年来&#xff0c;威胁行为者一直在使用多种策略、技术和程序 &#xff08;TTP&#xff09;&#xff0c;包括劫持 GitHub账户、分发恶意 Python 包、使用虚假的 Python 基础设施以及社会工程进行攻击&#xff0c…

jupyter lab使用虚拟环境

python -m ipykernel install --name 虚拟环境名 --display-name 虚拟环境名然后再启动jupyter lab就行了

计算机视觉的应用25-关于Deeplab系列语义分割模型的应用场景,以及空洞卷积的介绍

大家好&#xff0c;我是微学AI&#xff0c;今天给大家介绍一下计算机视觉的应用25-关于Deeplab系列语义分割模型的应用场景&#xff0c;以及空洞卷积的介绍。Deeplab是Google研发的一系列深度学习模型&#xff0c;主要用于图像语义分割任务&#xff0c;其在众多应用场景中展现出…

设计模式之代理模式精讲

代理模式&#xff08;Proxy Pattern&#xff09;也叫委托模式&#xff0c;是一个使用率非常高的模式&#xff0c;比如我们在Spring中经常使用的AOP&#xff08;面向切面编程&#xff09;。 概念&#xff1a;为其他对象提供一种代理以控制对这个对象的访问。 代理类和实际的主题…

mysql 常见运算符

学习了mysql数据类型&#xff0c;接下来学习mysql常见运算符。 2&#xff0c;常见运算符介绍 运算符连接表达式中各个操作数&#xff0c;其作用是用来指明对操作数所进行的运算。运用运算符 可以更加灵活地使用表中的数据&#xff0c;常见的运算符类型有&#xff1a;算…