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

一、登陆流程

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

流程图如下:

二、在uniapp项目中代码实现

实现逻辑:

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

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

html 复制代码
<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还停留在显示启动封面

html 复制代码
<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-PLUS
				setTimeout(() => {
                    //手动关闭App启动封面
					plus.navigator.closeSplashscreen()
				}, 1000)
				// #endif
			}
		}
	}
</script>

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

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

javascript 复制代码
//pages.json
	{
			"path": "pages/login/login",
			"style": {
				"navigationBarTitleText": "",
				"navigationStyle": "custom",
				"app-plus": {
					"bounce": "none",//页面回弹效果取消
					"animationType": "none", //关闭动画
					"animationDuration": "none" //关闭动画
				}
			}
		},
相关推荐
颜渊呐40 分钟前
uniapp中APPwebview与网页的双向通信
前端·uni-app
白杨木影子被拉长3 小时前
多状态映射不同样式(scss语法)
vue.js·uni-app
一念杂记3 小时前
免费开源!微信小程序商城源码,快速搭建你的线上商城系统!
微信小程序·uni-app
aklry9 小时前
uniapp三步完成生成一维码图片
uni-app
雪芽蓝域zzs19 小时前
uniapp 国密sm2加密
uni-app
打不着的大喇叭1 天前
uniapp的光标跟随和打字机效果
前端·javascript·uni-app
zengzehui1 天前
uniapp启动图被拉伸问题
uni-app
iOS阿玮1 天前
AppStore教你一招免备案的骚操作!
uni-app·app·apple
ModyQyW2 天前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
耶啵奶膘3 天前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app