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

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

    分享到 :
    相关推荐

    Mui实战-仿猫眼电影 UI设计编写后台数据连接MUI项目源码

    Mui实战-仿猫眼电影UI设计编写后台数据连接MUI项目源码软件概述:猫眼,不[&h...

    【5.23修复白线】 HBuilder日历日程源码 MUI 日历日程插件,仿钉钉日历日程

    HBuilder日历日程源码公司项目移植作品HBuilder日历日程源码这个总[&h...

    uni-app 自定义导航菜单结合轮播滑动变色

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

    uni-app 实战制作抖音短视频多端APP 百度网盘下载

    “如果有一天你想起来了我对你的好,我希望你别哭,也许使我们认识的太早了”唠叨一会[&...

    发表评论

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