快捷導(dǎo)航

OpenHarmony實現(xiàn)類Android短信驗證碼及倒計時流程詳解

更新時間：2022年11月23日 08:53:16 作者：堅果的博客

這篇文章主要介紹了OpenHarmony實現(xiàn)類Android短信驗證碼及倒計時流程，發(fā)送短信驗證碼后,一般在界面上都會有一個倒計時的顯示.在安卓中,實現(xiàn)類似的倒計時有多種方式,當(dāng)然背后的基本原理都是設(shè)定一個初始值,然后每過一定的間隔時間執(zhí)行操作

1.背景

倒計時的效果在網(wǎng)站或其他平臺看到的很多了吧，今天就讓我們來看看在OpenHarmony中如何實現(xiàn)它吧！

2.效果預(yù)覽

視頻效果演示

傳送門

開發(fā)板：DAYU200

IDE：DevEco Studio 3.0 Release Build Version: 3.0.0.993,

API：9

3.思路

1.獲取Input框輸入值，判斷手機號碼是否正確，不正確的話，彈窗提示。

2.設(shè)置按鈕倒計時，設(shè)置默認sec=60,點擊后開始計數(shù)，每秒減1。

3.封裝倒計時函數(shù)，獲取數(shù)字，設(shè)置定時器，如果倒計時為0，就停止計時。

好的，接下來我們看一下代碼實現(xiàn)。

4.創(chuàng)建應(yīng)用

5.刪除原有代碼

刪除原有代碼，導(dǎo)入圖片資源，做好準(zhǔn)備工作。

圖片右鍵保存：

6.編寫代碼實現(xiàn)功能

1.布局拆分

首先我們來看一下布局，然后將布局分解成它的各個基礎(chǔ)元素：

識別出它的行和列。
這個布局是否包含網(wǎng)格布局？
是否有重疊的元素？
界面是否需要選項卡？
留意需要對齊、內(nèi)間距、或者邊界的區(qū)域。

首先，識別出稍大的元素。在這個例子中，一個重疊圖像，兩個行區(qū)域，和一個文本區(qū)域。

2.實現(xiàn)堆疊布局

首先是背景圖片，我們采用堆疊布局，用Stack來展示背景并鋪滿整個頁面。

    Stack({ alignContent: Alignment.Center }) {
Image($r('app.media.img'))
        .width('100%')
        .width('100%')
    }

3.實現(xiàn)文本展示

第一行為一個文本展示，我們用Text來展示。

Text("短信驗證碼倒計時")
  .fontSize(36)

4.實現(xiàn)輸入框

TextInput({ placeholder: "請輸入手機號" }) // 無輸入時的提示文本(可選)。
  .type(InputType.Normal) // 輸入框類型
  .placeholderColor($r("app.color.fgLevel1")) // 設(shè)置placeholder顏色
  .placeholderFont({
    size: 20,
    weight: FontWeight.Normal,
    style: FontStyle.Normal
  }) // 設(shè)置placeholder文本樣式
  .enterKeyType(EnterKeyType.Next) // 設(shè)置輸入法回車鍵類型
  .caretColor($r("app.color.info")) // 設(shè)置輸入框光標(biāo)顏色
  .maxLength(20) // 設(shè)置文本的最大輸入字符數(shù)
  .onChange((value: string) => {
    console.log("輸入的數(shù)據(jù)是" + value) // 輸入發(fā)生變化時，觸發(fā)回調(diào)
    this.text = value;
  })
  .width(200)
  .height(50).backgroundColor(Color.White)

5.實現(xiàn)短信驗證碼按鈕

Button(this.flag ? `${this.sec}` + "s后重新獲取" : "短信驗證嗎", { type: ButtonType.Normal })
            .width(150)
            .height(50)
            .backgroundColor($r("app.color.morandi2_alpha"))
            .fontSize(18)
            .fontColor($r("app.color.controlFocusFg_alpha"))
            .borderRadius(10)
            .onClick(() => {
              }
            })
        }

6.定時器的實現(xiàn)

private materOnClick() {
  var T = setInterval(() => {
    if (this.sec <= 0) {
      clearTimeout(T)
    } else {
      this.sec--
    }
  }, 1000)
}