快应用

2024.11.01 11:59:35

    验证码组件

    下载快应用接入示例,可根据验证码文档修改示例代码或替换动画素材等。

    项目接入

    1. 组件:拷贝 component 下的 ne-captcha 组件至项目中
    2. manifest 配置:
    {
    	"trustedSslDomains": [
    		"cstaticdun.126.net"
    	],
    	"features": [
    		{ "name": "system.webview" }
    	]
    }
    

    组件参数及方法

    配置项:

    参数 类型 必填 说明
    captchaId string 验证码id
    width number 验证码宽度
    lang string 验证码语言选项

    组件监听事件:

    引入页面可通过 $broadcast 通知组件进行下述动作,具体见示例

    • verify: 开始验证
    • reset: 重置验证码

    自定义事件:

    • error: 验证码加载错误
    • captchaInit: 验证码初始化成功
    • captchaReady: 验证码准备就绪
    • verify: 验证码一次验证结束

    接入示例

    <import name="ne-captcha" src="../component/ne-captcha/index.ux"></import>
    <template>
        <div>
          <div>
            <ne-captcha
              captcha-id="易盾验证码ID"
              width="{{ 640 }}"
              @error="handleCaptchaError"
              @verify="handleCaptchaVerify"></ne-captcha>
          </div>
          <input
            type="button"
            value="验证"
            @click="captchaVerfiy"></input>
        </div>
    </template>
    
    <script>
    export default {
        captchaVerfiy() {
            this.$broadcast('necaptcha', {
                type: 'verify'
            })
        },
        handleCaptchaError (ev) {
            // TODO: 错误处理
        },
        handleCaptchaVerify (ev) {
            const validate = ev.detail
            if (validate && !validate[0]) {
                // 验证成功,获取validate[1]进行二次验证
            } else {
                // 验证失败,无需reset,内部会自动刷新
            }
        }
    }
    </script>
    
    Online Chat Tel:95163223 Free trial