1.背景

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

2.效果預(yù)覽

視頻效果演示

• 開(kāi)發(fā)板：DAYU200

• IDE：DevEco Studio 3.0 Release Build Version: 3.0.0.993,

• API：9

3.思路

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

2. 設(shè)置按鈕倒計(jì)時(shí)，設(shè)置默認(rèn)sec=60,點(diǎn)擊后開(kāi)始計(jì)數(shù)，每秒減1。

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

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

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

5.刪除原有代碼

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

6.編寫(xiě)代碼，實(shí)現(xiàn)功能

1、布局拆分

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

• 識(shí)別出它的行和列。

• 這個(gè)布局是否包含網(wǎng)格布局？

• 是否有重疊的元素？

• 界面是否需要選項(xiàng)卡？

• 留意需要對(duì)齊、內(nèi)間距、或者邊界的區(qū)域。

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

2、實(shí)現(xiàn)堆疊布局

首先是背景圖片，我們采用堆疊布局，用Stack來(lái)展示背景并鋪滿整個(gè)頁(yè)面。

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

（左右移動(dòng)查看全部?jī)?nèi)容）

3、實(shí)現(xiàn)文本展示

第一行為一個(gè)文本展示，我們用Text來(lái)展示。

Text("短信驗(yàn)證碼倒計(jì)時(shí)")
 .fontSize(36)

（左右移動(dòng)查看全部?jī)?nèi)容）

4、實(shí)現(xiàn)輸入框

TextInput({ placeholder: "請(qǐng)輸入手機(jī)號(hào)" }) // 無(wú)輸入時(shí)的提示文本(可選)。
 .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ā)生變化時(shí)，觸發(fā)回調(diào)
  this.text = value;
 })
 .width(200)
 .height(50).backgroundColor(Color.White)

（左右移動(dòng)查看全部?jī)?nèi)容）

5、實(shí)現(xiàn)短信驗(yàn)證碼按鈕

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

（左右移動(dòng)查看全部?jī)?nèi)容）

6、定時(shí)器的實(shí)現(xiàn)

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

（左右移動(dòng)查看全部?jī)?nèi)容）

7.簽名及真機(jī)調(diào)試

將搭載OpenHarmony標(biāo)準(zhǔn)系統(tǒng)的開(kāi)發(fā)板與電腦連接。

點(diǎn)擊File> Project Structure… > Project>SigningConfigs界面勾選“Automatically generate signing”，等待自動(dòng)簽名完成即可，點(diǎn)擊“OK”。如下圖所示：

在編輯窗口右上角的工具欄，點(diǎn)擊按鈕運(yùn)行。效果如下所示：

8.源碼地址

堅(jiān)果/smslogin (https://gitee.com/jianguo888/smslogin)

9.總結(jié)

本文介紹了如何使用ArkUI框架，帶大家完成短信驗(yàn)證登錄，當(dāng)然除了文中展示的辦法，開(kāi)發(fā)者還可以通過(guò)拓展其他相關(guān)的屬性和方法，實(shí)現(xiàn)更多好玩的樣例。

提示：本文由電子發(fā)燒友社區(qū)發(fā)布，轉(zhuǎn)載請(qǐng)注明以上來(lái)源。如需社區(qū)合作及入群交流，請(qǐng)?zhí)砑游⑿臙EFans0806，或者發(fā)郵箱[email protected]。

更多熱點(diǎn)文章閱讀

• 鴻湖萬(wàn)聯(lián)產(chǎn)品推薦官招募！啟鴻OpenHarmony開(kāi)發(fā)板免費(fèi)體驗(yàn)
• 九聯(lián)科技發(fā)布通過(guò)OpenHarmony兼容性測(cè)評(píng)的NB-IoT模組UMN202-B6
• 華為多機(jī)型開(kāi)啟鴻蒙 HarmonyOS 3 正式版不限量升級(jí)
• ROC-RK3568-PC開(kāi)發(fā)板體驗(yàn)：網(wǎng)絡(luò)數(shù)據(jù)傳輸性能測(cè)試
• 使用WSL2編譯OpenHarmony DAYU200鏡像效率翻倍

END

就喜歡獎(jiǎng)勵(lì)一個(gè)“”和“在看”唄~