微信小程序之获取验证码js
2017-12-13 16:58
525 查看
在微信小程序中怎样实现获取验证码的倒计时功能捏,倒计时的原理是一样一样的,就是某些地方需要注意。
第一步:结构
注意:微信小程序中要用到两个按钮,不像HTML里面直接一个按钮就解决了。如果非要一个按钮的话,就需要把不变的内容即“获取验证码”与“秒后重新发送”装在一个数组里面,然后判断什么时候选择显示哪一个
备注:用wx:if条件渲染来判断某个按钮是否显示与隐藏。。{{ sec }}是要动态显示的秒数,只绑定一个view的点击事件就不怕重复点击了。。。
第二步:样式就不用说了,自己定义。主要是js。我是把这个获取验证码的函数作为公用的部分,所以新建一个公用的js文件放在你想放的目录下,然后js代码:
第三步:在需要getCode函数的页面的js中引入该公用js文件,比如:
备注:用一个变量来存,我自己认为是为了好调用里面模块
第四步:在Page中申明:
最后就成功了。
问题:点击view之后怎样获取该view的text值?待解决
第一步:结构
<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
- 微信小程序 —— 验证码获取倒计时效果
- 微信小程序获取验证码倒计时时间
- 微信小程序实现倒计时60s获取验证码
- 微信小程序异步获取app.js的函数
- 解决微信小程序中在其他页面无法使用app.js中获取的userInfo或openid的问题
- 微信小程序开发--倒计时60s获取验证码
- 微信小程序开发--倒计时60s获取验证码
- 微信小程序在本js中,设置全局变量,动态获取json
- 微信小程序开发(3)--倒计时60获取验证码
- 微信小程序实现验证码获取倒计时效果
- 微信小程序 功能函数小结(手机号验证*、密码验证*、获取验证码*)
- 微信小程序发短信,php开发小程序短信接口,获取手机验证码
- 微信小程序开发-点击事件,获取元素id,页面传值 & 获取js里的数据
- 微信小程序 获取session_key和openid
- 【微信开发】-JSSDK获取地理位置坐标及转换成百度坐标和腾讯坐标
- 微信小程序项目实践之验证码倒计时功能
- 获取验证码程序
- 微信小程序如何再次获取用户授权
- 微信小程序例子——获取用户唯一标识openid