一、閑扯淡

以前的登錄功能都是輸入帳號密碼，然后登錄，這種方式讓用戶吃盡了苦頭，因為用戶需要自己記住登錄的密碼，一個app還好，要是十幾個app的密碼都需要用戶自己記住，那用戶就要崩潰了，每次都得試好幾個密碼，有人說，都設(shè)置一個密碼不就行了嗎？這種方式可以，但是很危險，一旦你的密碼泄露一個，想象一下你的其他app是不是就一起芭比Q了（完了），所以后面出現(xiàn)了驗證碼登錄功能，即用戶輸入自己的手機號，通過手機號會獲取到一個驗證碼，這個驗證碼有一個有效期限，過了有效期需要重新獲取。通過這個驗證碼登錄，就會安全很多，只要你的驗證碼在有效期內(nèi)不泄露就不會有事。手機號是每個人都會記住的數(shù)字。安全又好記，驗證碼登錄真的是一個字-----香，本節(jié)就一起看下驗證碼登錄功能在HarmonyOS中如何實現(xiàn)吧。

二、效果展示

使用測試手機號通過硬編碼寫在程序里面的，為了演示方便，使用了11111111111做手機號，讀者在真實項目中可以自己定義規(guī)則。

三、實現(xiàn)思路及代碼說明

這個功能的實現(xiàn)比較簡單，所以就需要兩步搞定
1. 驗證手機號
在前面的文章中都講過，輸入手機號和驗證碼時會做一個輸入的有效性驗證，這個驗證是不經(jīng)過服務(wù)器的，是咱們客戶端自己定的驗證規(guī)則，比如說手機號的位數(shù)不足11位，驗證碼不足指定的位數(shù)，咱們客戶端直接在頁面中禁用掉登錄的按鈕就可以了。也可以加也給提示提醒用戶。
code_login.js

   validateInput() {
        //用戶不滿足輸入有效性
        if (this.mobile.length < 11 ||
        !this.mobile.startsWith("1")) {
            this.canGetCode = false;
        } else { //滿足輸入有效性
            if (this.agree) {
                this.canGetCode = true;
            } else {
                this.canGetCode = false;
            }
        }
    },

首先會驗證手機號是否有效，即是否為11位或者是否是1開頭的，因為手機號現(xiàn)在好像還沒有2開頭的，這個規(guī)則讀者可以自己設(shè)置，這里僅做演示，而canGetcode變量是為了控制登錄按鈕是否可以點擊的。

  <button show="true"
            style="background-color :
            #121212; padding :
            10px; margin :
            10px; width : 100%;"
            waiting="{{getting_code}}"
            onclick="gettingCode" disabled="{{!canGetCode}}">
        {{retryCode}}
    button>

“{{retryCode}}”這種表示方法相信有些學(xué)過vue.js的小伙伴很熟悉，作用是用在相應(yīng)的js中定義的值，去渲染到界面上，包括login_code.js中的值配置方式，鴻蒙arkUI和vue.js都有異曲同工之妙。
在對應(yīng)的js文件中定義了對應(yīng)值后，就可以使用“{{retryCode}}”將值渲染到界面上。

當(dāng)用戶的輸入符合咱們定義的規(guī)則后，就可以請求服務(wù)器，向用戶的手機發(fā)送驗證碼，同時咱們的客戶端維護一個倒計時，倒計時結(jié)束后可以提示用戶重新獲取驗證碼。

checkCode() {
        if (this.mobile == '11111111111') {
            this.code = "3497";
            this.sent = true;
            this.showRemainTime = true;
            this.timerID = setInterval(this.countDown, 1000);

            prompt.showToast({
                message: '驗證碼已發(fā)送'
            })
        } else {
            prompt.showToast({
                message: '手機號不存在！'
            })
            this.canGetCode = true;
        }
        this.getting_code = false;
    },

為了演示咱們把手機號定義成硬編碼，如果用戶輸入的手機號為“11111111111”時給用戶發(fā)驗證碼。 this.code = “3497”;這個是為了輸入后展示顯示驗證碼的效果?！癵etting_code”變量是為了展示正在獲取驗證碼的動效。
2. 倒計時控制
實現(xiàn)倒計時功能咱們需要用到下面兩個函數(shù)

 this.timerID = setInterval(this.countDown, 1000);//每隔1秒調(diào)用一次countDown函數(shù)
clearInterval(this.timerID) //清除掉timerID標(biāo)識的函數(shù)，用來控制倒計時停止

倒計時函數(shù)：
login_code.js

  //倒計時算法
    countDown() {
        if (this.remain_time != 0) {
            this.remain_time -= 1;
        } else {
            this.remain_time = 3;
            clearInterval(this.timerID)
            this.retryCode = '重發(fā)驗證碼'
            this.sent = false;
            this.canGetCode = true;
            this.showRemainTime = !this.showRemainTime;
        }
    },
//調(diào)用
this.timerID = setInterval(this.countDown, 1000);//每隔1秒調(diào)用一次
//注意setInterval（）的第一個參數(shù)寫的是函數(shù)名字，后面沒有括號

因為調(diào)用倒計時函數(shù)時會通過setInterval沒隔一秒調(diào)用一次，所以就可以定義一個變量remain_time，表示當(dāng)前還剩多少時間，然后當(dāng)函數(shù)被調(diào)用一次就將這個變量值減1，直到減到0，然后就清除掉計時器，然后設(shè)置相關(guān)的狀態(tài)，具體的看代碼，源碼會在末尾貼出，目前主要是實現(xiàn)頁面，真正和服務(wù)端的交互邏輯在后面會講。

四、源碼地址

如果已經(jīng)用git clone下載了源碼的讀者可以直接使用git pull更新源碼，其他讀者可以使用git clone https://gitee.com/zhong-walt/community.git 拉取源碼，這個系列的博客是同一個代碼倉庫，所以git clone 拉取的是所有的最新源碼。
源碼地址