uni-app框架微信小程序自动保存用户密码源码

念念不忘必有回响是假,枕边书,怀中猫,意中人是假;爱而不得,山海不可平才是事实;

uni-app框架微信小程序自动保存用户密码源码

唠叨一会

uni-app框架自动保存密码也是在实际中使用到的知识点,微信小程序用户可不用频繁输入账户密码;原理是uni.setStorage缓存,以及uni.clearStorage清楚密码,v-model获取输入框内容;

步骤

1.新建一个uni-app项目

2.添加2个字段,因为我们是有账户和密码两条数据,为了方便查找写在userinfo里面

data() {
	return {
		userinfo: {
			username: '',
			userpass: ''
		}
	}
},

3.添加2个输入框,且使用v-model绑定获取数值

<view class="text-area">
	<input class="fengrui" type="text"  placeholder="请输入账号" v-model="userinfo.username" />
	<input class="fengrui" type="password" placeholder="请输入密码" v-model="userinfo.userpass" />
</view>

4.添加登录按钮

<button class="rui-btn" @tap="fengrui()">登入</button>

点击触发uni.setStorage函数将获取的userinfo数据存起来

fengrui: function() {
	var that = this;
	console.log(this.userinfo)
	uni.setStorage({
		key: 'storage_key',
		data: this.userinfo,
		success: function() {
			console.log('success');
		}
	});
},

uni-app框架微信小程序自动保存用户密码源码

5.检测是否有历史密码

用户一次输入密码存为缓存后第二次进去需要判断是否有历史密码,如果有调用缓存,如果没有留空让用户输入

微信小程序发开触发函数

onLoad() {
	this.mima();
},

有历史密码则读取缓存内容赋值给输入框

mima: function() {
	var that = this;
	const value = uni.getStorageSync('storage_key');
	if (value != '') {
		console.log(value);
		that.userinfo.username = value.username;
		that.userinfo.userpass = value.username;
	} else {
		console.log('没有历史密码');
	}
},

6.清楚历史密码

添加清楚密码事件

<view class="clea" @tap="clea()">
	清除密码
</view>

函数清空指定key和输入框内容为空

clea:function(){
	var that = this;
	uni.clearStorage();
	that.userinfo.username = '';
	that.userinfo.userpass = '';
}

 

源码打包下载

链接: https://pan.baidu.com/s/17TMsusaiiOWP5mI72uSEyw 提取码: wy4v

uni-app框架微信小程序自动保存用户密码源码

原创文章,作者:枫瑞博客,如若转载,请注明出处:https://www.frbkw.com/3169/

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

星宿UI 官方文档上线:https://xs.frbkw.com/