WeChat

Configuration parameters

The following are optional configuration parameters:

language

Multiple languages is supported, and corresponding text will be displayed when the following parameters are passed to the component. If no parameters are uploaded, the default is Chinese.

• zh (Chinese, default)
• en (English)

Code sample:

//Insert configuration on template, omit other required parameters
<captcha4 language="zh"/>

styleConfig

Provide a custom style with the following three attributes:

1. Color: the color of the clicked button in the custom component (optional color can only be passed in full HEX with 6 bits, and the background color on the button is 60% of the opacity of the color value passed in)

2. btnWidth: the width of the custom verification plug-in (optional parameter btnWidth passes in the allowed css length, with units required)

3. btnHeight: the height of the custom verification plug-in (optional parameter btnHeight passes in allowed css length, with units required)

Code sample:

//wxml

<captcha4 styleConfig="{{styleConfig}}"/>

// js
data: {
    styleConfig: {
        color: '#2488FF',//must be full 6 bits
         btnWidth: '210px'// minwidth: 210px, maxwidth:320px
         btnHeight: '40px',
    }
}

product

Support bind button-free mode, and the default value of this parameter is popup mode. Optional parameters:

1. popup: classic mode with button

2. bind: button-free mode. The user needs to call the Verify method to evoke the captcha interface.

Parameters inserted in the template are bind and verify. Other parameters are omitted here. Please refer to bind mode demo for details.

Code sample:

// wxml
<captcha4 product="bind" captchaId="{{captchaId}}" verify="{{verify}}"/>

// js  
btnSubmit: function () {
     //After the user clicks the submit button, the business logic is processed
     console.log("User name validation completed，Turn the captcha on");

     //After the business logic verification is completed, evoke the captcha interface
    this.verify();
},

verify: function () {
    //If a modern framework is used, the setting may be invalid because of diff. You can replace true with the random number Date.now ()
    this.setData({
            verify: true
    })
}

MiniProgram API Method

Ready

Listen if the DOM element which contains the captcha button is ready.

Code sample:

// wxml
<captcha4  bindReady="captchaReady"/>

//js  
captchaReady:function(){
    console.log('captcha-Ready!')
}

Error

The onError callback will be triggered whenever there are errors (refer to ErrorCode) that can be caught by captcha, such as listening to the verification error event, excessive refresh, failed loading of static resources, and poor network.

Error returns an e, where e.detail contains two attributes: code (error code) and tips (error prompt). In Error, we need to do a special reset for challenge expiration, as shown below

Code sample:

// wxml
<captcha4  bindError="captchaError"/>

//js   
captchaError: function (e) {
    console.log('captcha-Error!', e.detail)

    // Here is a monitor for the return of challenge 9 minutes expiration mechanism. If the server returns code: 21, tips: not proof, api1 is called again for reset 
    if (e.detail.code === 21) {
        var that = this
        // The plug-in needs to be destroyed
        that.setData({ loadCaptcha: false })

        //Recall api 1
        that.captchaRegister()
    }
}

Success

Listens for the verification success event and returns a result object. The detail in the result contains four attributes: lot_number, pass_token, captcha_output, gen_time. These parameters are the evidence of the current verification success,

Passing those to secondary verification is required.

Code sample:

// wxml
<captcha4  bindSuccess="captchaSuccess"/>

//js   
captchaSuccess:function(result){
    console.log('captcha-Success!')
     
    //The parameters in result are saved and passed in for secondary verification
    this.setData({
        result: result.detail
    })
}

Close

This callback is triggered when the user turns off the pop-up verification.

Code sample:

// wxml
<captcha4  bindClose="captchaClose"/>

//js      
captchaClose:function(){
    console.log('captcha-Close!')
}

toReset

Reset captcha. It is used when the user’s background detects that the captcha is successful yet other information is incorrect (such as the username and password are incorrect), or the error occurs with the captcha.

Code sample:

// wxml
<captcha4  toReset = "{{toReset}}"/>

//js           
btnReset:function(){
    //btnReset method user defined
    //If a modern framework is used, the setting may be invalid because of diff. You can replace true with the random number Date.now ()

    this.setData({
        toReset: true
    })
}