zoukankan      html  css  js  c++  java
  • 微信小程序之获取验证码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值?待解决

  • 相关阅读:
    [UVA1149]Dominating Patterns
    [HDOJ1358]Period
    [HDOJ3065]病毒侵袭持续中
    【RQNOJ356】myt的格斗
    【rqnoj39】 饮食问题
    【rqnoj28】[Stupid]愚蠢的宠物
    【rqnoj378】 约会计划
    layer弹框在实际项目中的一些应用
    layer弹框在实际项目中的一些应用
    移动开发之css3实现背景几种渐变效果
  • 原文地址:https://www.cnblogs.com/zjjDaily/p/8033816.html
Copyright © 2011-2022 走看看