前言
微信小程序已经成为现代人生活中不可或缺的一部分,但是每次打开小程序都需要重新输入密码,这让人感到有些麻烦。那么,如何实现微信小程序记住密码呢?本文将为大家详细介绍。
实现思路
其实实现的核心思路非常简单,就是通过 wx.setStorageSync()
与 wx.getStorageSync()
方法在登录后将登录的信息进行存储,当我们再次登录时读取存储的登录信息赋值到页面即可。
实现源码
.wxml
文件
<form catchsubmit="formSubmit">
<view class="formItemBox">
<view>用户名</view>
<view>
<input bindinput="userInput" name="username" model:value="{{ formData.username }}" type="text"
placeholder="请输入用户名" />
</view>
</view>
<view class="formItemBox">
<view>密码</view>
<view>
<input bindinput="psdInput" name="password" model:value="{{ formData.password }}" type="password"
placeholder="请输入密码" />
</view>
</view>
<view class="psdBox">
<checkbox-group bindchange="onChange">
<checkbox value="1" checked="{{formData.checked}}" />
<label for="check">记住密码</label>
</checkbox-group>
</view>
<view class="bomBtnBox">
<button size="mini" formType="submit">提交</button>
</view>
</form>
.js
文件
Page({
data: {
formData: {
username: "",
password: "",
checked: false,
},
},
onLoad: function (options) {
// 赋值操作
this.setData({
'formData.username': wx.getStorageSync("formData").username,
'formData.password': wx.getStorageSync("formData").password,
'formData.checked': wx.getStorageSync('formData').checked
})
},
//获取用户名
userInput(e) {
this.setData({
'formData.username': e.detail.value
})
},
//获取密码
psdInput(e) {
this.setData({
'formData.password': e.detail.value
})
},
// 记住密码框事件方法
onChange(e) {
this.setData({
'formData.checked': e.detail.value.includes('1')
})
},
// 模拟登录事件方法
formSubmit(e) {
wx.showToast({
title: '登录成功',
duration: 1000
});
// 如果勾选"记住密码"选框则存储登录信息,反之则清空存储的信息
this.data.formData.checked == true ? wx.setStorageSync("formData", this.data.formData) : wx.setStorageSync("formData", "");
},
})
.wxss
文件
page {
font-size: 28rpx;
}
.formItemBox {
display: flex;
align-items: center;
padding: 20rpx 20rpx 8rpx 20rpx;
border-bottom: 1px solid gainsboro;
}
.formItemBox view:first-child {
width: 20%;
color: #646566;
}
.formItemBox view:last-child {
width: 80%;
}
.psdBox {
margin: 14rpx 20rpx 28rpx 20rpx
}
checkbox .wx-checkbox-input {
width: 28rpx;
height: 28rpx;
}
checkbox .wx-checkbox-input {
border-color: #409eff;
background-color: transparent;
transition: background-color .3s;
}
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
color: #fff;
background-color: #409eff;
}
.bomBtnBox {
margin: 20rpx;
}
.bomBtnBox button {
width: 100%;
padding: 6rpx 0rpx;
color: white;
background-color: rgb(64, 158, 255);
}
通过上面的代码我们实现了如下的效果:
- 在页面的
data
中定义一个formData
对象,包含username
、password
和checked
三个属性,分别用于存储用户名、密码和记住密码的状态; - 在页面的
onLoad
方法中,通过wx.getStorageSync
方法获取之前存储的登录信息,并将其赋值给formData
对象; - 在页面中定义
userInput
、psdInput
和 onChange 三个方法,分别用于获取用户名、密码和记住密码框的状态; - 在
formSubmit
方法中,模拟登录成功的操作,并根据记住密码框的状态,使用wx.setStorageSync
方法存储登录信息或清空存储的信息; - 在页面的
wxml
中,使用input
标签绑定userInput
和psdInput
方法,分别获取用户名和密码的输入值; - 使用
checkbox
标签绑定onChange
方法,获取记住密码框的状态; - 在提交按钮的点击事件中,调用
formSubmit
方法进行登录操作。
实现效果文章来源:https://www.toymoban.com/news/detail-533316.html
文章来源地址https://www.toymoban.com/news/detail-533316.html
到了这里,关于又省时间又省心,微信小程序记住密码功能大揭秘的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!