快应用

2021.09.27 16:06:11

    验证码组件

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

    项目接入

    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