taro小程序进入腾讯验证码

接入原因

昨天突然晚上有人刷我们公司的登录发送短信接口，紧急将小程序的验证码校验更新上去了

接下来就是我们的接入方法，其实很简单，不过有时候可能大家着急就没有仔细看文档，腾讯验证码文档微信小程序地址，注意这里分三种接入的前端框架，我这里就着急使用了小程序原生的接入代码，虽然看到了Taro框架的小程序接入示例

Taro 框架小程序插件接入示例

1. 在 app.config.ts 引入小程序插件。 版本有更新现在是2.1.1

 {"plugins": {"captcha": {"version": "2.1.1","provider": "wx1fe8d9a3cb067a75"}}
}

2. 在需要加载验证码的页面配置插件，如page/index/index.config.ts。

 {"usingComponents": {"t-captcha": "plugin://captcha/t-captcha"}
}

3. 在页面调用验证码，如 page/index/index.tsx。

import Taro from '@tarojs/taro'export default function Index() {constructor(props) {this.bindverify = this.bindverify.bind(this)}const { page } = Taro.getCurrentInstance();const captcha = page.selectComponent && page?.selectComponent('#captcha');try {captcha?.show();} catch (error) {// 进行业务逻辑，若出现错误需重置验证码，执行以下方法captcha?.refresh();}// 验证码回调bindverify = (event) => {// 获取randstr 和 ticketconsole.log(event.detail)// 验证码验证完成if(event.detail.ret === 0) {this.setState({txJiYan: event.detail},()=>{// 发送短信this.sendCode()})} else {// 验证失败// 请不要在验证失败中调用refresh，验证码内部会进行相应处理}}render() {return (<t-captchaid='captcha'appId={CaptchaAppId}themeColor={themeColor}onVerify={this.bindverify}/>)}
}

注意一定要按照对应的小程序架构插件去对接，原因是不同架构的编译模式不一样，Taro会将app-id中的都以小写去编译，插件是拿不到值的，所以这里要用appId ,而返回的方法 都要是on开头的，所以引用的时候这里要留意

---

区别一览

小程序原型

<t-captchaid="captcha"app-id="小程序插件验证码CaptchaAppId"bindverify="handlerVerify"bindready="handlerReady"bindclose="handlerClose"binderror="handlerError" />

uni-app框架

<t-captchaid="captcha"app-id="小程序插件验证码CaptchaAppId"@verify="handlerVerify"@ready="handlerReady"@close="handlerClose"@error="handlerError" />

Taro小程序

<t-captcha id='captcha' appId='小程序插件验证码CaptchaAppId' onVerify={handlerVerify} />