5.3. 获取手机短信验证码

本教程最新版为 2.1,当前版本已放弃维护,请阅读最新版本!

获取手机验证码

接着上一节,我们已经获取了图片验证码,现在需要输入正确的验证码,给目标手机发送短信验证码。

修改代码

用户输入图片验证码需要依次执行如下逻辑:

  1. 判断用户是否输入验证码,没有输入给出提示;
  2. 我们已经存储了图片验证码的有效期,如果验证码已经过期则重置整个流程;
  3. 用户输入验证码后,请求接口,验证码错误提示用户,并自动重新获取一个验证码图片;
  4. 输入正确的验证码后,记录下来短信验证码相关的信息。

src/pages/auth/register.wpy

.
.
.
    data = {
      .
      .
      .
      // 表单错误
      errors: {},
      // 短信验证码 key 及过期时间
      verificationCode: {}
    }
    // 重置注册流程,初始化 data 数据
    resetRegister() {
      this.captchaModalHidden = true
      this.phoneDisabled = false
      this.captcha = {}
      this.verificationCode = {}
      this.errors = {}
    }
    .
    .
    .
    methods = {
      .
      .
      .
      // 响应获取图片验证...

本文章首发在 LearnKu.com 网站上。

为了保证课程的高品质,我们需要对课程进行收费。付费后 才能观看剩余内容。 购买

上一篇 下一篇
《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
贡献者:1
讨论数量: 7

d1270469522
验证码错误,不提示
0 个点赞 | 8 个回复 | 问答 | 课程版本 2.0
fourn
本章关于图片验证码过期时间验证需要注意的一个问题
0 个点赞 | 4 个回复 | 分享 | 课程版本 5.5
heibai_2018
this.$set 这个是什么语法
0 个点赞 | 2 个回复 | 分享 | 课程版本 2.0
this.resetRegister () 这个函数在哪定义的呀?
0 个点赞 | 2 个回复 | 问答 | 课程版本 5.5
Flourishing
老师,为什么我一直报这个错误.
0 个点赞 | 2 个回复 | 问答 | 课程版本 5.5
lianglunzhong
请问如何在微信开发者工具中修改数据的过期时间?
0 个点赞 | 1 个回复 | 问答 | 课程版本 5.5