前言

本教程是基于 “apifm-wxapi” 模块，教你快速实现小程序开发，所以你可能需要先了解以下知识点：

《创建 HelloWorld 项目》
《使用 “apifm-wxapi” 快速开发小程序》
《免费注册开通后台，获得专属域名》

功能说明

很多安全场合，都需要使用到短信验证码功能，来确保操作者是本人；
一般app都会使用 “手机号码 + 短信验证码” 的方式来实现用户注册 / 登录；
当忘记密码的时候，一般也会使用 “手机号码 + 短信验证码” 来重置登录密码；

所以，本例就带大家来编写一个可发送验证码、收到验证码后输入正确的验证码进行校验是否正确的微信小程序

准备工作

  1. 申请短信验证码发送通道
    本案例展示的是真实发送手机短信验证码，所以需要你先开通短信通道，目前有很多平台都可以申请（免费试用）短信通道；“apifm-wxapi” 支持以下短信运营商，你可前往注册账号后一般即可获得试用的免费体验短信条数：阿里云、腾讯云、示远科技、赛邮·云通讯、创瑞、云之讯、八米科技、上海助通
    有特殊需求，可留言我们为你增加新的短信运营商的支持
  2. 回顾 “图形验证码” 教程
    为安全性考虑，防止短信机器人进行短信轰炸，正如现有很多 app 的做法一样，在获取短信验证码之前，你需要先手动填入一个图形验证码；只有你填写的图形验证码是正确的，才会下发验证码短信至你填写的手机号码
    《小程序图形验证码输入校验例子》

后台配置

开启 “短信验证码” 模块

登录 “第一步” 注册的后台，左侧菜单 —> 工厂设置 —> 模块管理

找到 “短信验证码” 模块，点击 “启用模块” ，然后 F5 刷新一下后台界面，你将可以看到新的菜单： “短信设置” -> “验证码设置”；

配置短信通道

点击上面的 “验证码设置” 菜单，根据你申请的短信通道的运营商，点击进入进行配置；
正确配置后，你即可以继续往下的章节，体验发送短信了；

查看短信发送记录

左侧菜单 “短信设置” -> “短信记录” ，详细记录了每一次获取短信验证码的短信发送记录，以备后续有需要的时候进行查询；

小程序实现

效果演示

短信验证码例子 - 图1

wxml代码

  1. <view class="page">
  2.   <view class="page__bd">
  3.     <view class="weui-cells weui-cells_after-title">
  4.       <view class="weui-cell ">
  5.         <view class="weui-cell__bd">
  6.           <input class="weui-input" type="number" placeholder="请输入手机号码" value="{{mobile}}" bindinput="mobileChange" />
  7.         </view>
  8.       </view>
  9.       <view class="weui-cell ">
  10.         <view class="weui-cell__bd">
  11.           <input class="weui-input" type="number" placeholder="请输入右侧验证码" value="{{piccode}}" bindinput="piccodeChange" />
  12.         </view>
  13.         <view class="weui-cell__ft">
  14.           <image bindtap="changePic" class="iconScan" src="{{ picurl }}"></image>
  15.         </view>
  16.       </view>
  17.       <view wx:if="{{smsCodeSend}}" class="weui-cell ">
  18.         <view class="weui-cell__bd">
  19.           <input class="weui-input" type="number" placeholder="输入短信验证码" value="{{code}}" bindinput="codeChange" />
  20.         </view>
  21.       </view>
  22.     </view>
  24.     <view class="weui-btn-area">
  25.       <button wx:if="{{!smsCodeSend}}" class="weui-btn" type="primary" bindtap="get">获取短信验证码</button>
  26.       <button wx:if="{{smsCodeSend}}" class="weui-btn" type="warn" bindtap="check">校验输入是否正确</button>
  27.     </view>
  28.   </view>
  29. </view>

js代码

  1. const WXAPI = require('apifm-wxapi')
  2. WXAPI.init('gooking')
  4. Page({
  5.   data: {
  6.     key: Math.random(),
  7.     picurl: undefined,
  8.     mobile: undefined,
  9.     piccode: undefined,
  10.     code: undefined,
  11.     smsCodeSend: false, // 短讯是否已发送
  12.   },
  13.   onLoad: function (options) {
  15.   },
  16.   onShow: function () {
  17.     this.changePic()
  18.   },
  19.   changePic(){
  20.     const _key = Math.random()
  21.     this.setData({
  22.       code: null,
  23.       key: _key,
  24.       picurl: WXAPI.graphValidateCodeUrl(_key)
  25.     })
  26.   },
  27.   piccodeChange(e){
  28.     this.setData({
  29.       piccode: e.detail.value
  30.     })
  31.   },
  32.   codeChange(e){
  33.     this.setData({
  34.       code: e.detail.value
  35.     })
  36.   },
  37.   mobileChange(e){
  38.     this.setData({
  39.       mobile: e.detail.value
  40.     })
  41.   },
  42.   get() {
  43.     if (!this.data.mobile){
  44.       wx.showToast({
  45.         title: '手机号码不能为空',
  46.         icon: 'none'
  47.       })
  48.       return
  49.     }
  50.     if (!this.data.piccode){
  51.       wx.showToast({
  52.         title: '图形验证码不能为空',
  53.         icon: 'none'
  54.       })
  55.       return
  56.     }
  57.     WXAPI.smsValidateCode(this.data.mobile, this.data.key, this.data.piccode).then(res => {
  58.       console.log(res)
  59.       if (res.code == 0) {
  60.         wx.showToast({
  61.           title: '短信已发送',
  62.           icon: 'success'
  63.         })
  64.         this.setData({
  65.           smsCodeSend: true
  66.         })
  67.       } else {
  68.         wx.showToast({
  69.           title: res.msg,
  70.           icon: 'none'
  71.         })
  72.         this.changePic()
  73.       }
  74.     })
  75.   },
  76.   check() {
  77.     if (!this.data.mobile){
  78.       wx.showToast({
  79.         title: '手机号码不能为空',
  80.         icon: 'none'
  81.       })
  82.       return
  83.     }
  84.     if (!this.data.code){
  85.       wx.showToast({
  86.         title: '验证码不能为空',
  87.         icon: 'none'
  88.       })
  89.       return
  90.     }
  91.     WXAPI.smsValidateCodeCheck(this.data.mobile, this.data.code).then(res => {
  92.       console.log(res)
  93.       if (res.code == 0) {
  94.         wx.showToast({
  95.           title: '输入正确',
  96.           icon: 'success'
  97.         })
  98.       } else {
  99.         wx.showToast({
  100.           title: res.msg,
  101.           icon: 'none'
  102.         })
  103.       }
  104.     })
  105.   }
  106. })

WXAPI.init(‘gooking’) 这句代码是将你的小程序链接到你的后台，其中 gooking 这个是你的专属域名(请查看前言中关于专属域名的章节说明)；

总结

本案例主要使用了 apifm-wxapi 的以下2个方法：

  1. WXAPI.smsValidateCode(mobile, key, picCode)
  2. WXAPI.smsValidateCodeCheck(mobile, code)

如果后台不开启图形验证码校验的话，第一个方法的 2，3 两个参数是可以不传的，只是这样的话，要慎用，防止短信轰炸

关于 apifm-wxapi 更多的使用方法：

《apifm-wxapi使用说明》

本案例Demo代码下载：

《apifm-wxapi使用Demo程序》

期待你的进步！
感谢！