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

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

分享到 :
相关推荐

MUI上传图片案例9宫格图片多选删除

首先万恶的开头介绍一下LJ的MUI 真正彻底的跨平台开发,不是简单的跨iO...

新手uni-app纯手写微信小程序自定义标题栏适配全面/异形屏幕iphone x

爱上你这件事太妙了,三缄其口,却又四海生风,有亏盈,有枯荣唠叨一会作为一个新手我又学...

星宿UI V0.1-微信小程序:wordprss开源小程序支持激励视频流量主

看清了很多人,却不能随意拆穿;讨厌着很多人,却又不能轻易翻脸。有时候,生活就是要逼自...

网易云课堂 - uni-app实战仿糗事百科app开发-百度云网盘

uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码...

发表评论

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