手机号登录页：TextInput 类型 PhoneNumber + 验证码倒计时

前言

"海风日记"的登录功能支持手机号验证码登录，使用TextInput的InputType.PhoneNumber类型限制输入格式，并通过setInterval实现 60 秒验证码倒计时。

本文将从LoginPhonePage.ets源码出发，深入讲解手机号登录的实现。

一、手机号输入

@Statephone:string=''@Statecode:string=''TextInput({placeholder:'请输入手机号',text:this.phone}).width('100%').height(52).fontSize(16).type(InputType.PhoneNumber)// 手机号键盘.placeholderColor(COLOR_TEXT_HINT).backgroundColor('#FFFFFF').borderRadius(INPUT_RADIUS).border({width:1,color:'rgba(200,180,140,0.25)'}).padding({left:16,right:16}).onChange((v)=>{this.phone=v})

二、验证码输入与倒计时

@StatecodeSent:boolean=false@Statecountdown:number=0privatetimer:number=-1startCountdown(){this.codeSent=truethis.countdown=60this.timer=setInterval(()=>{this.countdown-=1if(this.countdown<=0){clearInterval(this.timer)this.codeSent=false}},1000)}aboutToDisappear(){if(this.timer!==-1){clearInterval(this.timer)}}

三、验证码按钮

Button(this.codeSent?`${this.countdown}s`:'获取验证码').height(52).fontSize(14).fontColor(this.codeSent?COLOR_TEXT_SECONDARY:COLOR_PRIMARY).backgroundColor(this.codeSent?'rgba(200,180,140,0.10)':'rgba(245,166,35,0.10)').borderRadius(INPUT_RADIUS).border({width:1,color:this.codeSent?'rgba(200,180,140,0.20)':'rgba(245,166,35,0.30)'}).padding({left:14,right:14}).enabled(!this.codeSent&&this.phone.length===11).onClick(()=>{this.startCountdown()})

四、登录按钮

Button('立即登录').width('100%').height(52).fontSize(17).fontColor('#FFFFFF').fontWeight(FontWeight.Bold).backgroundColor(COLOR_PRIMARY).borderRadius(BTN_RADIUS_FULL).shadow({radius:16,color:'rgba(245,166,35,0.35)',offsetY:4}).margin({top:28,left:PAGE_PADDING,right:PAGE_PADDING}).onClick(()=>{router.replaceUrl({url:'pages/login/LoginNamePage'})})

五、倒计时生命周期管理

aboutToDisappear(){if(this.timer!==-1){clearInterval(this.timer)// 页面销毁时清理定时器}}

六、常见问题

6.1 倒计时不停止

问题：页面关闭后倒计时仍在运行。

原因：未在aboutToDisappear中清理定时器。

解决方案：在aboutToDisappear中调用clearInterval。

总结

本文通过"海风日记"的手机号登录页，深入讲解了验证码登录的实现：

1. InputType.PhoneNumber：手机号键盘
2. setInterval 倒计时：60 秒验证码
3. 按钮禁用状态：根据条件控制
4. 定时器清理：生命周期管理

下一篇文章将深入讲解setInterval 倒计时实现，敬请期待。

如果这篇文章对你有帮助，欢迎点赞👍、收藏⭐、关注🔔，你的支持是我持续创作的动力！

相关资源：

• TextInput 组件文档
• setInterval API 文档
• 海风日记项目源码
• [HarmonyOS 开发者官网](https://atomgit.com/openharmony/docs
• 开源鸿蒙跨平台社区