前言海风日记的登录功能支持手机号验证码登录使用TextInput的InputType.PhoneNumber类型限制输入格式并通过setInterval实现 60 秒验证码倒计时。本文将从LoginPhonePage.ets源码出发深入讲解手机号登录的实现。一、手机号输入Statephone:stringStatecode:stringTextInput({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.phonev})二、验证码输入与倒计时StatecodeSent:booleanfalseStatecountdown:number0privatetimer:number-1startCountdown(){this.codeSenttruethis.countdown60this.timersetInterval((){this.countdown-1if(this.countdown0){clearInterval(this.timer)this.codeSentfalse}},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.codeSentthis.phone.length11).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。总结本文通过海风日记的手机号登录页深入讲解了验证码登录的实现InputType.PhoneNumber手机号键盘setInterval 倒计时60 秒验证码按钮禁用状态根据条件控制定时器清理生命周期管理下一篇文章将深入讲解setInterval 倒计时实现敬请期待。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源TextInput 组件文档setInterval API 文档海风日记项目源码[HarmonyOS 开发者官网](https://atomgit.com/openharmony/docs开源鸿蒙跨平台社区
手机号登录页：TextInput 类型 PhoneNumber + 验证码倒计时
发布时间：2026/7/21 6:25:31
前言海风日记的登录功能支持手机号验证码登录使用TextInput的InputType.PhoneNumber类型限制输入格式并通过setInterval实现 60 秒验证码倒计时。本文将从LoginPhonePage.ets源码出发深入讲解手机号登录的实现。一、手机号输入Statephone:stringStatecode:stringTextInput({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.phonev})二、验证码输入与倒计时StatecodeSent:booleanfalseStatecountdown:number0privatetimer:number-1startCountdown(){this.codeSenttruethis.countdown60this.timersetInterval((){this.countdown-1if(this.countdown0){clearInterval(this.timer)this.codeSentfalse}},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.codeSentthis.phone.length11).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。总结本文通过海风日记的手机号登录页深入讲解了验证码登录的实现InputType.PhoneNumber手机号键盘setInterval 倒计时60 秒验证码按钮禁用状态根据条件控制定时器清理生命周期管理下一篇文章将深入讲解setInterval 倒计时实现敬请期待。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源TextInput 组件文档setInterval API 文档海风日记项目源码[HarmonyOS 开发者官网](https://atomgit.com/openharmony/docs开源鸿蒙跨平台社区
