微信小程序忘记密码如何找回

本文介绍了一款小程序中实现的密码找回与修改功能,通过验证用户输入的学号及绑定邮箱来确保账户安全,并利用邮件验证码完成密码的重置过程。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

现在很多应用都需要用户设置密码,那么密码多了就容易记混容易忘,那么我们的小程序设计了用户忘记密码时快速找回的方法,

例如在以下图中点击忘记密码,就会进入到找回密码的第一步。


找回密码第一步


以下为找回密码的第一步示例代码

//获取应用实例
const app = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
  
  },

  formSubmit:function(e){

    console.log(e.detail.value.no);
    console.log(e.detail.value.email);
    var student = wx.getStorageSync('student');
    var no = student.no;
    console.log(no);
    var email = student.email;
    console.log(email);


    if (e.detail.value.email != student.email) {
      wx.showToast({
        title: '输入邮箱与绑定邮箱不一致',
        icon: 'none',
        duration: 2000
      })
    }else{
    // var no = this.data.student.no;
    // console.log(no);
    wx.request({
      url: app.globalData.url.forgotpwd,
      data: {
        // no: no,
        no: e.detail.value.no,
        email: e.detail.value.email
      },
      header: {
        'content-type': 'application/json' // 默认值
      },

      success: (res) => {
        console.log(res.data);
        wx.showToast({
          title: '下一步',
          icon: 'success',
          duration: 2000
        })
          setTimeout(function () {
          wx.redirectTo({
            url: "../getpwdtwo/getpwdtwo",
          })
        },2000)
      }
    });
    }
  },

在第一步中输入学号和已经绑定的邮箱即可进行下一步操作


输入新的密码和邮件中的验证码点击提交即可修改密码成功

以下为修改密码第二步的示例代码

//获取应用实例
const app = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  formSubmit: function (e){
    // console.log(e.detail.value.pwd);
    // console.log(e.detail.value.validcode);

    var student = wx.getStorageSync('student');
    var no = student.no;
    var pwd = e.detail.value.pwd;
    var validcode = e.detail.value.validcode;
    console.log(no);
        wx.request({
          url: app.globalData.url.initpassword,
          data: {
            no: no,
            pwd: pwd,
            validcode: validcode,
          },
          header: {
            'content-type': 'application/json' // 默认值
          },
          success: (res)=> {
            console.log(res.data);
            wx.showToast({
              title: '修改密码成功',
              icon: 'success',
              duration: 2000
            })
            setTimeout(function () {
              wx.redirectTo({
                url: "../login/login",
              })
            },2000)
            // console.log(res);
          }  
        });
  },
微信小程序忘记密码的页面通常涉及到用户输入邮箱、手机号码以及找回密码的验证流程。以下是一个基本的示例代码片段,展示如何创建一个简单的“忘记密码”页面: ```html <!-- forget_password_wx.vue --> <template> <view class="container"> <input type="text" placeholder="请输入邮箱/手机号" v-model="emailOrPhone" /> <button @click="sendResetCode">获取验证码</button> <view>{{ resetCodeMessage }}</view> <!-- 显示验证码信息 --> <input type="password" placeholder="输入验证码" v-model="resetCode" /> <button @click="resetPassword">重置密码</button> <view v-if="showError">{{ errorMessage }}</view> <!-- 显示错误信息 --> </view> </template> <script> export default { data() { return { emailOrPhone: '', resetCode: '', resetCodeMessage: '', showError: false, errorMessage: '' }; }, methods: { sendResetCode() { // 这里模拟发送验证码,实际应用中会通过API请求 if (this.emailOrPhone) { this.resetCodeMessage = '验证码已发送,请查收'; } else { this.showError = true; this.errorMessage = '请输入有效的邮箱或手机号'; } }, resetPassword() { // 验证码和输入是否一致,然后重置密码 if (!this.showError && this.resetCode === 'your_valid_code') { this.$emit('resetPasswordSuccess', { newPassword: 'new_password' }); // 触发自定义事件,进一步处理 } else { this.showError = true; this.errorMessage = '验证码不正确,请重新输入'; } } } }; </script> <style scoped> .container { display: flex; flex-direction: column; justify-content: center; align-items: center; } </style> ``` 这个代码只是一个简化的版本,实际的项目中还需要添加更多的错误处理、用户体验优化和后端接口交互。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值