> >

配置参数

以下为可选配置参数：

参数	类型	说明	默认值	可选值
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
    })
}