taro小程序进入腾讯验证码

接入原因

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

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

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

  1. 在 app.config.ts 引入小程序插件。 版本有更新现在是2.1.1
bash 复制代码
 {
  "plugins": {
    "captcha": {
      "version": "2.1.1",
      "provider": "wx1fe8d9a3cb067a75"
    }
  }
}
  1. 在需要加载验证码的页面配置插件,如page/index/index.config.ts。
bash 复制代码
 {
  "usingComponents": {
    "t-captcha": "plugin://captcha/t-captcha"
  }
}
  1. 在页面调用验证码,如 page/index/index.tsx。
bash 复制代码
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 和 ticket
	    console.log(event.detail)
	    // 验证码验证完成
	    if(event.detail.ret === 0) {
	      this.setState({
	        txJiYan: event.detail
	      },()=>{
	      	// 发送短信
	        this.sendCode()
	      })
	    } else {
	      // 验证失败
	      // 请不要在验证失败中调用refresh,验证码内部会进行相应处理
	    }
	}
	render() {
		return (
			<t-captcha
	          id='captcha'
	          appId={CaptchaAppId}
	          themeColor={themeColor}
	          onVerify={this.bindverify}
	        />
		)
	}
}

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


区别一览

小程序原型

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

uni-app框架

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

Taro小程序

bash 复制代码
<t-captcha id='captcha' appId='小程序插件验证码CaptchaAppId' onVerify={handlerVerify} />
相关推荐
weixin_lynhgworld1 天前
旧物新生,从二手回收小程序开启绿色生活
小程序·生活·旧物回收
從南走到北1 天前
智尚招聘求职小程序v1.0.23
微信小程序·小程序
2501_915918411 天前
掌握 iOS 26 App 运行状况,多工具协作下的监控策略
android·ios·小程序·https·uni-app·iphone·webview
知识分享小能手1 天前
uni-app 入门学习教程,从入门到精通,uni-app基础扩展 —— 详细知识点与案例(3)
vue.js·学习·ui·微信小程序·小程序·uni-app·编程
2501_915909061 天前
iOS 混淆实战,多工具组合完成 IPA 混淆与加固(源码 + 成品 + 运维一体化方案)
android·运维·ios·小程序·uni-app·iphone·webview
狂团商城小师妹1 天前
智尚房产中介小程序
微信小程序·小程序
狂团商城小师妹2 天前
预约洗车小程序
微信小程序·小程序
future_studio2 天前
聊聊 Unity(小白专享、C# 小程序 之 图片播放器)
unity·小程序·c#
00后程序员张2 天前
HTTPS 包 抓取与分析实战,从抓包到解密、故障定位与真机取证
网络协议·http·ios·小程序·https·uni-app·iphone
一匹电信狗2 天前
【C++】C++风格的类型转换
服务器·开发语言·c++·leetcode·小程序·stl·visual studio