微信小程序高级开发(5):微信小程序手机验证码登录全栈开发指南

微信小程序便捷且安全的用户登录方式至关重要：如何实现微信小程序的手机验证码登录功能，涵盖前端小程序代码编写、样式设计，以及后端 PHP 代码实现，为开发者提供全面的技术参考。

微信小程序端代码（pages/login/login.wxml）

<view class="container">
  <form bindsubmit="formSubmit">
    <view class="form-item">
      <label>手机号码</label>
      <input type="number" name="phone" placeholder="请输入手机号码" />
    </view>
    <view class="form-item">
      <label>验证码</label>
      <input type="number" name="code" placeholder="请输入验证码" />
      <button bindtap="getCode" disabled="{{isCounting}}">{{countDownText}}</button>
    </view>
    <button formType="submit">登录</button>
  </form>
</view>

wxss

.container {
  padding: 20px;
  background-color: #f4f4f4;
  min-height: 100vh;
}

.form-item {
  margin-bottom: 20px;
}

.form-item label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.form-item input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

button {
  width: 100%;
  padding: 12px;
  background-color: #1aad19;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
}

button[disabled] {
  background-color: #ccc;
  cursor: not-allowed;
}

微信小程序端代码（pages/login/login.js）

Page({
  data: {
    isCounting: false,
    countDownText: '获取验证码',
    countdown: 60
  },
  getCode: function () {
    const phone = this.data.phone;
    if (!phone) {
      wx.showToast({
        title: '请先输入手机号码',
        icon: 'none'
      });
      return;
    }
    this.setData({
      isCounting: true,
      countDownText: '60s后重新获取'
    });
    let countdown = 60;
    const interval = setInterval(() => {
      countdown--;
      this.setData({
        countDownText: `${countdown}s后重新获取`
      });
      if (countdown === 0) {
        clearInterval(interval);
        this.setData({
          isCounting: false,
          countDownText: '获取验证码'
        });
      }
    }, 1000);
    wx.request({
      url: 'https://yourdomain.com/api/getCode', // 后端获取验证码接口地址，需替换为实际地址
      method: 'POST',
      data: {
        phone: phone
      },
      success: function (res) {
        if (res.data.code === 200) {
          wx.showToast({
            title: '验证码发送成功',
          });
        } else {
          wx.showToast({
            title: '验证码发送失败',
            icon: 'none'
          });
        }
      },
      fail: function (err) {
        console.error('获取验证码请求失败', err);
      }
    });
  },
  formSubmit: function (e) {
    const formData = e.detail.value;
    wx.request({
      url: 'https://yourdomain.com/api/login', // 后端登录接口地址，需替换为实际地址
      method: 'POST',
      data: formData,
      success: function (res) {
        if (res.data.code === 200) {
          wx.showToast({
            title: '登录成功',
          });
        } else {
          wx.showToast({
            title: '登录失败',
            icon: 'none'
          });
        }
      },
      fail: function (err) {
        console.error('登录请求失败', err);
      }
    });
  }
});

后端PHP代码（api/getCode.php）

<?php
session_start();
header('Content-Type: application/json');
$phone = isset($_POST['phone'])? $_POST['phone'] : '';
if (empty($phone)) {
    echo json_encode(['code' => 400,'message' => '手机号不能为空']);
    exit;
}
// 生成随机验证码
$code = str_pad(random_int(1, 999999), 6, '0', STR_PAD_LEFT);
// 将验证码和过期时间存入session，这里设定验证码有效期为10分钟
$_SESSION['captcha_' . $phone] = [
    'code' => $code,
    'expire_time' => time() + 600
];
echo json_encode(['code' => 200,'message' => '验证码发送成功']);
?>

后端PHP代码（api/login.php）

<?php
session_start();
header('Content-Type: application/json');
// 获取前端传来的数据
$phone = isset($_POST['phone'])? $_POST['phone'] : '';
$code = isset($_POST['code'])? $_POST['code'] : '';

if (empty($phone) || empty($code)) {
    echo json_encode(['code' => 400,'message' => '手机号或验证码不能为空']);
    exit;
}
// 从session中获取验证码信息
$captcha_info = isset($_SESSION['captcha_' . $phone])? $_SESSION['captcha_' . $phone] : null;

// 校验验证码是否存在及是否过期
if ($captcha_info && $captcha_info['expire_time'] >= time() && $captcha_info['code'] === $code) {
    // 验证成功后可以删除session中的验证码
    unset($_SESSION['captcha_' . $phone]);
    echo json_encode(['code' => 200,'message' => '登录成功']);
} else {
    echo json_encode(['code' => 401,'message' => '验证码不正确或已过期']);
}
?>

@漏刻有时