微信小程序实现随机验证码登录功能

一、首先放一下效果图

二、WXML

<view class='yanzhengma'>
  <text class='left'>{[code]}</text>
  <text class='right' bindtap='nextOne'>换一张</text>
</view>

三、CSS

.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;
}
 

 四、JS

Page({
  
  data: {
  
  },
  
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
  //刚进入页面随机先获取一个
    this.createCode()
  
  },