# 支付宝小程序

## 引入
在根目录执行下述命令，[https://opendocs.alipay.com/mini/ide/npm-manage](可参考支付宝官网)
```js
  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>
```
```js
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