在微信小程序中怎樣實(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)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。