微信小程序之获取验证码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值?待解决
微信小程序之获取验证码js的更多相关文章
- 微信小程序【获取验证码】倒计时效果
最近开始接触微信小程序,会记录一些相关的小功能——例如这次是点击[获取验证码]按钮出现的倒计时效果. 原文: http://blog.csdn.net/Wu_shuxuan/article/detai ...
- 微信小程序-06-详解介绍.js 逻辑层文件-注册页面
上一篇介绍的是 app.js 逻辑层文件中注册程序,对应的每个分页面都会有的 js 文件中 page() 函数注册页面 微信小程序-06-详解介绍.js 逻辑层文件-注册页面 宝典官方文档: http ...
- 微信小程序——3、逻辑js文件
逻辑层js文件 微信小程序前端进行了层次划分,分为逻辑层和视图层.逻辑层实现对数据的加工和处理.与HTML页面相似,逻辑层使用JavaScript编写.逻辑层将数据处理后发送至视图层,同时接受视图层的 ...
- 微信小程序-05-详解介绍.js 逻辑层文件
上一篇介绍了关于.json 的配置文件,本篇介绍关于.js 逻辑层文件 微信小程序-05-详解介绍.js 逻辑层文件 宝典官方文档: https://developers.weixin.qq.com/ ...
- nodejs+koa+uniapp实现微信小程序登陆获取用户手机号及openId
nodejs+koa+uniapp实现微信小程序登陆获取用户手机号及openId 前言: 我准备用nodejs+koa+uniapp实现一款餐饮点单小程序,以及nodejs+koa+vue实现后端管理 ...
- 微信小程序如何获取openid
微信小程序如何获取openid wx.login({ success: res => { // 发送 res.code 到后台换取 openId, sessionKey, unionId // ...
- 微信小程序后台获取用户的opeid
1.微信小程序后台获取登录用户的openid,首先微信小程序将code传给后台服务器 wx.login({ success: function (res) { var code = res.code ...
- 【微信小程序】获取用户地理位置权限,二次请求授权,逆解析获取地址
摘要:微信小程序内获取用户地理位置信息授权,被拒绝后二次获取,获取权限后逆解析得到用户所在省市区等.. 场景:商城类小程序,在首页时需展示附近门店,即用户刚进入小程序时就需要获取到用户位置信息 ste ...
- 微信小程序,获取二维码
微信小程序,获取二维码 找到一篇很实用的博客,他已经写得很详细了,自己也懒得写,亲测有效 参考网址
随机推荐
- python与redis交互
爬虫抓来的数据根据实际情况需要存入不同数据库,今天分享一下自己把数据存入redis数据库的经验,有需要的童鞋拿走不谢. 1.环境: Mac osx + python2. 2.需要安装的python包 ...
- python小整数与str数据池,编码关系
1.小数据池:数字,字符串 数字的范围-5 ---256 字符串:1,不能有特殊字符 2,s*20 还是一个地址,s*21以后都是两个地址 2.编码关系:ascii A : 00000010 8位 一 ...
- python作用域与命名空间
什么是命名空间 比如有一个学校,有10个班级,在7班和8班中都有一个叫“小王”的同学,如果在学校的广播中呼叫“小王”时,7班和8班中的这2个人就纳闷了,你是喊谁呢!!!如果是“7班的小王”的话,那么就 ...
- 登录验证码demo-java
在一些类似于管理系统的项目中,我们在登录时经常会用到图片验证码.这里把我自己写的一个小系统(后台是java语言)的验证码部分摘出来. 总体思路是后端有一个生成验证码图片的接口,把验证码图片写入浏览器, ...
- Oracle索引详解
Oracle索引详解(二) --索引分类 Oracle 提供了大量索引选项.知道在给定条件下使用哪个选项对于一个程序的性能来说非常重要.一个错误的选择可能会引发死锁,并导致数据库性能急剧下降或进程 ...
- 二叉树Bynary_Tree(2):二叉树的递归遍历
7/18/2017 正在码,理解完就写博 7/21/2017 终于码完,借助链表实现的队列撸一个二叉树对于我来说有难度,撸了两天没有成果,我最后选用的是数组实现的循环队列去撸一个二叉树 正文如下: 以 ...
- iOS js oc相互调用JavaScriptCore(一)
原址:http://blog.csdn.net/lwjok2007/article/details/47058101 1.普通调用 从iOS7开始 苹果公布了JavaScriptCore.framew ...
- 关于C++函数返回局部对象的详细分析
以前一直挺好奇的,C++是怎么在函数内返回一个局部对象的.因为按照我之前的想法,函数返回一个基本类型的值是通过存放到ecx实现的(关于浮点不了解),但是局部对象又是比较大的,很明显不能使用寄存器作为通 ...
- 什么是副作用(Side Effect)
副作用(Side Effect)是指函数或者表达式的行为依赖于外部世界.具体可参照Wiki上的定义,副作用是指 1)函数或者表达式修改了它的SCOPE之外的状态 2)函数或者表达式除了返回语句外还与外 ...
- Java面试题汇总
第一阶段:三年我认为三年对于程序员来说是第一个门槛,这个阶段将会淘汰掉一批不适合写代码的人.这一阶段,我们走出校园,迈入社会,成为一名程序员,正式从书本 上的内容迈向真正的企业级开发.我们知道如何团队 ...