react 前端框架如何驱动企业数字化转型与创新发展
754
2023-11-13
微信小程序记住密码的功能简单几步实现
−目录实现思路实现源码
实现思路
其实实现的核心思路非常简单，就是通过 wx.setStorageSync() 与 wx.getStorageSync() 方法在登录后将登录的信息进行存储，当我们再次登录时读取存储的登录信息赋值到页面即可。
实现源码
.wxml 文件
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<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 文件
.wxss 文件
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
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);
}
实现效果
到此这篇关于微信小程序记住密码的功能
您可能感兴趣的文章:微信小程序账号密码登入和传值的实现方法小程序实现密码输入框微信小程序6位或多位验证码密码输入框功能的实现代码微信小程序实现密码显示与隐藏的睁眼闭眼功能
版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。
相关文章
发表评论
最近发表
推荐文章
热评文章
暂时没有评论，来抢沙发吧~