微信小程序之获取验证码js
在微信小程序中怎樣實(shí)現(xiàn)獲取驗(yàn)證碼的倒計(jì)時(shí)功能捏,倒計(jì)時(shí)的原理是一樣一樣的,就是某些地方需要注意。
第一步:結(jié)構(gòu)
<view class='get-code' wx:if="{{!isShow}}" bindtap='getCode'>獲取驗(yàn)證碼</view> <view class='get-code' wx:if="{{isShow}}">{{sec}}秒后重新發(fā)送</view>注意:微信小程序中要用到兩個(gè)按鈕,不像HTML里面直接一個(gè)按鈕就解決了。如果非要一個(gè)按鈕的話,就需要把不變的內(nèi)容即“獲取驗(yàn)證碼”與“秒后重新發(fā)送”裝在一個(gè)數(shù)組里面,然后判斷什么時(shí)候選擇顯示哪一個(gè)
備注:用wx:if條件渲染來(lái)判斷某個(gè)按鈕是否顯示與隱藏。。{{ sec }}是要?jiǎng)討B(tài)顯示的秒數(shù),只綁定一個(gè)view的點(diǎn)擊事件就不怕重復(fù)點(diǎn)擊了。。。
第二步:樣式就不用說(shuō)了,自己定義。主要是js。我是把這個(gè)獲取驗(yàn)證碼的函數(shù)作為公用的部分,所以新建一個(gè)公用的js文件放在你想放的目錄下,然后js代碼:
function getCode(_this,num){_this.setData({isShow: true //按鈕1隱藏,按鈕2顯示})var remain=num; //用另外一個(gè)變量來(lái)操作秒數(shù)是為了保存最初定義的倒計(jì)時(shí)秒數(shù),就不用在計(jì)時(shí)完之后再手動(dòng)設(shè)置秒數(shù)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模塊化 也可以寫(xiě)成getCode:getCode }?
第三步:在需要getCode函數(shù)的頁(yè)面的js中引入該公用js文件,比如:
var code=require('../../public/js/com.js')備注:用一個(gè)變量來(lái)存,我自己認(rèn)為是為了好調(diào)用里面模塊
第四步:在Page中申明:
data: {isShow:false, //默認(rèn)按鈕1顯示,按鈕2不顯示sec:"4" //設(shè)定倒計(jì)時(shí)的秒數(shù) }, getCode:function(){var _this=this; //防止this對(duì)象的混雜,用一個(gè)變量來(lái)保存var time=_this.data.sec //獲取最初的秒數(shù)code.getCode(_this,time); //調(diào)用倒計(jì)時(shí)函數(shù) },?
最后就成功了。
問(wèn)題:點(diǎn)擊view之后怎樣獲取該view的text值?待解決
?
轉(zhuǎn)載于:https://www.cnblogs.com/zjjDaily/p/8033816.html
總結(jié)
以上是生活随笔為你收集整理的微信小程序之获取验证码js的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: oracle 之 using 使用
- 下一篇: 2017年我国智能卡行业市场现状及发展趋