百度小程序

2021.07.20 16:32:36

    开通验证码服务

    获取产品秘钥及验证码ID
    登录易盾用户中心,在验证码服务中新建或选择已有产品,创建验证码ID,获取验证码的captchaId。

    支持验证码类型

    支持四种验证码类型:
    ① 智能无感知
    ② 滑块拼图
    ③ 文字点选
    ④ 图标点选

    集成

    在小程序根目录中执行命令安装npm包(若项目不存在package.json,请npm init)

      npm install @yidun/swan-ne-captcha
    

    在引用的时候,直接使用包中 package.json 的 name 名字即可。

    在页面.json中引入自定义组件。

    "usingComponents": {
        "ne-captcha": "@yidun/swan-ne-captcha"
    }
    

    使用

    属性

    可配项 类型 默认值 描述
    captchaId String 验证码ID
    lang String 'zh-CN' 语言
    width String 'auto' 验证码弹框宽度,接受单位'rpx'/'px'/'rem'/'%'
    customStyles Object null 自定义验证码样式,包含imagePanel/controlBar/gap/popTitle/popPadding,详情查看下面

    customStyles

    • imagePanel
      • borderRadius(String): imagePanel的圆角大小
    • controlBar
      • borderRadius(String): controlBar的圆角大小
      • height(String): controlBar的高度
    • gap: imagePanel和controlBar的间隔
    • popTitle
      • height(String): 弹框头部高度
    • popPadding(String): 弹框体内边距

    事件

    事件名 参数 描述
    error 验证码配置失败
    init 验证码配置成功(初始化)
    ready 验证码准备就绪
    verify err,validate 验证码验证完成
    close 验证码弹框准备关闭

    组件方法

    popup: 展示验证码(支持非智能无感知验证码调用此方法)

    verify: 展示验证码(仅支持智能无感知验证码调用此方法)

    reset: 重置验证码,获取新的验证信息

    getCaptchaType: 获取验证码类型

    组件接入方式

    在页面.swan中使用插件

    <view>
      <ne-captcha
        compid="neCaptcha"
        id="neCaptcha"
        captcha-id="yourCaptchaID"
        width="640rpx"
        binderror="handleConfigErr"
        bindverify="handleVerify"></ne-captcha>
      <view>
        <button bindtap="openCaptcha">点击验证</button>
      </view>
    </view>
    

    在页面.js中监听事件

    Page({
      handleConfigErr (ev) {
        // do something with error
      },
      openCaptcha () {
        this.selectComponent('#neCaptcha').popup()
      },
      handleVerify (ev) {
        const [error, validate] = ev.detail
        if (error) return
        // TODO:验证成功处理
        console.log(validate)
      }
    })
    

    域名

    1. 服务器域名:c.dun.163yun.com、c.dun.163.com
    2. 图片域名:necaptcha.nosdn.127.net、nos.netease.com

    效果演示

    百度小程序效果

    Online Chat Tel:95163223