• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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

第一步:结构

<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值?待解决

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
小程序短信验证码登录的实现与优化发布时间:2022-07-18
下一篇:
小程序实现获取短信验证码倒计时发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap