1. 程式人生 > >微信小程序之獲取驗證碼js

微信小程序之獲取驗證碼js

點擊事件 兩個 一個數 隱藏 直接 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