快应用

验证码组件

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

项目接入

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

组件参数及方法

配置项:

参数类型必填说明
captchaIdstring验证码id
widthnumber验证码宽度
langstring验证码语言选项

组件监听事件:

引入页面可通过$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>