OpenHarmony實現(xiàn)類Android短信驗證碼及倒計時流程詳解
1.背景
倒計時的效果在網站或其他平臺看到的很多了吧,今天就讓我們來看看在OpenHarmony中如何實現(xiàn)它吧!
2.效果預覽
視頻效果演示
開發(fā)板:DAYU200
IDE:DevEco Studio 3.0 Release Build Version: 3.0.0.993,
API:9
3.思路
1.獲取Input框輸入值,判斷手機號碼是否正確,不正確的話,彈窗提示。
2.設置按鈕倒計時,設置默認sec=60,點擊后開始計數(shù),每秒減1。
3.封裝倒計時函數(shù),獲取數(shù)字,設置定時器,如果倒計時為0,就停止計時。
好的,接下來我們看一下代碼實現(xiàn)。
4.創(chuàng)建應用

5.刪除原有代碼
刪除原有代碼,導入圖片資源,做好準備工作。
圖片右鍵保存:


6.編寫代碼實現(xiàn)功能
1.布局拆分
首先我們來看一下布局,然后將布局分解成它的各個基礎元素:
- 識別出它的行和列。
- 這個布局是否包含網格布局?
- 是否有重疊的元素?
- 界面是否需要選項卡?
- 留意需要對齊、內間距、或者邊界的區(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")) // 設置placeholder顏色
.placeholderFont({
size: 20,
weight: FontWeight.Normal,
style: FontStyle.Normal
}) // 設置placeholder文本樣式
.enterKeyType(EnterKeyType.Next) // 設置輸入法回車鍵類型
.caretColor($r("app.color.info")) // 設置輸入框光標顏色
.maxLength(20) // 設置文本的最大輸入字符數(shù)
.onChange((value: string) => {
console.log("輸入的數(shù)據是" + value) // 輸入發(fā)生變化時,觸發(fā)回調
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)
}
7.簽名及真機調試
將搭載OpenHarmony標準系統(tǒng)的開發(fā)板與電腦連接。
點擊File> Project Structure… > Project>SigningConfigs界面勾選“Automatically generate signing”,等待自動簽名完成即可,點擊“OK”。如下圖所示:

在編輯窗口右上角的工具欄,點擊

按鈕運行。效果如下所示:

8.源碼地址
9.總結
本文介紹了如何使用ArkUI框架,帶大家完成短信驗證登錄,當然除了文中展示的辦法,開發(fā)者還可以通過拓展其他相關的屬性和方法,實現(xiàn)更多好玩的樣例。
到此這篇關于OpenHarmony實現(xiàn)類Android短信驗證碼及倒計時流程詳解的文章就介紹到這了,更多相關OpenHarmony短信驗證碼及倒計時內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
- Android自定義短信倒計時view流程分析
- Android使用CountDownTimer模擬短信驗證倒計時
- Android使用Kotlin和RxJava 2.×實現(xiàn)短信驗證碼倒計時效果
- Android 用RxBinding與RxJava2實現(xiàn)短信驗證碼倒計時功能
- Android實現(xiàn)發(fā)送短信驗證碼倒計時功能示例
- Android短信驗證碼倒計時驗證的2種常用方式
- Android自定義Chronometer實現(xiàn)短信驗證碼秒表倒計時功能
- Android開發(fā)之獲取短信驗證碼后按鈕背景變化并且出現(xiàn)倒計時
- Android封裝實現(xiàn)短信驗證碼的獲取倒計時
相關文章
Android利用ViewPager實現(xiàn)用戶引導界面效果的方法
這篇文章主要介紹了Android利用ViewPager實現(xiàn)用戶引導界面效果的方法,結合實例形式詳細分析了Android軟件功能界面的初始化、view實例化、動畫功能實現(xiàn)與布局相關技巧,需要的朋友可以參考下2016-07-07
android開發(fā)教程之獲取power_profile.xml文件的方法(android運行時能耗值)
在Android手機中,對于手機中的每個部件(cpu、led、gps、3g等等)運行時對應的能耗值都放在power_profile.xml文件中2014-02-02
如何使用Flutter實現(xiàn)58同城中的加載動畫詳解
這篇文章主要給大家介紹了關于如何使用Flutter實現(xiàn)58同城中加載動畫詳?shù)南嚓P資料,文中通過示例代碼介紹的非常詳細,對大家學習或者使用Flutter具有一定的參考學習價值,需要的朋友們下面來一起學習學習吧2019-10-10

