建网站pc版,嘉定西安网站建设,暗网网站建设,wordpress 标签详解接入原因 昨天突然晚上有人刷我们公司的登录发送短信接口#xff0c;紧急将小程序的验证码校验更新上去了 接下来就是我们的接入方法#xff0c;其实很简单#xff0c;不过有时候可能大家着急就没有仔细看文档#xff0c;腾讯验证码文档微信小程序地址#xff0c;注意这里…接入原因 昨天突然晚上有人刷我们公司的登录发送短信接口紧急将小程序的验证码校验更新上去了 接下来就是我们的接入方法其实很简单不过有时候可能大家着急就没有仔细看文档腾讯验证码文档微信小程序地址注意这里分三种接入的前端框架我这里就着急使用了小程序原生的接入代码虽然看到了Taro框架的小程序接入示例
Taro 框架小程序插件接入示例
在 app.config.ts 引入小程序插件。 版本有更新现在是2.1.1 {plugins: {captcha: {version: 2.1.1,provider: wx1fe8d9a3cb067a75}}
}在需要加载验证码的页面配置插件如page/index/index.config.ts。 {usingComponents: {t-captcha: plugin://captcha/t-captcha}
}在页面调用验证码如 page/index/index.tsx。
import Taro from tarojs/taroexport 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-captchaidcaptchaappId{CaptchaAppId}themeColor{themeColor}onVerify{this.bindverify}/)}
}注意一定要按照对应的小程序架构插件去对接原因是不同架构的编译模式不一样Taro会将app-id中的都以小写去编译插件是拿不到值的所以这里要用appId ,而返回的方法 都要是on开头的所以引用的时候这里要留意 区别一览
小程序原型
t-captchaidcaptchaapp-id小程序插件验证码CaptchaAppIdbindverifyhandlerVerifybindreadyhandlerReadybindclosehandlerClosebinderrorhandlerError /uni-app框架
t-captchaidcaptchaapp-id小程序插件验证码CaptchaAppIdverifyhandlerVerifyreadyhandlerReadyclosehandlerCloseerrorhandlerError /Taro小程序
t-captcha idcaptcha appId小程序插件验证码CaptchaAppId onVerify{handlerVerify} /
