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

第一步:结构

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

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

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

    最近开始接触微信小程序,会记录一些相关的小功能——例如这次是点击[获取验证码]按钮出现的倒计时效果. 原文: http://blog.csdn.net/Wu_shuxuan/article/detai ...

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

    上一篇介绍的是 app.js 逻辑层文件中注册程序,对应的每个分页面都会有的 js 文件中 page() 函数注册页面 微信小程序-06-详解介绍.js 逻辑层文件-注册页面 宝典官方文档: http ...

  3. 微信小程序——3、逻辑js文件

    逻辑层js文件 微信小程序前端进行了层次划分,分为逻辑层和视图层.逻辑层实现对数据的加工和处理.与HTML页面相似,逻辑层使用JavaScript编写.逻辑层将数据处理后发送至视图层,同时接受视图层的 ...

  4. 微信小程序-05-详解介绍.js 逻辑层文件

    上一篇介绍了关于.json 的配置文件,本篇介绍关于.js 逻辑层文件 微信小程序-05-详解介绍.js 逻辑层文件 宝典官方文档: https://developers.weixin.qq.com/ ...

  5. nodejs+koa+uniapp实现微信小程序登陆获取用户手机号及openId

    nodejs+koa+uniapp实现微信小程序登陆获取用户手机号及openId 前言: 我准备用nodejs+koa+uniapp实现一款餐饮点单小程序,以及nodejs+koa+vue实现后端管理 ...

  6. 微信小程序如何获取openid

    微信小程序如何获取openid wx.login({ success: res => { // 发送 res.code 到后台换取 openId, sessionKey, unionId // ...

  7. 微信小程序后台获取用户的opeid

    1.微信小程序后台获取登录用户的openid,首先微信小程序将code传给后台服务器 wx.login({ success: function (res) { var code = res.code ...

  8. 【微信小程序】获取用户地理位置权限,二次请求授权,逆解析获取地址

    摘要:微信小程序内获取用户地理位置信息授权,被拒绝后二次获取,获取权限后逆解析得到用户所在省市区等.. 场景:商城类小程序,在首页时需展示附近门店,即用户刚进入小程序时就需要获取到用户位置信息 ste ...

  9. 微信小程序,获取二维码

    微信小程序,获取二维码 找到一篇很实用的博客,他已经写得很详细了,自己也懒得写,亲测有效 参考网址

随机推荐

  1. java中websocket的应用

    在上一篇文章中,笔者简要介绍了websocket的应用场景及优点,戳这里 这篇文章主要来介绍一下在java项目中,特别是java web项目中websocket的应用. 场景:我做了一个商城系统,跟大 ...

  2. jquery技巧小结

    由于主要还是负责后端,所以前端很多东西都不熟悉,jQuery作为web开发必备技能,有很多知识点,老是记不清楚,所以在这边整理一下. 1.加载页面后执行 $(function(){ //程序段 }) ...

  3. ssm学习(四)--完整的增删改查demo

    上一篇文章简要介绍了将sping mvc加入整个框架,算是完成了ssm的集成.本节继续前面的内容,结合spring mvc做一个简单的增删改查demo. 1.首先,重写一下GeckoList.jsp页 ...

  4. EditText禁用系统键盘,光标可以继续使用

    在项目中有时候需要使用到自己的键盘,那这个时候就不希望系统键盘在弹出,而且光标还要继续显示,其实一个方法就可以简单实现 /** * 禁止Edittext弹出软件盘,光标依然正常显示. */ publi ...

  5. ABP .Net Core API和Angular前端APP独立部署跨域问题(No Access-Control-Allow-Origin)

    前言: 通过ABP官网(https://aspnetboilerplate.com)下载ASP.NET Core 2.x + Angular模板项目是按ReStful风格架构Web API和angul ...

  6. 如何检测mvc性能和sql语句

    mvc中使用linq如何检测sql语句 .net中使用mvc开发已经是一种趋势,不仅仅是.net ,java 等越来越多的开发者更倾向于mvc这种开发模式,在.net mvc 使用linq非常方便,各 ...

  7. Python学习(一):编写购物车

    1.购物车流程图: 2.代码实现: #!/usr/bin/env python #coding=utf-8 ChoiceOne =''' 1.查看余额 2.购物 3.退出 ''' ChoiceTwo ...

  8. 理解Kubernetes(1):手工搭建Kubernetes测试环境

    系列文章: 1. 手工搭建环境 1. 基础环境准备 准备 3个Ubuntu节点,操作系统版本为 16.04,并做好以下配置: 系统升级 设置 /etc/hosts 文件,保持一致 设置从 0 节点上无 ...

  9. Struts2-整理笔记(一)介绍、搭建、流程、详解struts.xml

    Struts2是一种前端的技术框架 替代Servlet来处理请求   Struts2优势 自动封装参数 参数校验 结果的处理(转发|重定向) 国际化 显示等待页面 表单的防止重复提交   搭建框架:导 ...

  10. Mac下持久化路由配置

    缘由 mac 下有个小命令,networksetup,之前电脑装了IKEv2 的VPN,每天能正常FQ,由于所有流量都走了VPN隧道,导致了公司内部的其它网络无法访问得到,必须每次的来回拨VPN,断V ...