念念不忘必有回响是假,枕边书,怀中猫,意中人是假;爱而不得,山海不可平才是事实;
唠叨一会
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');
}
});
},
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
评论列表(1条)
差评