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/578290.html

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

相关文章

接口自动化框架搭建(四):pytest的使用

1&#xff0c;使用说明 网上资料比较多&#xff0c;我这边就简单写下 1&#xff0c;目录结构 2&#xff0c;test_1.py创建两条测试用例 def test_1():print(test1)def test_2():print(test2)3&#xff0c;在pycharm中执行 4&#xff0c;执行结果&#xff1a; 2&#xff0…

DARTS-PT: RETHINKING ARCHITECTURE SELECTION IN DIFFERENTIABLE NAS

Rethinking Architecture Selection in Differentiable NAS 论文链接&#xff1a;https://arxiv.org/abs/2108.04392v1 项目链接&#xff1a;https://github.com/ruocwang/darts-pt ABSTRACT 可微架构搜索(Differentiable Neural Architecture Search, NAS)是目前最流行的网…

软件工程学习笔记14——案例解析篇

一、大型开源项目对软件工程的应用 以VS Code为例&#xff0c;看大型开源项目是如何应用软件工程的。 软件工程的核心&#xff0c;就是围绕软件项目开发&#xff0c;对开发过程的组织&#xff0c;对方法的运用&#xff0c;对工具的使用。 所以当我们去观察一个软件项目&#…

接口自动化框架搭建(八):pytest+allure+jenkins接入

1&#xff0c;安装allure插件 2&#xff0c;创建jenkins项目 怎么确定路径&#xff0c;可以查看工作空间&#xff0c;jenkins默认根目录就是工作空间 配置执行用例的命令&#xff0c;可以现在pycharm上试一下&#xff0c;然后在jenkins中配置&#xff1a; 把启动java服务的代…

【解決|三方工具】Obi Rope 编辑器运行即崩溃问题

开发平台&#xff1a;Unity 2021.3.7 三方工具&#xff1a;Unity资产工具 - Obi Rope   问题背景 使用Unity三方开发工具 - Obi Rope 模拟绳索效果。配置后运行 Unity 出现报错并崩溃。通过崩溃日志反馈得到如下图所示 这是一个序列化问题造成的崩溃&#xff0c;指向性为 Obi…

Vidmore Video Fix for Mac 视频修复工具

Vidmore Video Fix for Mac是一款功能强大且易于使用的视频修复工具&#xff0c;专为Mac用户设计。它凭借先进的视频修复技术&#xff0c;能够帮助用户解决各种视频问题&#xff0c;如视频文件损坏、无法播放、格式不支持等。 软件下载&#xff1a;Vidmore Video Fix for Mac v…

剑指Offer题目笔记21(计数排序)

面试题74&#xff1a; 问题&#xff1a; ​ 输入一个区间的集合&#xff0c;将重叠的区间合并。 解决方案&#xff1a; ​ 先将所有区间按照起始位置排序&#xff0c;然后比较相邻两个区间的结束位置就能知道它们是否重叠。如果它们重叠就将它们合并&#xff0c;然后判断合并…

Flutter 使用 AndroidStudio 给(Android 安卓)进行签名方法

一、使用 AndroidStudio 创建签名 使用 AndroidStudio 打开 Flutter项目中的 android 文件夹首次打开 AndroidStudio 会加载一会。菜单栏 &#xff1a; Build -> Generate Signed Bundle APK... 选中 APK -> Next点击Create new....下面按照需求填写即可- 文件夹选择 项…

c++初阶篇----string的底层模拟

string类的模拟 目录 string类的模拟功能介绍各功能的实现类的构造函数&#xff0c;拷贝构造函数&#xff0c;析构函数迭代器的实现string的内部容量访问成员函数string的修改成员函数string类的相关联函数string类的输入输出友元 汇总string功能的实现汇总测试代码 功能介绍 …

matlab及其在数字信号处理中的应用001:软件下载及安装

目录 一&#xff0c;matlab的概述 matlab是什么 matlab适用于的问题 matlab的易扩展性 二&#xff0c;matlab的安装 1&#xff0c;解压所有压缩文件 2&#xff0c;解压镜像压缩文件 3&#xff0c;运行setup.exe 4&#xff0c;开始安装 5&#xff0c;不要运行软件…

HTML网站的概念

目录 前言&#xff1a; 1.什么是网页&#xff1a; 2.什么是网站&#xff1a; 示例&#xff1a; 3.服务器&#xff1a; 总结&#xff1a; 前言&#xff1a; HTML也称Hyper Text Markup Language&#xff0c;意思是超文本标记语言&#xff0c;同时HTML也是前端的基础&…

Linux:详解TCP报头类型

文章目录 温习序号的意义序号和确认序号报文的类型 TCP报头类型详解ACK: 确认号是否有效SYN: 请求建立连接; 我们把携带SYN标识的称为同步报文段FIN: 通知对方, 本端要关闭了PSH: 提示接收端应用程序立刻从TCP缓冲区把数据读走RST: 对方要求重新建立连接; 我们把携带RST标识的称…