UNIAPP如何记住密码自动登录[u1]

开头

暑假,8月份,之前的一个代码比赛打完了,暑假也打了一波CTF比赛,好像是一个很难的比赛,啥也没有,最近在挖洞,发点之前的简单的东西,积累小的东西,汇成大的东西,回报社会。
振作起来了,坚决而迅速

开发:

在这里插入图片描述
UNIAPP是基于vue的框架:
1.实现功能:
实现基本的APP功能,也就是一次登录之后,再点开APP可以直接进入界面。
2.实现方法:
利用方法uni.setstorage存入内存,实现读写使用,当然存入sqlite里也是可以的。
3.实现工具:
HBuider 3.0++
4.开始:
写出一个即为简单的界面:
在这里插入图片描述

这个记住账号密码可以先不用管,暂时无关,默认自动登录:

登录框的逻辑:

<view class="input-box">
				<input class="in input-1" v-model="info.username" type="text"  placeholder="账 号" />
				<input class="in input-2" v-model="info.passwd"  type="text" placeholder="密 码" />
			</view>

动态绑定到了info数组中的username和passwd,把输入的账号密码,绑定到data中:
导出默认值中:

export default{
		data(){
			return{
				info:{
					username:'',
					passwd:''
				},
				rember:true
			}
		}
		//代码仅作示范,不完整
		}

在钩子函数中,用uni.getstoragesync获得存储的username和passwd,没存储的话,要自己输入,存储了的话,就直接取出来登录

export default{
		data(){
			return{
				info:{
					username:'',
					passwd:''
				},
				rember:true
			}
		},
		mounted() {
			const username = uni.getStorageSync('username');
			const passwd = uni.getStorageSync('passwd');
			
			let th = this.info; 
			
			if(username&&passwd){
				this.navigateto();
				th.username = username;
				th.passwd = passwd;
			}
			else{
				th.username="";
				th.passwd="";
			}
			
		}

然而,在点开APP后,登录界面会一闪而过,影响体验:
想办法消除这个效果,
在App.vue中的 onlauch() 函数中加入:

			//解除跳转时闪过的登录页
			let userinfo = uni.getStorageSync('username');
			if(!userinfo){
				uni.reLaunch({
						url:"/pages/login/login",
						success:()=>{
							//跳转完页面后再关闭启动页
							plus.navigator.closeSplashscreen();
						}
					})
			}
			else{
				
				 plus.navigator.closeSplashscreen(); //关闭启动页,进入首页
			}

根据是否有缓存账号密码,直接进行跳转,在这之前在manifest.json中关闭默认启动界面:
就是如图,splashscreen中属性都改为’false’

在这里插入图片描述
然后就不会有登录界面一闪而过了。

  • 4
    点赞
  • 33
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

F1gh4

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值