微信小程序之獲取驗證碼js
阿新 • • 發佈:2017-12-13
點擊事件 兩個 一個數 隱藏 直接 blog fun req 對象
在微信小程序中怎樣實現獲取驗證碼的倒計時功能捏,倒計時的原理是一樣一樣的,就是某些地方需要註意。
第一步:結構
<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