快捷導(dǎo)航

微信小程序記住密碼的功能簡(jiǎn)單幾步實(shí)現(xiàn)

更新時(shí)間：2023年01月20日 15:47:31 作者：水星記_

軟件中的“記住密碼”選框不知道大家平時(shí)會(huì)不會(huì)勾選，反正對(duì)于一個(gè)重度懶癌患者的我來(lái)說(shuō)就沒(méi)有不勾選的時(shí)候，畢竟隔一段時(shí)間就重新輸入一遍難記又難輸?shù)馁~號(hào)密碼，想想就讓人頭皮發(fā)麻。今天教大家用代碼在微信小程序中實(shí)現(xiàn)這個(gè)簡(jiǎn)單的小功能

實(shí)現(xiàn)思路

其實(shí)實(shí)現(xiàn)的核心思路非常簡(jiǎn)單，就是通過(guò) wx.setStorageSync() 與 wx.getStorageSync() 方法在登錄后將登錄的信息進(jìn)行存儲(chǔ)，當(dāng)我們?cè)俅蔚卿洉r(shí)讀取存儲(chǔ)的登錄信息賦值到頁(yè)面即可。

實(shí)現(xiàn)源碼

.wxml 文件

<form catchsubmit="formSubmit">
  <view class="formItemBox">
    <view>用戶(hù)名</view>
    <view>
      <input bindinput="userInput" name="username" model:value="{{ formData.username }}" type="text"
        placeholder="請(qǐng)輸入用戶(hù)名" />
    </view>
  </view>
  <view class="formItemBox">
    <view>密碼</view>
    <view>
      <input bindinput="psdInput" name="password" model:value="{{ formData.password }}" type="password"
        placeholder="請(qǐng)輸入密碼" />
    </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
    })
  },
  //獲取用戶(hù)名
  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
    });
    // 如果勾選"記住密碼"選框則存儲(chǔ)登錄信息，反之則清空存儲(chǔ)的信息
    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);
}

實(shí)現(xiàn)效果