一、閑扯淡

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

二、效果展示

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

三、實現思路及代碼說明

這個功能的實現比較簡單，所以就需要兩步搞定
1. 驗證手機號
在前面的文章中都講過，輸入手機號和驗證碼時會做一個輸入的有效性驗證，這個驗證是不經過服務器的，是咱們客戶端自己定的驗證規則，比如說手機號的位數不足11位，驗證碼不足指定的位數，咱們客戶端直接在頁面中禁用掉登錄的按鈕就可以了。也可以加也給提示提醒用戶。
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開頭的，因為手機號現在好像還沒有2開頭的，這個規則讀者可以自己設置，這里僅做演示，而canGetcode變量是為了控制登錄按鈕是否可以點擊的。

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

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

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

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

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

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

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

倒計時函數：
login_code.js

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

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

四、源碼地址

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