更新记录
1.0.1(2025-05-25) 下载此版本
点击图片获取验证码,会先弹出激励视频广告,看完广告获取验证码。验证码进入倒计时,期间不可再次获取。查看实际使用案例:https://blog.nanzhi.vip/?article_id=23&type=url。 ps:需要小程序开通流量主功能并且申请激励广告id,否则激励广告功能不生效。如仅需要验证码功能,可移步下载:https://ext.dcloud.net.cn/plugin?id=23583
平台兼容性
Vue2 | Vue3 |
---|---|
× | × |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
× | × | √ | × | × | × | × |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 | 鸿蒙元服务 |
---|---|---|---|---|
× | × | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
× | × | × | × | × | × | × | × | × |
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'
//在onload初始化激励广告弹窗
if (wx.createRewardedVideoAd) {
this.videoAd = wx.createRewardedVideoAd({
adUnitId: 'adunit-dfa9d9f264b51ace'//你的激励广告id(小程序流量主创建的激励广告id)
})
this.videoAd.onLoad(() => {})
this.videoAd.onError((err) => {
console.error('激励视频光告加载失败', err)
})
// 监听广告关闭事件
this.videoAd.onClose(async (res) => {
// 用户点击了【关闭广告】按钮
if (res && res.isEnded) {
// 正常播放结束,可以下发奖励
this.setCode();
} else {
// 播放中途退出,不下发奖励
uni.showToast({
title: '请您完整观看广告,谢谢!',
icon: 'none',
duration: 2000
});
}
})
}
使用方式例如:
if (videoAd) {
videoAd.show().catch(() => {
// 失败重试
videoAd.load()
.then(() => videoAd.show())
.catch(err => {
console.error('激励视频 广告显示失败,直接获取验证码', err)
that.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============================
},
需要的授权
无
备注
详细使用方式请参考pages/zoe-get-code/index.vue或者下载完整案例 使用案例如:https://blog.nanzhi.vip/?article_id=23&type=url