微信小程序之获取验证码js

Love The Way You Lie 2022-05-31 07:26 192阅读 0赞

在微信小程序中怎样实现获取验证码的倒计时功能捏，倒计时的原理是一样一样的，就是某些地方需要注意。

第一步：结构

<view class='getcode' wx:if="{
       {isGet == false}}" bindtap='getCode'>获取验证码</view>
    <view class='getcode' wx:if="{
       {isGet == true}}">{
       {sec}}s后重新发送</view>

注意：微信小程序中要用到两个按钮，不像HTML里面直接一个按钮就解决了。如果非要一个按钮的话，就需要把不变的内容即“获取验证码”与“秒后重新发送”装在一个数组里面，然后判断什么时候选择显示哪一个

备注：用wx：if条件渲染来判断某个按钮是否显示与隐藏。。\{ \{ sec \}\}是要动态显示的秒数，只绑定一个view的点击事件就不怕重复点击了。。。

第二步：样式就不用说了，自己定义,  然后js代码：

// pages/mine/wallet/getcash/getcash.js
    Page({
      data: {
        isGet: false,
        sec: 30
      },
      getCode () {
        var self = this
        self.setData({isGet: true})
        var remain = 30;
        var time = setInterval(function() {
          if (remain == 1) {
            clearInterval(time)
            self.setData({
              sec: 30,
              isGet: false
            })
            return false
          }
          remain --;
          self.setData({
            sec: remain
          })
        }, 1000)
      }
    })

最后就成功了。

是不是很简单，用习惯了vue的小伙伴一开始写这个是不是会没思路呢哈哈

发表评论取消回复

表情：

评论列表（有 0 条评论，192人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序获取手机验证码短信验证码后端功能实现解析

本文原创首发CSDN，链接 [https://mp.csdn.net/console/editor/html/106041472][https_mp.csdn.net_cons

Dear 丶/ 2023年10月06日 08:29/ 0 赞/ 75 阅读

相关微信小程序-获取不限制的小程序码（二）

一、获取小程序码 [获取小程序码 | 微信开放文档][Link 1] 与 createQRCode 总共生成的码数量限制为 100,000，请谨慎调用调用方式

桃扇骨/ 2023年09月25日 20:02/ 0 赞/ 74 阅读

相关微信小程序授权_微信小程序授权验证码什么意思

首先,最先要进行的便是运行微信软件,然后在软件的主界面中,找到“发现”这一功能项目.1、点击“发现”界面之后,会看到一个“游戏中心”的选项,这里就点击游戏中心,开始游戏的管理吧

小灰灰/ 2023年09月24日 02:25/ 0 赞/ 85 阅读

相关微信小程序之获取验证码js

在微信小程序中怎样实现获取验证码的倒计时功能捏，倒计时的原理是一样一样的，就是某些地方需要注意。第一步：结构 <view class='getcode' wx:i

Love The Way You Lie/ 2022年05月31日 07:26/ 0 赞/ 193 阅读

相关微信小程序-验证码

1.服务器 package com.ruoyi.project.system.user.controller; import java.awt.

布满荆棘的人生/ 2022年05月15日 07:58/ 0 赞/ 304 阅读

相关微信小程序--获取已发布微信小游戏和小程序源码

最近一直在做微信小游戏的开发，发现了一个好玩的事，在这里记录一下。这段时间一直在做一些小游戏，小程序的开发，但有的时候会发现性能上总是不那么的尽如人意（毕竟我这小菜鸟水

川长思鸟来/ 2022年05月08日 10:46/ 0 赞/ 396 阅读

相关微信小程序获取 openID

1.通过 wx.login接口获取code如： wx.login(\{ success: res => \{ console.log("code

灰太狼/ 2021年12月18日 20:17/ 0 赞/ 486 阅读

相关微信小程序开发的坑---获取小程序码

今日楼主正在搞原生小程序，想搞一下转发功能，而转发功能就需要获取到小程序码，方便别人识别二维码并进入小程序；起因，楼主按照官网，先获取access\_token;然后拿着a

约定不等于承诺〃/ 2021年09月18日 11:40/ 0 赞/ 648 阅读

相关反编译获取微信小程序源码

一、前言最近在学习微信小程序开发，半个月学习下来，很想实战一下踩踩坑，于是就仿写了一个阿里妈妈淘宝客小程序的前端实现，过程一言难尽，差不多两周时间过去了，发现小程序的坑远

蔚落/ 2021年09月16日 14:58/ 0 赞/ 473 阅读

相关微信小程序发送短信验证码倒计时

效果图 ![在这里插入图片描述][20200827154829168.gif_pic_left] WXML文件 <view class="containe

桃扇骨/ 2021年09月02日 05:52/ 0 赞/ 533 阅读