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

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

第一步:结构

<view class=‘get-code‘ wx:if="{{!isShow}}"  bindtap=‘getCode‘>获取验证码</view>
<view class=‘get-code‘ wx:if="{{isShow}}">{{sec}}秒后重新发送</view>

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

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

第二步:样式就不用说了,自己定义。主要是js。我是把这个获取验证码的函数作为公用的部分,所以新建一个公用的js文件放在你想放的目录下,然后js代码:

function getCode(_this,num){
    _this.setData({
        isShow: true                    //按钮1隐藏,按钮2显示
    })
    var remain=num;             //用另外一个变量来操作秒数是为了保存最初定义的倒计时秒数,就不用在计时完之后再手动设置秒数
    var time = setInterval(function () {
        if (remain == 1) {
            clearInterval(time);
            _this.setData({
                sec: num,
                isShow: false
            })
            return false      //必须有
        }
        remain--;
        _this.setData({
            sec: remain
        })
    }, 1000)
}
module.exports = {
    getCode                  //此js模块化  也可以写成getCode:getCode
}

第三步:在需要getCode函数的页面的js中引入该公用js文件,比如:

var code=require(‘../../public/js/com.js‘)

    备注:用一个变量来存,我自己认为是为了好调用里面模块

第四步:在Page中申明:

data: {
    isShow:false,         //默认按钮1显示,按钮2不显示
    sec:"4"        //设定倒计时的秒数
},
getCode:function(){
    var _this=this;    //防止this对象的混杂,用一个变量来保存
    var time=_this.data.sec  //获取最初的秒数
    code.getCode(_this,time);  //调用倒计时函数
},

最后就成功了。

问题:点击view之后怎样获取该view的text值?待解决

时间: 2024-08-26 02:11:16

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

微信小程序【获取验证码】倒计时效果

最近开始接触微信小程序,会记录一些相关的小功能--例如这次是点击[获取验证码]按钮出现的倒计时效果. 原文: http://blog.csdn.net/Wu_shuxuan/article/details/78539075  感谢 .wxml <button class="buttonget" disabled='{{disabled}}' data-id="2" bindtap="getVerificationCode"> {{ti

微信小程序-06-详解介绍.js 逻辑层文件-注册页面

上一篇介绍的是 app.js 逻辑层文件中注册程序,对应的每个分页面都会有的 js 文件中 page() 函数注册页面 微信小程序-06-详解介绍.js 逻辑层文件-注册页面 宝典官方文档: https://developers.weixin.qq.com/miniprogram/dev/framework/MINA.html 今天开始深度学习编程语法,虽然大部分是拷贝官方文档,代码类都是我自己敲的,希望能自己敲一遍表格里的内容,熟悉一下操作 页面 Page Page(Object) Page(

微信小程序学习Course 4-2 JS数组对象学习

微信小程序学习Course 3-2 JS数组对象学习 本节主要介绍JS中的数组. 3-2.1 数组的声明 数组声明的方式多种,如下例.一般我们可以先创建一个空数组,然后再填充. var names = [];//创建一个空数组 var names = ["sadad","asdsad"];//创建一个包含两个字符串的数组 var names = new Array(3);//创建一个包含三个元素的数组 3-2.2 数组的增添 数组有多种增添方式,一种是栈方式,另一种

微信小程序如何获取openid

微信小程序如何获取openid wx.login({ success: res => { // 发送 res.code 到后台换取 openId, sessionKey, unionId // console.log(res) var appid = 'wxbe08efce713a44bf'; //填写微信小程序appid var secret = 'd65ad3d9ee159c568200c30a3bb49baf'; //填写微信小程序secret //调用request请求api转换登录凭证

谷歌app二次验证码与微信小程序二次验证码对比实测

下面我就跟大家实测一下关于两款验证码的使用对比 NO.1:下载安装 谷歌二次验证码下载方式如下: 1.通过扫描交易所中二维码(目前所有交易所中都是提供下载二维码的) 2.手机应用商店搜索"Google Authenticator"进行下载 微信小程序下载方式如下: 1.进入微信直接搜索"二次验证码"即可 1.谷歌需要去下载app(费流量,有wifi和土豪忽略),微信不需要,直接使用! 2.搜索方面谷歌需要一连串的英文字母,比较复杂这个对我而言就比较难接受了(我是英语

微信小程序实例-获取当前的地理位置、速度

微信小程序官方文档 https://mp.weixin.qq.com/debug/wxadoc/dev/api/location.html JS代码 //index.js //获取应用实例 var app = getApp() Page({ data: { motto: '示例小程序-获取当前地理位.速度', userInfo: {}, hasLocation:false, location:{} }, //事件处理函数 bindViewTap: function() { wx.navigate

微信小程序中获取高度及设备的方法

由于js中可以采用操纵dom的方法来获取页面元素的高度,可是在微信小程序中不能操纵dom,经过查找之后发现仅仅只有以下几个方法可以获取到高度 wx.getSystemInfoSync().windowWidth // 获取当前窗口的宽度 wx.getSystemInfoSync().windowHeight // 获取当前窗口的高度 wx.getSystemInfoSync().model // 获取当前采用的设备 wx.getSystemInfoSync().pixelRatio wx.get

微信小程序实现获取用户信息并存入数据库操作示例

微信小程序获取用户信息简单,但是在存入自己服务器数据库的过程中研究了一天多的时间,并且网上搜索不到该资源,故发出来供大家参考. index.js ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 Page({  data: {   nickNam

微信小程序 定位 获取国家省市区

从文档可知该方法只是返回的位置坐标等信息,并未返回地理位置名称.好在腾讯地图准们为小程序提供了接口SDK来获取位置信息. 文档地址如下:http://lbs.qq.com/qqmap_wx_jssdk/index.html SDK使用方法请参照该文档. 在小程序中获取地理位置信息的流程就是: 根据wx.getLocation方法获取当前位置坐标. 根据reverseGeocoder方法获取当前坐标地理位置信息. 注意:会提示https://apis.map.qq.com不是request 合法域