微信小程序字节集图片验证码实现

常规的实现方法可以使用Image标签，通过Src指定一个图片地址即可显示验证码。

但是微信小程序的请求是没有Session的，如果将验证码存入Session，那么验证Session就会出错。

解决Session的本质在于Cookie，浏览器会存储，但是小程序不会。所以我们需要请求图片的同时将Response Head中的Set-Cookie获取出来，这样在登录验证Session的时候才可以。

上代码

获取验证码的方法：

getValidateCode(){//获取验证码
    var that = this;
    wx.request({
      url: '图片的地址 例如 xxx.jpg',
      method: "GET",
      responseType: 'arraybuffer', //返回类型为字节数组
      success: function (res) {
        const base64 = wx.arrayBufferToBase64(res.data); //转成Base64
        that.setData({
          validateCodeImg: "data:image/png;base64," + base64,
          cookie: res.cookies.length > 0 ? res.cookies[0]:null //获取返回SetCookie
        });
      },
      fail: function (err) {

      }
    })
  },

登录验证验证码

login(){ //登录
    var that = this;
    wx.request({
      url:  "登录地址Url",
      method: "POST",
      data: {
        username:"",  //用户名
        password:"",  //密码
        captcha: that.data.validateCode //验证码
      },
      header: {
        'content-type': 'application/x-www-form-urlencoded',
        'Accept': 'application/json',
        'Cookie': that.data.cookie//这里很重要，这里是从图片获取到的SessionID也是Cookie
      },
      dataType: 'json',
      success: function (res) {
        console.info(" ResData:", res.data);
      },
      fail: function (err) {

      }
    })
  }

验证码输入框绑定数据

bindValidateCodeInput: function (e) { //绑定验证码输入框获取数据
    this.setData({
      validateCode: e.detail.value
    })
},

点击图片切换验证码图片

changeValidateCode(){ //改变图片
    var that = this;
    this.getValidateCode();
  },

页面标签

<image style="width:150px;height:32px;" src="{{validateCodeImg}}" bindtap="changeValidateCode"></image>
<input bindinput="bindValidateCodeInput" value="{{validateCode}}" placeholder="输入验证码"></input>
<button bindtap="login">Login</button>

希望对你有所帮助。。。