Taro小程序 React 写一个获取短信验证码倒计时60秒然后可以重新获取

最新推荐文章于 2025-11-28 00:43:40 发布
原创 最新推荐文章于 2025-11-28 00:43:40 发布 · 4k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#小程序 #倒计时 #react

本文介绍如何在Taro框架中手动实现倒计时验证码功能，包括状态管理、按钮控制及倒计时逻辑，适合Taro开发者参考。

最近做的东西需要倒计时验证码，但是taro-UI里面没有，然后就只能手写。可能用taro的人还不多，很多组件还不是很完善，但是总体说来taro还是很不错的。那么下面我们来看倒计时怎么写，先贴效果图：
点击获取前
点击获取后
现在看到了样式的效果，那么代码是怎么样的呢？
1、先看数据，也就是state中的内容 phone_no是号码，icode是验证码，code_ts是按钮中是提示内容，show_btn是否展示获取验证码按钮，
toast一个提示框控制，count倒计时秒数

this.state = {
   
   
        phone_no: '',
        icode: '',
        code_ts: '获取验证码',
        show_btn: true,
        toast: false,
        count: 60
    }

2、然后是结构中的内容,样式应该不用了吧

<View className='phone_box_mid'
最低0.47元/天 解锁文章
Taro React组件使用（6） —— RuiSendCode 短信验证码【倒计时】
止于至善
04-03 735
每次点击，必须更新 isStart 变量，防止用户二次或者连续点击；在倒计时完成时，更新 isStart 变量，允许用户再次进行短信验证码的发送。
【taro react】 ---- 通过时间格式化处理提取倒计时的分秒、时段的小时分、选择日期的月和天
止于至善
08-19 441
需要做一个场次预定的小程序，需要H5和微信小程序两端。在开发中有很多时间需要进行计算处理。返回的时间格式多种多样，还有用作倒计时结束的时间戳等，如何进行统一处理，就是一个需要解决的问题。解决问题三的办法，就是由于只需要获取后边的小时和分，所以可以直接写死一个年月日，拼接一个完整的时间字符串，然后获取这个完整时间字符串的时分；解决办法主要是借助了固定年月日拼接一个完整的时间字符串，不会影响最后获取时分字符串。
Taro项目实现手机号绑定，发送验证码倒计时
青红造了个大白之成长记
06-02 2151
UpdatePhone.jsx import Taro, { Component, PureComponent } from '@tarojs/taro' import { View, Button, Text, Picker } from '@tarojs/components' import { connect } from '@tarojs/redux' import { AtForm, AtInput, AtButton, AtToast } from "taro-ui" import Ar
Taro：一次编写，多端驰骋的跨端利器
最新发布
领码SPARK - 以无代码之星火，燎原数字之未来！
11-28 514
本文全面解析跨端开发框架 Taro 的技术原理与应用场景，结合当下流行的新技术（如 AI、低代码、云原生），深入探讨其在小程序、H5、React Native 等多端开发中的优势与挑战。文章以通俗易懂的语言，辅以表格、流程图和案例，帮助开发者理解 Taro 的价值与实践路径。适合架构师、前端工程师及产品团队参考。 关键词：Taro、跨端开发、小程序、AI集成、低代码
React实战之60s倒计时按钮（发送短信验证按钮）
aohuangwu9787的博客
04-28 1101
React实战之60s倒计时按钮——短信验证按钮 导入：（antd组件——Form表单） 1 import { Button, Form, Input } from 'antd'; 2 const FormItem = Form.Item; 3 4 state = { 5 　　loading: false, 6 　　yztime: 59, 7 }...
React实现获取验证码倒计时
小马总的博客
01-18 6061
这里使用了antd的Button按钮需要npm安装antd 实现 import {Component} from 'react'; import { Button } from 'antd'; class Timer extends Component { constructor(props) { super(props); this.state = { ...
登录验证码倒计时功能：从设计思路-＞实现-＞封装组件的完美呈现
cx18333的博客
01-14 940
本文分享了工作中经常用到的倒计时功能实现,在react中实现发送短信后倒计时60s,具有参考借鉴的价值,有需要的朋友可以参考一下
微信小程序如何实现短信验证码倒计时功能
不定时分享最优质的网络技术与教程，满满的干货。
12-06 1476
本文实例为大家分享了微信小程序实现短信验证码倒计时的具体代码，供大家参考，具体内容如下初始效果 当点击按钮时候设置禁止点击效果：如下图 话不多说，直接上代码1.wxml部分 2.js部分 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持
精选资源
Taro 3 React 小程序解析md文件进行显示
03-14
Taro 是一个开源的多端开发框架，它允许开发者使用React语法编写代码，然后编译到微信小程序、H5、React Native等多个平台。Taro 3已经全面支持React Hooks，使得状态管理和组件复用更加便捷。 首先，让我们关注...
使用taro和react语言实现：微信小程序，地图中展示气泡，并在气泡中实现倒计时功能
qq_43664361的博客
10-08 645
使用 Taro 和 React 来实现微信小程序中的地图气泡倒计时功能，你需要首先确保已经安装了 Taro CLI 并创建了一个 Taro 项目。接下来，我们将逐步实现这个功能。
react倒计时功能
outstanding木槿
02-28 2484
react倒计时5 秒React中的倒计时可以通过使用函数来实现。
【踩坑】react函数组件实现手机验证码倒计时
weixin_45887187的博客
06-24 796
react函数组件+ts项目中，使用setInterval实现倒计时效果，发现数据没有正确递减的问题（闭包导致）
ReactNative短信验证码倒计时控件的实现代码
01-21
由于最近刚开始认真的搞RN，可能有一些封装的不是最佳实践，还是希望大家多提意见，和大家一起进步吧。本文介绍了ReactNative短信验证码倒计时控件，分享给大家 功能 根据项目的需要，需要写一个自定义的控件，实现如下功能： 默认文字为点击获取验证码 点击后出现60秒的倒计时 颜色，字号可调 倒计时过程中，再次点击需要忽略掉 倒计时完成后文本恢复成点击获取验证码 再几次点击同之前 其实说了这么多，就是个最普通的验证码的功能。。。 效果 效果图如下：(录的图片比较一般，对付着看吧) 实现原理 自己封装了个控件，它内部含有一个Text控件，然后我们又写了一个timer，
小程序笔记—性能测试下的定时器：setTimeout与setInterval
01-07
小程序中有两个定时器：setTimeout与setInterval setTimeout：可延时回调 setInterval：可定时循环回调 第一次这样使用： setTimeout(function(){ console.log(延时1秒回调) },1000) setInterval(function(){ console.log(每隔2秒回调一次) },2000) 但性能测试后发现存在定时器未跟随页面回收的问题，这个可能并不影响使用，但优秀的代码，怎能视而不见，同时这个又关系到小程序的评测指标。 仔细阅读文档后，发现定时器是可回收的，需要以下代码 setTimeout
Taro Hooks 实现手机短信验证码
Tanjc518的博客
12-14 1487
Taro Hooks 实现手机短信验证码 const [safePhoneInfo, setSafePhoneInfo] = useState({}) const [originalData, setOriginalData] = useState({}) const [countDownInfo, setCountDownInfo] = useState({ icode: '', code_ts: '获取验证码', show_btn: true, toast: false,
Taro+React验证码输入框
qq_40942874的博客
01-11 1298
思路：首先我们需要一个input输入框来获取输入的内容，在通过多个input输入框来显示所输入的内容，然后隐藏获取输入内容的输入框。 import {View, Input} from '@tarojs/components' import { useState,useEffect } from 'react'; import './index.less'; export default function Index(props) { const [answerValue,setAnswerVal
Taro小程序中使用toFixed()方法遇到的的坑
weixin_43236913的博客
08-06 874
需求描述 产品说小程序首页的合作品牌列表有16张（固定16张），但是一次性只展示8张，另外8张随机翻转展示，如下： 实现需求 这个好实现，基本思路：写八个容器，每个容器放两张图片（一张正面一张反面），然后写一个能让它们翻转的css3动画，定义一个active变量，通过这个变量的值来判断哪个容器执行翻转动画（加上相应的class），然后定义一个定时器，利用Math.random()来随机改变active的值，就实现了，核心代码如下： js部分： componentDidMount () { this
Taro关闭页面时停止计时器
weixin_42861240的博客
05-06 2961
1、在data中定义Loadingtime：’’ constructor () { super(...arguments) this.state = { djsTime:3, // 倒计时时间 Loadingtime:''， // 计时器 } } 2、在组件在装载发生前被立刻调用计时器 componentWillMount () { let that ...
Taro订单结束支付倒计时
Tanjc518的博客
12-14 1581
Taro订单结束支付倒计时 const [time, getTime] = useState([]) useDidShow(() => { const allRequest = async () => { const param = { url: `/v1/trade/order/${orderNo}`, method: 'get', } //订单信息 获取订单结束时间 const detailsRes
使用Taro+react写的一个微信小程序，如何可以实时监听一个值
09-10
在Taro + React开发的微信小程序中，实时监听一个值可以借助React的特性来实现。下面提供几种常见的方法： ### 使用 `useState` 和 `useEffect` 钩子 `useState` 用于定义状态，`useEffect` 用于在状态变化时执行副作用操作。以下是示例代码： ```javascript import React, { useState, useEffect } from &#39;react&#39;; import Taro from &#39;@tarojs/taro&#39;; const MyComponent = () => { const [value, setValue] = useState(0); useEffect(() => { // 当 value 变化时，这里的代码会执行 console.log(&#39;值已更新为:&#39;, value); }, [value]); const handleUpdateValue = () => { setValue(value + 1); }; return ( <Taro.View> <Taro.Text>当前值: {value}</Taro.Text> <Taro.Button onClick={handleUpdateValue}>更新值</Taro.Button> </Taro.View> ); }; export default MyComponent; ``` 在上述代码中，`useEffect` 依赖于 `value`，当 `value` 发生变化时，其回调函数会被触发，从而实现对 `value` 的监听。 ### 使用 `useReducer` 和 `useEffect` 钩子 `useReducer` 适合处理复杂的状态逻辑，同样可以结合 `useEffect` 来监听状态变化。示例如下： ```javascript import React, { useReducer, useEffect } from &#39;react&#39;; import Taro from &#39;@tarojs/taro&#39;; const reducer = (state, action) => { switch (action.type) { case &#39;INCREMENT&#39;: return state + 1; default: return state; } }; const MyComponent = () => { const [value, dispatch] = useReducer(reducer, 0); useEffect(() => { console.log(&#39;值已更新为:&#39;, value); }, [value]); const handleIncrement = () => { dispatch({ type: &#39;INCREMENT&#39; }); }; return ( <Taro.View> <Taro.Text>当前值: {value}</Taro.Text> <Taro.Button onClick={handleIncrement}>增加值</Taro.Button> </Taro.View> ); }; export default MyComponent; ``` 这里通过 `useReducer` 管理状态，`useEffect` 监听 `value` 的变化。 ### 使用 `Context` 和 `useContext` 结合 `useEffect` 如果需要在多个组件之间共享和监听状态，可以使用 `Context`。示例如下： ```javascript import React, { createContext, useContext, useState, useEffect } from &#39;react&#39;; import Taro from &#39;@tarojs/taro&#39;; const ValueContext = createContext(); const ValueProvider = ({ children }) => { const [value, setValue] = useState(0); return ( <ValueContext.Provider value={{ value, setValue }}> {children} </ValueContext.Provider> ); }; const MyComponent = () => { const { value, setValue } = useContext(ValueContext); useEffect(() => { console.log(&#39;值已更新为:&#39;, value); }, [value]); const handleUpdateValue = () => { setValue(value + 1); }; return ( <Taro.View> <Taro.Text>当前值: {value}</Taro.Text> <Taro.Button onClick={handleUpdateValue}>更新值</Taro.Button> </Taro.View> ); }; const App = () => { return ( <ValueProvider> <MyComponent /> </ValueProvider> ); }; export default App; ``` 通过 `Context` 可以在不同组件间共享状态，`useEffect` 依然用于监听状态变化。
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值