微信小程序之獲取驗證碼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值？待解決