Wechat applet development realizes verification code generation

Wechat applet development realizes verification code generation

problem background

In the development and learning process of small programs and various applications, generating verification codes is a very common scenario, such as the home page login page. This article will introduce two methods for generating verification codes during the development of WeChat applets, direct string display and image component loading base64 encoded strings.

problem analysis

The renderings are as follows:

The core code is as follows:

<!-- 字符串方式实现验证码-->
  <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>

problem solved

Not much to say, directly on the code, the complete code is as follows.
(1) index.js file, the code is as follows:

// 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 file, the code is as follows:

<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 file, the code is as follows:

/* 设置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;
}

conclusion of issue

This article introduces two methods for generating verification codes in the WeChat applet development process, direct string display and image component loading base64 encoded strings. Interested students can further study in depth.