开发微信小程序获取手机验证码

效果图

wxml代码说明

wxml对应代码

<view class="infoItem">
          <van-cell-group border="{{ false }}">
            <van-field center clearable label="短信验证码" maxlength="6" placeholder="请输入验证码" border="{{ false }}" bind:change="inputCode"></van-field>
          </van-cell-group>
          <!-- 按钮请求 -->
          <view wx:if="{{ findpsw!=200 }}" bindtap="setCode" class="get">获取验证码</view>
          <!-- 验证倒计时 -->
          <view wx:else class="get countDown">
            请
            <van-count-down class="control-count-down" millisecond time="{{ 60000 }}" auto-start="{{ false }}" format="ss" bind:finish="finished" />
            秒后重试
          </view>
        </view>

js代码
这些注释都我写文章在csdn编辑框加的，原来注释不会这样写的

setCode() {//验证码获取请求
    request2({  //简单封装，主要是把请求相同的部分用变量代替，再拼接地址
      url: '/getCaptcha',//地址
      data: {//传的数据对象
        'phone': this.data.userBox.inputUserName;//传的手机号
      },
      method: "get"
    })
      .then((res) => {
        if (res.data.code == 200) {
          this.setData({
            findpsw: res.data.code;//这个wx:if wx:else 用到的变量，就是根据状态值来转换
          });
          this.start(); //触发开始计时方法
        }
        wx.showModal({ //模态框
          title: res.data.msg //弹窗内容
        });
      });
  },
  start() {//获取验证码倒计时 ，具体的这个需要看看vant文档，这个方法之前我这样用是没毛病的，供参考啦
    const countDown = this.selectComponent('.control-count-down');
    countDown.start();
  },

  finished() {//倒计时结束 这个在vant组件倒计时结束自动触发的
    this.setData({
      findpsw: null;//这里赋null，就可以重新显示获取验证码，可以再次获取
    });
  },