博客

微信小程序开发实现验证码生成

问题背景

在小程序和各类应用开发和学习过程中，生成验证码是一个很常见的场景，比如首页登录页面等。本文将介绍微信小程序开发过程生成验证码的两种方案，直接字符串显示和image组件加载base64编码字符串的方式。

问题分析

效果图如下：

核心代码如下：

<!-- 字符串方式实现验证码-->
  <view class="inputRow1">
    <View class="codeTitle">图形验证码</View>
    <input type="text" model:value="{{userPass}}" placeholder="验证码" class="validate_number"></input>
    <view class='yanzhengma'>
      <text class='left'>{{validateCode}}</text>
      <!-- <text class='right' bindtap='huanyizhang'>换一张</text> -->
    </view>
  </view>

<!-- basecode64格式生成验证码-->
  <view class="inputRow1">
    <View class="codeTitle">图形验证码</View>
    <input type="text" model:value="{{userPass}}" placeholder="验证码" class="validate_number"></input>
    <view class='yanzhengma'>
      <image class='fr' src="data:image/png;base64,{{validateImg}}"></image>
    </view>
  </view>

问题解决

话不多说，直接上代码，完整代码如下。

（1）index.js文件，代码如下：

// pages/healdata/healthydata.ts
Page({
  /**
   * 页面的初始数据
   */
  data:{
    code:"0",
    location:[],
    imageUrl: "https://profile-avatar.csdnimg.cn/default.jpg!0",
    userName:"",
    userPass:"",
    item: {
      index: 0,
      msg: 'this is a template',
      time: '2016-06-18'
    },
    // 默认的字符串验证码值
    validateCode:"3721",
    // 默认的base64编码值
    validateImg:"/9j/4AAQSkZJRgABAgAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAUADwDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD1dpdsoAyQeo7j3x/n/HktA8ZQS2NhFqN8j38+4FVTkkuyqDtGFPT8MH69Q5bPJO1euece/wDnnkGvOhGg+FTHykOX37toyH83buz67ePpSrTlF3XZ/oc3KdtquqNaC2MARhcXEcbBgcgHOSPQ8CmajqE8BstjKWmuo4GBOQVbOSMd+PfrVbWY38q1mt0eXyLqOby1GWYA9AB1PP8AOqs99Bq9zpyWDNL5Fwk0p2MFjC5PJI6nt+VZ1KjTavrpY3UElob1jf216JtkzN5MphZssoDDqO3tzVZ/EFhDYX120rGG0DLNk4O9eqruOCTnA9TisTV7q60PVJrq2SYnUIPJHlJuP2lThM5HTacYHXniptR0GW58CyaJCqJcRwjAGTvcEOQN395h6jGemK0hUlKXK+m/6GcUnKz2K7ar4wOnLqbaZppt/vfY98n2ox5+6T03Y56f8BzxXR2Go2N7p9vdwqHhnQSIcKSAeoOOMg5BHbFcp/wn2nfYgwjuBqv3PsIRvM8zONpOMdT1647Z4rW8N6W2leHLGzmlAlWMs4ZcbWZixHGQcE4znnFbNnROnpqrG9dfuZFdP4s5HY1FcMQyMMLvQE47k5oopS6mMOgnlgWwfJywJxnjggf1pswwSSSSGK8+3/66KKllrcInYyqM8lhyOtSwxiVQzM2WYqTnqMZoopoUijf6ba30LRXMZdY5VZCGKsrDOGDDBB46g+tWVuJVGFbHrx1oopXK30Z//9k="
  },

  onLoad() {
    this.getValidateCode();
  },

  getValidateCode: function() {
    var that = this;
    wx.request({
      url: 'http://************************ ',
      success: function(res) {
        console.log(res)
        console.log(res.data.imageCode)
        that.setData({
          validateImg: res.data.imageCode
        });
      }
    })
  },

  /* 登录校验操作 */
  login: function () {
    if (this.data.userName === "baorant" && this.data.userPass === "123123") {
      wx.navigateTo({
        url: '/pages/index2/index',
        success: function(res) {
          console.log('router1 success');
        },
        fail: function(res) {
          console.log('router1 fail');
          console.log(res)
        }
      })
    } else {
      wx.showToast({
        title: '账号密码错误',
        icon: 'none'
      })
    }
  },
})

(2)index.wxml文件，代码如下：

<view class="container">
  <view class="title">登录页面测试</view>
  <view class="inputRow">
    <View>账号</View>
    <input type="text" model:value="{{userName}}" placeholder="请输入账号" class="phone_number"></input>
  </view>

  <view class="inputRow1">
    <View>密码</View>
    <input type="text" model:value="{{userPass}}" placeholder="请输入密码" class="phone_number"></input>
  </view>

<!-- 字符串方式实现验证码-->
  <view class="inputRow1">
    <View class="codeTitle">图形验证码</View>
    <input type="text" model:value="{{userPass}}" placeholder="验证码" class="validate_number"></input>
    <view class='yanzhengma'>
      <text class='left'>{{validateCode}}</text>
      <!-- <text class='right' bindtap='huanyizhang'>换一张</text> -->
    </view>
  </view>

<!-- basecode64格式生成验证码-->
  <view class="inputRow1">
    <View class="codeTitle">图形验证码</View>
    <input type="text" model:value="{{userPass}}" placeholder="验证码" class="validate_number"></input>
    <view class='yanzhengma'>
      <image class='fr' src="data:image/png;base64,{{validateImg}}"></image>
    </view>
  </view>

  <button class="buttonStyle" type="primary" bindtap="login">登录</button>
</view>

<template name="msgItem">
  <view class="templateItem">
    <text> {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>

<template is="msgItem" data="{{...item}}" />

（3）index.wxss文件，代码如下：

/* 设置swiper组件的宽高 */
.swiper{
  width: 100%;
  height: 600rpx;
}
/* 设置swiper组件里面图片的宽高 */
.image{
  width: 100%;
  height: 600rpx;
}

.container{
  height: 100%;
  display: flex;
  flex-direction: column;
  margin: 0 80rpx;
  align-items: flex-start;
  font-size: small;
}

.title{
  align-self: center;
  font-size: x-large;
  margin-top: 50rpx;
}

.inputRow{
  margin-top: 150rpx;
  display: flex;
  flex-direction: row;
  padding-bottom: 20rpx;
  border-bottom: .5px solid rgba(0, 0, 0, 0.1);
}

.inputRow1{
  height: 120rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  border-bottom: .5px solid rgba(0, 0, 0, 0.1);
}

.codeTitle{
  display: flex;
  flex-direction: row;
  width: 300rpx;
}

.phone_number{
  margin-left:40rpx;
}

.validate_number{
  margin-left:40rpx;
}

.content1{
  /* text-align: center; */
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 10rpx;
}

.buttonStyle{
  margin-top: 50rpx;
}

.place{
  font-style: italic;
}

.templateItem{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.yanzhengma {
  height: 100rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
 
.yanzhengma .left {
  font-family: Arial;
  font-style: italic;
  font-weight: bold;
  border: 0;
  letter-spacing: 3px;
  font-size: 18px;
  background-color: #ccc;
  padding: 10rpx;
  margin-right: 20rpx;
  color: blue;
}

.fr{
  height: 80rpx;
  width: 100rpx;
  margin-right: 20rpx;
}

问题总结

本文介绍了微信小程序开发过程生成验证码的两种方案，直接字符串显示和image组件加载base64编码字符串的方式，有兴趣的同学可以进一步深入研究。