支付宝小程序
引入
在根目录执行下述命令,https://opendocs.alipay.com/mini/ide/npm-manage
npm install @yidun/alipay-ne-captcha
在页面或组件的 json 文件中声明引组件
{ "usingComponents": { "ne-captcha": "path-to-component/ne-captcha/index" } } 注意:在支付宝小程序开发者工具中,请务必在详情-项目配置下,勾选启用component2编译。
使用
<view>
<ne-captcha
ref="saveCaptchaRef"
captchaId="CAPTCHA_ID"
width="320rpx"
onError="handlerError"></ne-captcha>
<view>
<button onTap="handleOpenCaptcha">点击验证</button>
</view>
</view>
Page({
saveCaptchaRef (ref) {
this.captchaRef = ref
},
handlerError (error) {},
handleOpenCaptcha () {
this.captchaRef.popup()
}
})
配置项
可配项 | 类型 | 默认值 | 描述 |
---|---|---|---|
captchaId | String | 无 | 验证码ID |
lang | String | 'zh-CN' | 语言 |
width | String | 'auto' | 验证码弹框宽度,接受单位'rpx'/'px'/'rem'/'%' |
customStyles | Object | null | 自定义验证码样式,详情查看下面 |
注意: 小程序的超时设置可在 app.json 全局配置 |
customStyles
- imagePanel
- borderRadius(String): imagePanel的圆角大小
- controlBar
- borderRadius(String): controlBar的圆角大小
- height(String): controlBar的高度
- gap: imagePanel和controlBar的间隔
- popTitle
- height(String): 弹框头部高度
- popPadding(String): 弹框体内边距
事件
事件名 | 参数 | 描述 |
---|---|---|
onError | 无 | 验证码配置失败 |
onInit | 无 | 验证码配置成功(初始化) |
onReady | 无 | 验证码准备就绪 |
onVerify | err, validate 验证码验证完成 | |
onClose | 无 | 验证码弹框准备关闭 |
组件方法
- popup: 展示验证码(支持非智能无感知验证码调用此方法)
- verify: 展示验证码(仅支持智能无感知验证码调用此方法)
- reset: 重置验证码,获取新的验证信息
域名
- 服务器域名:c.dun.163yun.com、c.dun.163.com
- 图片域名:necaptcha.nosdn.127.net、nos.netease.com