更新记录

1.0.0（2025-05-25） 下载此版本

点击获取验证码

平台兼容性

zoe-getVerifyCode

微信小程序

点击获取验证码 使用方式

    //在入口文件生成一个验证码前缀标识（如果用不到可删除，因为这个小程序没有登录，我们用前缀来标识用户，5分钟内重复请求后端api的返回同样的验证码）
let code_prefix = uni.getStorageSync('code_prefix');
if(!code_prefix){
    code_prefix = Math.floor(Math.random() * 900000) + 100000;
    uni.setStorageSync('code_prefix',code_prefix);
}

//=============请求验证码的页面================================
import getVerifyCode from '@/components/zoe-getVerifyCode/request.js'//注意路径是否正确

使用方式例如：
// 获取验证码
getVerifyCode() {
    //倒计时未结束，不能重新获取验证码
    if (that.countdown > 0) {
        uni.showToast({
            title: '请稍后再试',
            icon: 'none'
        })
        return
    }
    //获取验证码
    this.setCode();

},
//设置验证码
setCode(){
    let that = this;
    //================================获取验证码====================================
    try {
        let code_prefix = uni.getStorageSync('code_prefix');
        if(!code_prefix){
            //因为不需要用户登录，所以我们这里生成一个用户标识方便后端验证，比如说后端可以判断5分钟内同一个用户重复获取就给他返回一样的验证码
            code_prefix = Math.floor(Math.random() * 900000) + 100000;
            uni.setStorageSync('code_prefix',code_prefix);
        }

        //这里我先写死，大家把自己后端生成验证码的接口写好填好之后再取消以下方法的注释,删掉这两行
        that.verifyCode = Math.floor(Math.random() * 90000) + 10000;//写死随机一个5位数验证码
        that.startCountdown();//开启倒计时，防止重复获取验证码

        //访问后端获取验证码，需在common/request里面填好后端api
        // getVerifyCode({uid:code_prefix}).then(res=>{
        //  if (res.data) {
        //      that.verifyCode = res.data.code
        //      that.startCountdown()
        //  }else{
        //    uni.showToast({
        //      title: res.msg,
        //      icon: 'none',
        //      duration: 2000
        //    });
        //  }
        // })

        } catch (error) {
            // console.log(error)
            // 错误已经在 request.js 中统一处理
        }
    //=================================获取验证码end============================
},

// 开始倒计时
startCountdown() {
    this.countdown = 60
    this.timer = setInterval(() => {
        if (this.countdown > 0) {
            this.countdown--
        } else {
            //倒计时结束，可以再次获取验证码
            clearInterval(this.timer)
        }
    }, 1000)
},
},

需要的授权

无

备注

详细使用方式请参考pages/zoe-getVerifyCode/index.vue或者下载完整案例 使用案例如：https://blog.nanzhi.vip/?article_id=23&type=url