HarmonyOS ArkTS 路由登录注册案例

开发环境DevEco Studio 6.0.1一、1.1 注册页面 RouterRegister.etstypescript运行import router from ohos.router; Entry Component struct RouterRegister{ build() { Column({space:25}){ Image($r(app.media.banner1)) .width(120) .height(120) .borderRadius(60) Text(注 册) .fontSize(32) .fontWeight(FontWeight.Bolder) Row(){ Text(账号) .fontSize(26) .width(40%) .textAlign(TextAlign.Center) TextInput() .width(60%) .height(50) } Row(){ Text(密码) .fontSize(26) .width(40%) .textAlign(TextAlign.Center) TextInput() .width(60%) .height(50) .type(InputType.Password) } Row(){ Text(确认密码) .fontSize(26) .width(40%) .textAlign(TextAlign.Center) TextInput() .width(60%) .height(50) .type(InputType.Password) } Text(已有账号立即登录) .fontSize(22) .fontColor(0xababab) .onClick((){ router.pushUrl({ url:pages/RouterLogin }) }) Button(立即注册) .width(100%) .height(50) .fontSize(24) } .width(100%) .height(100%) .padding(15) } }1.2 登录页面 RouterLogin.etstypescript运行import router from ohos.router; Entry Component struct RouterLogin{ build() { Column({space:25}){ Image($r(app.media.banner0)) .width(120) .height(120) .borderRadius(60) Text(登 录) .fontSize(32) .fontWeight(FontWeight.Bold) Row({space:15}){ Text(账 号) .fontSize(26) TextInput() .width(70%) .height(50) } Row({space:15}){ Text(密 码) .fontSize(26) TextInput() .width(70%) .height(50) .type(InputType.Password) } Text(没有账号立即注册) .fontSize(22) .fontColor(0xababab) .onClick((){ router.pushUrl({ url:pages/RouterRegister }) }) Button(立 即 登 录) .width(100%) .height(50) .fontSize(24) } .width(100%) .height(100%) .padding(15) } }1.3 页面路由注册配置文件json{ src: [ pages/Men, pages/Index, pages/second, pages/RouterDemo, pages/Resister, pages/LoginPage, pages/RouterLogin, pages/RouterRegister ] }二、步骤 2解析页面顶层基础语法以任意页面开头代码举例typescript运行import router from ohos.router; Entry Component struct RouterRegister{ build() { // 所有UI布局代码 } }import router from ohos.router;导入系统路由工具包是实现页面跳转的前提不导入则无法使用跳转 API。Entry装饰器标记当前组件为独立页面只有添加该装饰器的组件才能被路由识别、单独打开。Component装饰器声明这是一个自定义 UI 组件所有页面、复用组件必须搭配该装饰器使用。struct RouterRegisterArkTS 使用结构体定义页面RouterRegister是页面唯一名称对应文件名称。build(){}函数页面渲染核心函数所有界面组件必须写在 build 内部页面最终展示效果由 build 内代码决定。三、步骤 3 Column 垂直布局代码最外层根容器Column({space:25})Column 作用内部所有组件垂直从上到下依次排列是本案例页面的根布局。{space:25}参数控制 Column 内部所有子组件之间统一垂直间距 25。后置样式.width(100%) .height(100%)让布局占满手机全屏.padding(15)容器四周预留 15 内边距防止内容紧贴屏幕边缘。四、步骤 4水平布局 Row表单行布局案例存在两种 Row 写法分开解析4.1 注册页无间距 RowRow(){}内部通过width(40%)、width(60%)百分比分割同一行左右宽度手动分配文字与输入框占比。4.2 登录页带间距 RowRow({space:15})space:15代表同一行内文字与输入框自动留出 15 像素水平间隔不需要手动划分百分比。五、步骤 5、页面基础 UI 组件5.1 Image 图片组件typescript运行Image($r(app.media.banner1)) .width(120) .height(120) .borderRadius(60)$r(app.media.banner1)系统资源读取语法读取项目 media 文件夹下名为 banner1 的图片width/height固定图片宽高 120borderRadius (60)圆角值等于宽高一半实现圆形头像效果。5.2 Text 文本文字组件通用属性分步说明文本内容Text(注 册)填写展示文字.fontSize(32)设置文字大小.fontWeight(FontWeight.Bold)文字加粗.fontColor(0xababab)设置文字灰色.textAlign(TextAlign.Center)文字在自身宽度内居中。5.3 TextInput 输入框组件普通输入框直接写TextInput()支持输入普通文字账号.type(InputType.Password)密码模式输入内容自动隐藏为黑点用于密码输入。5.4 Button 按钮组件Button(立即注册)生成可点击按钮可设置宽高、字号原生代码仅做样式展示无点击逻辑。六、步骤 6解析点击交互事件 onClick代码片段typescript运行Text(已有账号立即登录) .onClick((){ router.pushUrl({ url:pages/RouterLogin }) }).onClick(回调函数)绑定点击事件Text、Button 等组件都支持大括号内为点击后执行的代码本案例点击文字就执行页面跳转逻辑。七、步骤 7核心路由功能分步解析7.1 跳转 APIrouter.pushUrltypescript运行router.pushUrl({ url:pages/RouterLogin })url 参数填写目标页面路径格式固定pages/页面文件名功能打开新页面页面加入页面栈点击手机返回键可回到上一页。7.2 路由配置 src 数组作用json 配置jsonsrc: [ pages/RouterLogin, pages/RouterRegister ]分步规则所有需要跳转的页面必须在 src 数组中写入完整路径跳转 url 字符串必须和数组内容完全一致区分大小写页面未写入数组跳转时会报错 “找不到页面”。八、步骤 8完整页面跳转执行流程拆解运行项目打开注册页 RouterRegister页面从上至下渲染圆形图片→注册标题→账号行→密码行→确认密码行→跳转文字→注册按钮用户点击灰色文字 “已有账号立即登录”触发 onClick 事件执行router.pushUrl读取 url 值pages/RouterLogin系统去 json 配置 src 数组匹配路径确认页面合法加载并打开登录页面 RouterLogin在登录页点击底部文字反向执行相同逻辑跳转回注册页任意页面点击手机返回按键可回到上一个页面。九、分步知识点汇总页面定义步骤导入路由包 → EntryComponent 装饰器 → struct 页面名称 → build 布局函数布局搭建步骤外层 Column 全屏垂直布局 → 内部 Row 实现单行表单界面渲染步骤图片组件→标题文本→多组输入框→可点击文字→底部按钮交互实现步骤组件绑定 onClick 点击事件 → 事件内部执行路由跳转路由生效步骤页面文件创建 → json 配置 src 注册页面路径 → pushUrl 填写对应路径跳转。