TypeScript大前端
HarmonyOS 应用开发实战：登录注册页面实现
基于 ArkTS 与 ArkUI 框架，从零构建 HarmonyOS 专业级登录页面。涵盖 UI 设计规范、静态布局搭建、动态交互逻辑实现及代码深度剖析。重点讲解了状态管理 (@State)、双向绑定、路由跳转及表单校验优化，提供了完整的登录功能代码示例与工程规范建议，帮助开发者掌握组件化与状态驱动的现代应用开发思维。
基于 ArkTS 与 ArkUI 框架，从零构建 HarmonyOS 专业级登录页面。涵盖 UI 设计规范、静态布局搭建、动态交互逻辑实现及代码深度剖析。重点讲解了状态管理 (@State)、双向绑定、路由跳转及表单校验优化，提供了完整的登录功能代码示例与工程规范建议，帮助开发者掌握组件化与状态驱动的现代应用开发思维。
在移动应用开发中，登录/注册页面是用户与系统建立身份关联的第一道门户，其设计质量直接影响用户的第一印象与使用体验。本文将基于 ArkTS 与 HarmonyOS 的 ArkUI 框架，从 UI 设计到交互逻辑，完整实现一个简洁、安全、响应式的登录页面。
根据需求草图，我们的登录页面需包含以下核心元素：
整体风格遵循 HarmonyOS 设计语言（HUAWEI Design）：
vp 单位确保多设备适配；最终效果如下图所示：
✅ 关键点：Logo 采用圆形裁剪（
borderRadius: 100）；输入框宽度统一为父容器的 80%；按钮等宽排列，间距 10vp；整体垂直居中，顶部留出足够呼吸空间。
在未接入业务逻辑前，我们首先构建静态 UI 结构，确保视觉呈现符合设计稿。通过 Column 垂直布局 + Row 水平按钮组，配合 space、margin、width 等属性，精准控制组件间距与尺寸。
完成后的静态页面如下：
静态页面只是骨架，真正的价值在于交互逻辑。我们为登录页添加以下功能：
最终交互效果如下动图所示：
以下是对完整代码的逐层拆解与优化建议，涵盖模块导入、数据建模、状态管理、UI 渲染、事件处理、路由跳转六大核心环节。
import { promptAction, router, InputType, AlertDialog } from '@kit.ArkUI';
// 定义用户接口
interface User {
uname: string;
upwd: string;
}
@Entry
@Component
struct Index {
// 1. 定义状态变量，绑定输入框的值
@State user: User = { uname: '', upwd: '' };
// 2. 定义加载状态，防止重复点击
@State isLoading: boolean = false;
build() {
Column({ space: 10 }) {
// Logo
Image($r('app.media.my'))
.width(200)
.height(200)
.margin({ top: 50, bottom: 20 })
.border({ radius: 100 });
// 账户名
TextInput({ placeholder: '请输入账户名', text: this.user.uname })
.type(InputType.Normal)
.width('80%')
.onChange((value) => {
this.user.uname = value;
});
// 密码
TextInput({ placeholder: '请输入密码', text: this.user.upwd })
.type(InputType.Password)
.width('80%')
.onChange((value) => {
this.user.upwd = value;
});
// 按钮行
Row({ space: 10 }) {
Button(this.isLoading ? '登录中...' : '登录')
.width('50%')
.onClick(() => this.handleLogin())
.enabled(!this.isLoading);
Button('取消')
.width('50%')
.backgroundColor('#ff433e3e')
.onClick(() => this.handleCancel());
}
.width('80%')
.justifyContent(FlexAlign.Center);
}
.width('100%')
.height('100%')
.alignItems(HorizontalAlign.Center);
}
handleCancel() {
this.user.uname = '';
this.user.upwd = '';
promptAction.showToast({ message: '已取消登录', duration: 2000 });
}
async handleLogin() {
if (!this.user.uname || !this.user.upwd) {
promptAction.showToast({ message: '请输入完整信息', duration: 2000 });
return;
}
this.isLoading = true; // 开启加载状态
try {
if (this.user.uname === 'admin' && this.user.upwd === '123456') {
await router.pushUrl({ url: 'pages/IndexPage' });
console.log('跳转到主页成功');
} else {
promptAction.showToast({ message: '账号或密码错误', duration: 2000 });
}
} catch (err) {
console.error('路由跳转失败:', err);
promptAction.showToast({ message: '系统错误，请重试', duration: 2000 });
} finally {
this.isLoading = false; // 无论成功失败，重置状态
}
}
}
import { promptAction, router, InputType, AlertDialog } from '@kit.ArkUI';
promptAction：提供轻量级用户反馈（如 Toast），不打断当前操作流；router：页面路由核心 API，支持 pushUrl（入栈）、replaceUrl（替换）、back（返回）；Router 是类型定义，实际未使用，可移除以减少包体积；InputType 和 AlertDialog，但未导入，会导致编译失败。应补充上述导入语句。📌 工程规范：所有使用的 API 必须显式导入，避免隐式依赖。
interface User {
uname: string;
upwd: string;
}
username / password），但若项目已有约定，可保持一致；types.ts 文件，实现跨组件复用。@State user: User = { uname: '', upwd: '' };
@State isLoading: boolean = false;
@State 是 ArkTS 的核心状态装饰器，任何被其修饰的变量，当值发生变化时，会自动触发组件重新渲染；user 对象用于双向绑定输入框，实现'输入 → 状态 → UI 同步'；isLoading 控制按钮的交互状态，是防重复提交的关键机制。💡 响应式原理：ArkUI 内部通过依赖收集机制，仅更新受影响的子树，性能高效。
$r('app.media.my') 引用资源，确保多分辨率适配；border({ radius: 100 }) 将正方形图变为圆形，符合头像设计惯例；resources/base/media/my.png 存在，否则显示空白。text: this.user.xxx 实现单向数据流（状态 → UI）；onChange 实现反向同步（UI → 状态），构成双向绑定；InputType.Password 自动启用掩码，无需手动处理。Row({ space: 10 }) 简洁实现等分布局；enabled(!this.isLoading) 禁用按钮，防止多次点击导致多次请求。promptAction.showToast 提供非阻塞提示，符合移动端 UX 规范。当前代码存在三大问题：
原代码在失败时提示'登录成功'，应改为'账号或密码错误'。
点击登录后，isLoading 从未设为 true，导致按钮无法显示'登录中…'。
router.pushUrl 可能因页面路径错误而失败，应捕获异常。
✅ 优化后代码：见上方完整代码块。
🔒 安全建议：真实项目中，切勿硬编码账号密码；应调用后端接口进行认证，使用 HTTPS 传输；密码字段不应明文存储于前端状态。
{
"src": ["pages/IndexPage.ets"],
"name": "IndexPage"
}
main_pages.json（或 module.json5）中注册；router.pushUrl 会失败，且无明显报错。本案例虽小，却涵盖了 ArkTS 开发的核心范式：
| 能力 | 技术点 |
|---|---|
| UI 构建 | Column/Row 布局、Image/TextInput/Button 组件 |
| 状态管理 | @State 装饰器、双向绑定 |
| 用户交互 | onClick、onChange 事件处理 |
| 系统集成 | promptAction 提示、router 路由 |
| 工程规范 | 接口定义、模块导入、错误处理 |
@StorageLink 持久化本地缓存；@Watch 监听系统主题）；$r('app.string.login_title') 替代硬编码文本。通过这样一个'小而全'的登录页，开发者不仅能掌握 ArkTS 基础语法，更能建立起组件化、状态驱动、用户体验优先的现代应用开发思维。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML 转 Markdown 互为补充。 在线工具，Markdown 转 HTML在线工具，online
将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。 在线工具，HTML 转 Markdown在线工具，online
通过删除不必要的空白来缩小和压缩JSON。 在线工具，JSON 压缩在线工具，online
将JSON字符串修饰为友好的可读格式。 在线工具，JSON美化和格式化在线工具，online