UNIAPP如何记住密码自动登录[u1]
开头暑假,8月份,之前的一个代码比赛打完了,暑假也打了一波CTF比赛,好像是一个很难的比赛,啥也没有,最近在挖洞,发点之前的简单的东西,积累小的东西,汇成大的东西,回报社会。振作起来了,坚决而迅速开发:UNIAPP是基于vue的框架:1.实现功能:实现基本的APP功能,也就是一次登录之后,再点开APP可以直接进入界面。2.实现方法:利用方法uni.setstorage存入内存,实现读写使用,当然存
开头
暑假,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’
然后就不会有登录界面一闪而过了。
更多推荐
所有评论(0)