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.hqwc.cn/news/586258.html

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

相关文章

zabbix图表时间与服务器时间不一致问题

部署完zabbix后&#xff0c;有时候会发现zabbix服务器的时间明明是对的&#xff0c;但是图标的时间不对&#xff0c;通过以下的配置可以快速解决。 登录zabbix-nginx容器 docker exec -u root -it docker-compose-zabbix-zabbix-web-nginx-mysql-1 bash修改php配置文件 vi /e…

2012年认证杯SPSSPRO杯数学建模B题(第一阶段)减缓热岛效应全过程文档及程序

2012年认证杯SPSSPRO杯数学建模 减缓热岛效应 B题 白屋顶计划 原题再现&#xff1a; 第一阶段问题   夏天的城市气温往往格外炎热&#xff0c;这被称为热岛效应。有专家提出&#xff0c;将城市建筑的屋顶漆成白色&#xff0c;减小对阳光的吸收率&#xff0c;可以使城市的气…

GROBID库文献解析

1. 起因 由于某些原因需要在大量的文献中查找相关内容&#xff0c;手动实在是太慢了&#xff0c;所以选择了GROBID库进行文献批量解析 2. GROBID介绍 GROBID是一个机器学习库&#xff0c;用于将PDF等原始文档提取、解析和re-structuring为结构化的XML/TEI编码文档&#xff0…

github 仓库 修改开源协议

记录一下如何修改协议。 然后commit到你想要的主干或者分支就可以了。

Linux 安装部署高性能缓存服务redis

Linux 系统安装Redis 5 注意事项&#xff1a; 下载Redis 文件包&#xff0c;并上传至linux服务上解压 tar -zxvf redis.tar安装&#xff1a; 编译 make PREFIX/usr/local/redis install配置&#xff1a; redis.conf daemonize yes bind 127.0.0.1 192.168.1.221 supervised…

为什么都说“一入Java深似海”?怎么打破这个魔咒

引言 在当今数字化时代&#xff0c;编程已经成为一项至关重要的技能。而在众多编程语言中&#xff0c;Java以其广泛的应用领域和强大的功能特性&#xff0c;吸引了无数开发者的目光。无论是Web开发、移动应用还是大数据处理&#xff0c;Java都发挥着举足轻重的作用。然而&…

【核心复现】同时考虑考虑孤岛与重构的配电网故障恢复运行策略

目录 主要内容 内容详情 1.问题引出 2.可控负荷 3.网络拓扑约束 4.算法流程 结果一览 1.原文结果 2.程序运行结果 下载链接 主要内容 该模型复现文章《同时考虑考虑孤岛与重构的配电网故障恢复运行策略》&#xff0c;以IEEE33配电网为分析对象&#xff0c;…

2024春算法训练3——数组与字符串

一、题解 1、A-[NOIP2013]记数问题_2024春算法训练3——数组与字符串 (nowcoder.com) 直接暴力用一个哈希表存每个数出现的次数&#xff0c;最坏的时间时间复杂度为7*10^7&#xff08;实际上比这个数要小&#xff09;&#xff1b;代码如下&#xff1a; #include<iostream…

记忆力考验游戏-第15届蓝桥第5次STEMA测评Scratch真题精选

[导读]&#xff1a;超平老师的《Scratch蓝桥杯真题解析100讲》已经全部完成&#xff0c;后续会不定期解读蓝桥杯真题&#xff0c;这是Scratch蓝桥杯真题解析第178讲。 如果想持续关注Scratch蓝桥真题解读&#xff0c;可以点击《Scratch蓝桥杯历年真题》并订阅合集&#xff0c;…

蓝桥杯第九届c++大学B组详细

目录 1.第几天 2.明码 3.乘积尾零 4.测试次数 5.递增三元组 6.日志统计 7.乘积最大 1.第几天 题目解析&#xff1a;这题是不是和以前有点印象&#xff0c;就是日期类但是是日期的减法。 #include <iostream> using namespace std;class Date { public: Date(in…

红酒:红酒的分类标准与市场细分

红酒的分类标准与市场细分是红酒产业中非常重要的概念。通过对红酒进行分类&#xff0c;可以更好地满足不同消费者的需求&#xff0c;提升红酒的市场份额和品牌影响力。 首先&#xff0c;红酒的分类标准可以根据不同的维度进行划分。常见的分类标准是根据葡萄酒的口感、香气、颜…

新生儿吃手指:家长应该知道的注意事项

引言&#xff1a; 新生儿吃手指是一个常见的现象&#xff0c;但对于许多父母来说&#xff0c;这可能会引起一些担忧和困惑。在本文中&#xff0c;我们将探讨新生儿吃手指的一些常见原因、可能的影响以及家长应该采取的注意事项&#xff0c;帮助父母更好地理解和应对这种行为。 …