配置参数

以下为可选配置参数:

参数 类型 说明 默认值 可选值
lang 字符串 设置验证界面文字的语言 zh-cn zh-cn、zh-tw、en、ja、id
styleConfig 对象 自定义组件样式 / color、btnWidth
product 字符串 定义产品形式 popup popup、bind(插件1.2.0及以上开始支持)

lang

提供多语言国际化支持,在组件中传入下列参数,即可展示对应文案,不传默认为中文。

  • zh-cn默认 中文
  • zh-tw 繁体中文
  • en 英文
  • ja 日文
  • id 印尼

代码示例:

// 模板上插入配置,此处省略其它必传参数
<captcha lang="zh-cn"/>

styleConfig

提供自定义样式,包含以下2个属性:
1.color: 自定义组件中部分按钮的颜色(可选参数 color 只能传入完整6位的HEX,按钮上的背景色为传入的色值透明度的60%)
2.btnWidth: 自定义验证插件的宽度(可选参数 btnWidth 传入合法的css长度,需要带单位)

代码示例:

// wxml
<captcha styleConfig="{{styleConfig}}"/>
// js
data: {
styleConfig: {
color: '#2488FF',// 必须是完整的6位
btnWidth: '210px'// minwidth: 210px, maxwidth:320px
}
}

product

在插件版本1.2.0及以上开始支持bind无按钮模式,此参数缺省值为popup模式。可选参数:
1.popup: 经典带按钮模式
2.bind: 无按钮模式,对于此类型,需要用户主动调用toVerify方法唤起验证界面

模板中插入参数为bind、verify,其它参数此处省略,具体细节可参考bind模式demo

代码示例:

// wxml
<captcha product="bind" verify="{{verify}}"/>
// js
btnSubmit: function () {
//用户点击页面提交按钮后,先进行业务逻辑处理
console.log("用户名效验完毕,打开验证码");
//业务逻辑效验完毕,开始唤起验证界面
this.toVerify();
},
toVerify: function () {
// 如果采用现代框架,可能会因为diff导致设置失效,可以将true换成随机数 Date.now()
this.setData({
verify: true
})
}

MiniProgram API 方法

onReady

监听验证按钮的 DOM 生成完毕事件。

代码示例:

// wxml
<captcha bindonReady="captchaReady"/>
//js
captchaReady:function(){
console.log('captcha-Ready!')
}

onError

监听验证出错事件,刷新过多、静态资源加载失败、网络不给力等验证码能捕获到的错误(参考ErrorCode),都会触发onError回调。

onError返回一个e,其中e.detail包含2个属性:code(错误码)、tips(错误提示)。我们在onError中要对challenge过期的情况做一个特殊的重置处理,代码如下

代码示例:

// wxml
<captcha bindonError="captchaError"/>
//js
captchaError: function (e) {
console.log('captcha-Error!', e.detail)
// 这里对challenge9分钟过期的机制返回做一个监控,如果服务端返回code:21,tips:not proof,则重新调用api1重置
if (e.detail.code === 21) {
var that = this
// 需要先将插件销毁
that.setData({ loadCaptcha: false })
// 重新调用api1
that.captchaRegister()
}
}

onSuccess

监听验证成功事件,返回一个result对象,包含3个属性:geetest_challenge、geetest_validate、geetest_seccode,这些参数为当前验证成功的凭据,
二次验证时需要传入。

代码示例:

// wxml
<captcha bindonSuccess="captchaSuccess"/>
//js
captchaSuccess:function(result){
console.log('captcha-Success!')
// 这里先将result中的参数保存,待进行二次验证时传入
this.setData({
result: result.detail
})
}

onClose

用户关闭弹出来的验证时,会触发该回调。

代码示例:

// wxml
<captcha bindonClose="captchaClose"/>
//js
captchaClose:function(){
console.log('captcha-Close!')
}

toReset

让验证回到初始状态。一般是在用户后台发现验证成功但其他信息不对的情况(比如用户名密码错误),或者验证出现错误的情况。

代码示例:

// wxml
<captcha toReset = "{{toReset}}"/>
//js
btnReset:function(){
// btnReset方法用户自定义
// 如果采用现代框架,可能会因为diff导致设置失效,可以将true换成随机数 Date.now()
this.setData({
toReset: true
})
}