温馨提示：本篇博客的详细代码已发布到 git : https://gitcode.com/nutpi/HarmonyosNext 可以下载运行哦！
HarmonyOS NEXT 登录模块开发教程（三）上：短信验证码登录基础实现
文章目录
效果预览
1. 引言
在前两篇教程中，我们介绍了HarmonyOS NEXT登录模块的整体架构、模态窗口的实现原理以及一键登录页面的实现。本篇教程将深入讲解短信验证码登录的基础功能实现，包括手机号输入、验证码发送等核心功能。
2. OtherWaysToLogin组件概述
2.1 组件功能
OtherWaysToLogin组件的基础功能包括：
- 手机号输入框，支持输入过滤和长度限制
- 发送验证码按钮，支持基础交互
- 基础UI布局实现
2.2 基础状态变量
@Component
export struct OtherWaysToLogin {
// 发送验证码按钮的颜色
@State buttonColor: ResourceColor = Color.Grey;
// 发送验证码按钮的内容
@State buttonContent: ResourceStr = $r('app.string.modalwindow_verify');
// 手机号是否可用
phoneNumberAvailable: boolean = false;
}
3. 基础UI实现
3.1 顶部标题区域
Column({ space: SPACE_TEN }) {
Row({ space: SPACE_TEN }) {
Image($r('app.media.phone'))
.width($r('app.integer.modalwindow_user_image_height'))
.borderRadius($r('app.integer.modalwindow_border_radius_mid'))
Text($r('app.string.modalwindow_phone_login'))
.fontSize($r('app.integer.modalwindow_font_size_mid'))
}
.width($r('app.string.modalwindow_size_full'))
Text($r('app.string.modalwindow_new'))
.width($r('app.string.modalwindow_size_full'))
}
.width($r('app.string.modalwindow_size_full'))
.alignItems(HorizontalAlign.Start)
代码讲解
- 外层布局容器
Column({ space: SPACE_TEN }) {
// 内容
}
.width($r('app.string.modalwindow_size_full'))
.alignItems(HorizontalAlign.Start)
- 使用 Column 组件创建垂直布局
space: SPACE_TEN设置子元素间垂直间距为10- 通过
width设置宽度占满父容器 alignItems设置子元素水平左对齐
- 标题行布局
Row({ space: SPACE_TEN }) {
Image($r('app.media.phone'))
.width($r('app.integer.modalwindow_user_image_height'))
.borderRadius($r('app.integer.modalwindow_border_radius_mid'))
Text($r('app.string.modalwindow_phone_login'))
.fontSize($r('app.integer.modalwindow_font_size_mid'))
}
.width($r('app.string.modalwindow_size_full'))
- 使用 Row 组件创建水平布局
space: SPACE_TEN设置子元素间水平间距为10- 包含手机图标和标题文本两个子元素
- 设置宽度占满父容器
- 手机图标
Image($r('app.media.phone'))
.width($r('app.integer.modalwindow_user_image_height'))
.borderRadius($r('app.integer.modalwindow_border_radius_mid'))
- 使用资源引用加载手机图标
- 设置图标宽度
- 添加圆角效果
- 标题文本
Text($r('app.string.modalwindow_phone_login'))
.fontSize($r('app.integer.modalwindow_font_size_mid'))
- 使用资源引用显示"手机号登录"文本
- 设置文字大小
- 提示文本
Text($r('app.string.modalwindow_new'))
.width($r('app.string.modalwindow_size_full'))
- 使用资源引用显示提示文本
- 设置宽度占满父容器
3.2 手机号输入区域
Row() {
Text($r('app.string.modalwindow_86'))
Image($r('app.media.arrow_right'))
.size({
width: $r('app.integer.modalwindow_arrow_right_height'),
height: $r('app.integer.modalwindow_arrow_right_height')
})
.margin($r('app.integer.modalwindow_margin_default'))
TextInput({ placeholder: $r('app.string.modalwindow_input_phone_number') })
.inputFilter('[0-9]')
.backgroundColor(Color.Transparent)
.caretColor(Color.Grey)
.width($r('app.string.modalwindow_size_full'))
.maxLength(PHONE_NUMBER_LENGTH)
.onChange((value: string) => {
if (value.length === PHONE_NUMBER_LENGTH) {
this.phoneNumberAvailable = true;
this.buttonColor = Color.Blue;
} else {
this.phoneNumberAvailable = false;
this.buttonColor = Color.Grey;
}
})
}
3.3 发送验证码按钮
Button(this.buttonContent)
.type(ButtonType.Normal)
.border({ radius: $r('app.integer.modalwindow_border_radius') })
.width($r('app.string.modalwindow_size_full'))
.backgroundColor(this.buttonColor)
.onClick(() => {
if (!this.phoneNumberAvailable) {
promptAction.showToast({
message: $r('app.string.modalwindow_message_right_phone_number')
});
return;
}
promptAction.showToast({
message: $r('app.string.modalwindow_message_verify_code_send')
});
})
4. 基础交互逻辑
4.1 手机号输入验证
手机号输入验证主要包括：
- 限制只能输入数字
- 限制最大长度为11位
- 实时验证输入长度，控制按钮状态
4.2 发送验证码基础逻辑
发送验证码的基础逻辑包括：
- 验证手机号是否有效
- 提供适当的交互反馈
- 基础按钮状态管理
5. 小结
本篇教程介绍了短信验证码登录的基础功能实现，包括：
- 基础UI布局
- 手机号输入验证
- 发送验证码按钮的基础功能
在下一篇教程中，我们将介绍更多进阶功能的实现。