微信小程序爬坑记之手机验证码登陆

前言

写一下小程序手机号登陆，获取验证码倒计时60秒的功能实现。

---

先看一下效果

需求

小程序登陆方式常见的有两种。微信一键登陆和手机号登陆。手机号登陆会有获取验证码的场景，这里记录一下。

代码

wxml

<!-- 手机号登陆 -->
<view class="page bg-white">
  <view class="content-box bg-white">
    <view class="login-box">
      <view class="phone bd-b">
        <input type="number" placeholder="请输入手机号" maxlength="11" value="{{ phone }}" bindinput="handlePhone" />
      </view>
      <view class="password bd-b row-between">
        <input type="number" placeholder="请输入验证码" value="{{ captcha }}" bindinput="handleGetCode" />
        <view class="get-code" wx:if="{{ !isWaiting }}" bind:tap="handleSendCode" disabled="{{ disabled }}">获取验证码</view>
        <view wx:else class="get-code">{{ waitSecond }}s</view>
      </view>
    </view>

    <view class="login row-center algin-center white weight6" bind:tap="handlelogin">
      登录
    </view>
  </view>
</view>

js

Page({
  data: {
    phone: '',
    captcha: '',
    waitSecond: 60, // 倒计时60s
    isWaiting: false
  },

  // 手机号
  handlePhone: (e) => {
    page.setData({
      phone: e.detail.value
    });
  },

  // 验证码
  handleGetCode: (e) => {
    page.setData({
      captcha: e.detail.value
    });
  },


  // 发送验证码
  handleSendCode: () => {
    const { phone } = page.data;
    if (!validate([
      {
        value: phone,
        method: [
          {
            name: 'required',
            message: '请输入手机号',
          },
          {
            name: 'isTel',
            message: '手机格式错误',
          },
        ]
      }
    ])) return;
    Auth.captcha(phone, 'LOGIN').then(resp => {
      if(resp.isOk()) {
        Tips.success('发送成功', 1000).then(() => {
          page.handleTime();
        });
      }
    });
  },

  // 计时器方法
  handleTime() {
    page.setData({
      isWaiting: true
    });
    let waitSecond = page.data.waitSecond;
    const interval = setInterval(() => {
      waitSecond--; 
      page.setData({
        waitSecond,
      });
      if (waitSecond <= 0) {
        clearInterval(interval);
        page.setData({
          isWaiting: false,
          waitSecond: 60
        });
      }
    }, 1000);
  },

  // 登陆
  handlelogin: () => {
    if (!page.validate()) return;
    const param = {
      phone: page.data.phone,
      captcha: page.data.captcha,
      scene: 'CAPTCHA'
    };
    Tips.loading('登陆中', 1000);
    Auth.login(param).then(resp => {
      Tips.loaded();
      if(resp.isOk()) {
        setTimeout(() => {
          Navigation.backPrePage('/pages/home/index');
        }, 2000);
      } else {
        Tips.error('验证码有误', 1000);
      }
    });
  },

  // 验证
  validate: () => {
    const { phone, captcha } = page.data;
    return validate([
      {
        value: phone,
        method: [
          {
            name: 'required',
            message: '请输入手机号',
          },
          {
            name: 'isTel',
            message: '手机格式错误',
          },
        ]
      },
      {
        value: captcha,
        method: 'required',
        message: '请输入验证码'
      }
    ]);
  }
}

data 中定义 waitSecond 值为60，isWaiting 是控制倒计时展示的，点击获取验证码时，起一个定时器，一秒钟减少1，当 waitSecond 小于0时，清除定时器，并把 waitSecond 重新设置为60，隐藏。剩下的是一些校验。

样式比较简单，不再贴代码。

总结

以上是对常见的手机号登录获取验证码场景的记录。