开发者社区> 技术小阿哥> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

微信小程序短信倒计时60秒提醒功能实现

简介:
+关注继续查看

背景
我们是西安卫生局平台项目,给陕西健康卡完成移动App开发后,进军小程序开发

问题
迁移到登陆验证码获取,需要有倒计时功能,app使用到setTimeout ,出问题了?!死活递归调用不了
微信小程序短信倒计时60秒提醒功能实现

耗时
整整一个早晨的战斗,什么 外部定义方法啊 内部传递变量啊 等等。。。最后宣告失败

突破
发现了setInterval倒计时,果然好使。成功运行代码如下

    // 60秒后重新获取验证码
    var inter = setInterval(function () {
      this.setData({
        snsCodeMsg: "重新发送(" + this.data.snsMsgWait + ")",
        snsMsgWait: this.data.snsMsgWait - 1
      });
      if (this.data.snsMsgWait < 0) {
        clearInterval(inter)
        this.setData({
          snsCodeMsg: "获取验证码",
          snsMsgWait: 60
        });
      }
    }.bind(this), 1000);

注意后面的bind绑定,最关键。不然又是未定义,无法使用外围的变量。
微信小程序短信倒计时60秒提醒功能实现

最后
请不要放弃,想要的效果总会出现,坚持换个思路。


沫沫金提供,谢谢你的观看。朋友的软件开发都找我,你也可以。请百度搜索我得名字,你可和我一对一讨论技术。



本文转自 沫沫金 51CTO博客,原文链接:http://blog.51cto.com/zl0828/2043523,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
微信公众号借助小程序云函数实现支付功能
微信公众号借助小程序云函数实现支付功能
92 0
微信小程序入门篇,计算器的实现
微信小程序入门篇,计算器的实现
51 0
微信小程序实现订阅信息功能
微信小程序实现订阅信息功能
168 0
你会实现一个微信小程序开关功能吗
你会实现一个微信小程序开关功能吗
34 0
实现抽屉列表-微信小程序
本抽屉列表的实现方法来自与微信小程序的官方实例,本人将有关代码及样式提取了出来并加以精简、添加注释,方便大家的学习与理解。 实现效果 JS Page({ data: { list: [ { id:...
2211 0
实现拖拽列表-微信小程序
之前在网上搜索拖拽列表的实现时,发现了有好多的方法都是基于像素位置的计算实现的,这种方法要求列表元素的大小以及列表的位置有着非常严格的要求,修改和拓展起来非常的麻烦。
2139 0
微信小程序实战之天气预报
原文:微信小程序实战之天气预报 这个案例是仿UC中天气界面做的中间也有点出入,预留了显示当前城市名字和刷新图标的位置,自己可以写下,也可以添加搜索城市。值得注意的是100%这个设置好像已经不好使了,可以通过获取设备的高度通过数据绑定设置高度。
1153 0
微信小程序把玩(十七)input组件
原文:微信小程序把玩(十七)input组件 input输入框使用的频率也是比较高的。。。样式的话自己外面包裹个view自己定义。input属性也不是很多,有需要自己慢慢测,尝试 主要属性: wxml ...
1023 0
微信小程序把玩(八)view组件
原文:微信小程序把玩(八)view组件 刚看到这个效果的时候还真是和ReactNative的效果一致,属性也基本的一样. view这个组件就是一个视图组件使用起来非常简单。
847 0
13688
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载