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

最新推荐文章于 2025-12-22 21:56:17 发布

原创

最新推荐文章于 2025-12-22 21:56:17 发布 · 1.9k 阅读

收录于

常规的实现方法可以使用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:"",  //密码