前言

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

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

功能说明

图形验证码的使用场景很多，很多需要考虑安全的场合下都需要使用图形验证码来屏蔽机器人的自动化、批量操作；
本例演示2个简单的功能点：

  1. 小程序上显示图形验证码，点击更换验证码图片；
  2. 输入人眼识别的验证码，然后判断用户输入的验证码和图片上显示的是否一致

效果演示

图形验证码 - 图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="{{code}}" bindinput="codeChange" />
  7.         </view>
  8.         <view class="weui-cell__ft">
  9.           <image bindtap="changePic" class="iconScan" src="{{ picurl }}"></image>
  10.         </view>
  11.       </view>
  12.     </view>
  14.     <view class="weui-btn-area">
  15.       <button class="weui-btn" type="primary" bindtap="check">校验输入是否正确</button>
  16.     </view>
  17.   </view>
  18. </view>

js代码

  1. const WXAPI = require('apifm-wxapi')
  2. WXAPI.init('gooking')
  4. Page({
  5.   data: {
  6.     key: Math.random(),
  7.     picurl: undefined,
  8.     code: undefined
  9.   },
  10.   onLoad: function (options) {
  12.   },
  13.   onShow: function () {
  14.     this.changePic()
  15.   },
  16.   changePic(){
  17.     const _key = Math.random()
  18.     this.setData({
  19.       code: null,
  20.       key: _key,
  21.       picurl: WXAPI.graphValidateCodeUrl(_key)
  22.     })
  23.   },
  24.   codeChange(e){
  25.     this.setData({
  26.       code: e.detail.value
  27.     })
  28.   },
  29.   check() {
  30.     if (!this.data.code){
  31.       wx.showToast({
  32.         title: '验证码不能为空',
  33.         icon: 'none'
  34.       })
  35.       return
  36.     }
  37.     WXAPI.graphValidateCodeCheck(this.data.key, this.data.code).then(res => {
  38.       console.log(res)
  39.       if (res.code == 0) {
  40.         wx.showToast({
  41.           title: '输入正确',
  42.           icon: 'success'
  43.         })
  44.       } else {
  45.         wx.showToast({
  46.           title: res.msg,
  47.           icon: 'none'
  48.         })
  49.         this.changePic()
  50.       }
  51.     })
  52.   }
  53. })

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

总结

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

  1. WXAPI.graphValidateCodeUrl(key)
  2. WXAPI.graphValidateCodeCheck(key, code)

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

《apifm-wxapi使用说明》

本案例Demo代码下载：

《apifm-wxapi使用Demo程序》

期待你的进步！
感谢！