又省时间又省心，微信小程序记住密码功能大揭秘

前言

微信小程序已经成为现代人生活中不可或缺的一部分，但是每次打开小程序都需要重新输入密码，这让人感到有些麻烦。那么，如何实现微信小程序记住密码呢？本文将为大家详细介绍。

---

实现思路

其实实现的核心思路非常简单，就是通过 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 方法进行登录操作。

---

实现效果