taro小程序进入腾讯验证码

接入原因

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

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

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

  1. 在 app.config.ts 引入小程序插件。 版本有更新现在是2.1.1
 {"plugins": {"captcha": {"version": "2.1.1","provider": "wx1fe8d9a3cb067a75"}}
}
  1. 在需要加载验证码的页面配置插件,如page/index/index.config.ts。
 {"usingComponents": {"t-captcha": "plugin://captcha/t-captcha"}
}
  1. 在页面调用验证码,如 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} />

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/63386.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Node.js 新手教程

1、nodejs简介 Node.js 是一个开源和跨平台的 JavaScript 运行时环境。它是几乎所有类型项目的流行工具&#xff01; Node.js 在浏览器之外运行 V8 JavaScript 引擎&#xff08;Google Chrome 的核心&#xff09;。这使得 Node.js 的性能非常出色。 Node.js 应用程序在单个进…

从GCC源码分析C语言编译原理——源码表层分析(脚本篇)

目录 一、目录结构 二、有意思的小功能 三、install脚本 脚本变量和设置 程序名称变量 模式和命令 参数解析 主要逻辑 四、主要功能脚本 ------------------------------------------------------------------------------------------------------------------------…

Mybatis 学习 之 XML 手册

目录 单次执行单次新增单次更新单次删除 批量执行批量新增批量更新for 循环执行更新for 循环生成多条 sql&#xff0c;一次执行 批量删除 参数传递预处理方式 (OGNL表达式 #{})数据类型转换 直接替换 (EL表达式 ${}) 安全 单次执行 单次新增 <insert id"insert"…

自定义指令,全局,局部,注册

让输入框自动获取焦点(每次刷新自动获取焦点&#xff09; <template><div><h3>自定义指令</h3><input ref"inp" type"text"></div> </template><script> export default {mounted(){this.$refs.inp.focus…

CSS3 动画详解,介绍、实现与应用场景详解

CSS3 动画概述 CSS3 动画是通过 CSS3 的新特性来实现元素的动态变化。与传统的 JavaScript 动画不同,CSS3 动画主要通过 CSS 属性的变化来实现动画效果,具有高效、轻量和易于实现的优点。CSS3 动画通常用于网页的动态交互效果、过渡效果、元素移动、缩放、旋转等场景。 一、…

二、点亮希望之光:寄存器与库函数驱动 LED 灯

文章目录 一、寄存器1、存储器映射2、存储器映射表3、寄存器4、寄存器映射5、寄存器重映射6、总线基地址、外设基地址、外设寄存器地址7、操作寄存器&#xff08;以操作一个GPIO口为例&#xff09;1. 寄存器地址定义部分2. GPIOD_Configuration 函数部分3. main 函数部分 二、库…

【特殊子序列 DP】力扣1137. 第 N 个泰波那契数

泰波那契序列 Tn 定义如下&#xff1a; T0 0, T1 1, T2 1, 且在 n > 0 的条件下 Tn3 Tn Tn1 Tn2 给你整数 n&#xff0c;请返回第 n 个泰波那契数 Tn 的值。 示例 1&#xff1a; 输入&#xff1a;n 4 输出&#xff1a;4 解释&#xff1a; T_3 0 1 1 2 T_4 1 …

梯度下降法求解局部最小值深入讨论以及 Python 实现

文章目录 0. 前期准备1. 局部最小值2. 例子3. 讨论3.1 增加迭代次数3.2 修改学习率 η \eta η3.3 修改初始值 x 0 x^0 x0 4. 总结参考 0. 前期准备 在开始讲梯度下降法求解函数的局部最小值之前&#xff0c; 你需要有梯度下降法求解函数的最小值的相关知识。 如果你还不是…

css部分

前面我们学习了HTML&#xff0c;但是HTML仅仅只是做数据的显示&#xff0c;页面的样式比较简陋&#xff0c;用户体验度不高&#xff0c;所以需要通过CSS来完成对页面的修饰&#xff0c;CSS就是页面的装饰者&#xff0c;给页面化妆&#xff0c;让它更好看。 1 层叠样式表&#…

7-zip如何分卷压缩文件并加密?

想要压缩的文件过大&#xff0c;想要在压缩过程中将文件拆分为几个压缩包并且同时为所有压缩包设置加密应该如何设置&#xff1f; 想要分卷压缩文件并加密一起操作就可以完成了&#xff0c;设置方法如下&#xff1a; 打开7-zip&#xff0c;选中需要压缩的文件&#xff0c;选择…

14.在 Vue 3 中使用 OpenLayers 自定义地图版权信息

在 WebGIS 开发中&#xff0c;默认的地图服务通常会带有版权信息&#xff0c;但有时候我们需要根据项目需求自定义版权信息或添加额外的版权声明。在本文中&#xff0c;我们将基于 Vue 3 的 Composition API 和 OpenLayers&#xff0c;完成自定义地图版权信息的实现。 最终效果…

【游戏】超休闲游戏:简单易上手的游戏风潮

1. 什么是超休闲游戏&#xff1f; 超休闲游戏&#xff08;Hyper-Casual Games&#xff09; 是一种专注于简单玩法、快速上手、短时间内能完成的游戏类型。这类游戏通常具有以下特点&#xff1a; 玩法简单&#xff1a;规则直观&#xff0c;用户无需教程即可上手。碎片化体验&a…

【RTKLIB源码阅读】rtklibexplorer博客翻译-Updated guide to the RTKLIB configuration file

我已经有一段时间没有更新我的RTKLIB配置文件指南了。 自从上次更新以来,我增加了一些新的功能,并对一些现有的功能有了更多的了解。 对于以前的更新,我只是更新了原帖,但这次我想我应该重新发布它,使它更容易被找到。、 RTKLIB 的一大优点是它的可配置性极强,有一系列的…

excel文件合并,每个excel名称插入excel列

import pandas as pd import os # 设置文件夹路径 folder_path rC:\test # 替换为您的下载文件夹路径 output_file os.path.join(folder_path, BOM材料.xlsx) # 创建一个空的 DataFrame 用于存储合并的数据 combined_data pd.DataFrame() # 遍历文件夹中的所有文件 for …

无法找到 msvcr120.dll,无法执行程序要怎么处理?修改msvcr120.dll文件

遇到“无法找到 msvcr120.dll&#xff0c;无法执行程序”这类错误通常指示着你的计算机缺少了一个核心组件&#xff0c;即 Microsoft Visual C 2013 Redistributable 的一部分&#xff1a;msvcr120.dll 文件。这个文件是许多依赖 Visual C 的应用程序运行的基础。目前修复此类问…

MongDB快速入门

一&#xff0c;MongoDB简介 MongoDB是一个开源&#xff0c;高性能&#xff0c;无模式的文档数据库&#xff0c;当初的设计就是用于简化开发和方便扩展&#xff0c;是NoSQL数据库产品的一种&#xff0c;也是最想关系型数据库的非关系型数据库 它支持的数据结构非常松散&#x…

Kruskal 算法在特定边权重条件下的性能分析及其实现

引言 Kruskal 算法是一种用于求解最小生成树(Minimum Spanning Tree, MST)的经典算法。它通过逐步添加权重最小的边来构建最小生成树,同时确保不会形成环路。在本文中,我们将探讨在特定边权重条件下 Kruskal 算法的性能,并分别给出伪代码和 C 语言实现。特别是,我们将分…

实战 | C# 中使用GPU加速YOLOv11 推理

导 读 本文主要介绍如何在C#中使用GPU加速YOLOv11推理。 YOLOv11介绍 C# 中使用YOLOv11 (GPU版本) 【1】环境和依赖项。 下载安装CUDA12.6和CUDNN9.6,截止文章日期最新版本,注意选择自己的版本,我的系统是win11 64位。

大数据-244 离线数仓 - 电商核心交易 ODS层 数据库结构 数据加载 DataX

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; Java篇开始了&#xff01; 目前开始更新 MyBatis&#xff0c;一起深入浅出&#xff01; 目前已经更新到了&#xff1a; Hadoop&#xff0…

以nlp为例,区分BatchNorm、LayerNorm、GroupNorm、RMSNorm

以nlp中一个小批次数据&#xff0c;详细区分BatchNorm、LayerNorm、GroupNorm、RMSNorm。这几种归一化的不同。如下表格&#xff0c;从计算范围、统计量、计算复杂度以及应用场景等方面的差异给出。 方法计算范围统计量计算复杂度应用场景BatchNorm跨所有句子的同一维度使用批…