鸿蒙 ArkTS 页面跳转

本次代码为大合集几乎包含了80%的知识点运用到了很多相关知识与实战很相似下面是代码展示共分为4部分最后通过main_pages.json进行关联运用的知识点有一、ArkTS 组件与布局相关知识点页面装饰器Component用于标记自定义 UI 组件结构体Entry标记页面为可路由访问的独立入口页面所有跳转页面均需添加这两个装饰器。布局容器Column垂直布局容器实现页面组件纵向排列可通过space设置内部间距、width(100%)与height(100%)铺满全屏搭配padding、alignItems、justifyContent控制内边距与子元素对齐方式。Row水平布局容器实现一行内多个组件横向排布用于用户名、密码输入区域的文字与输入框组合布局。基础展示组件Text文本组件支持fontSize字号、fontColor文字颜色、fontWeight.Bold文字加粗、textAlign.Center居中、margin外边距等样式绑定.onClick()点击事件可实现页面跳转交互。Image图片组件使用$r(app.media.资源名)读取resources/media目录下本地图片通过width、height固定尺寸borderRadius设置圆角实现圆形头像效果。表单交互组件TextInput文本输入框通过text双向绑定状态变量placeholder设置输入提示type.InputType.Password开启密码隐藏模式onChange()监听输入内容实时更新状态变量支持自定义背景色、圆角样式。Toggle开关组件切换开关样式ToggleType.Switch绑定布尔类型状态变量实现 “记住密码” 功能可监听切换状态并自定义开关选中颜色。Button按钮组件设置宽高、圆角、内边距美化样式绑定点击事件完成表单校验、清空输入、页面返回等业务逻辑。弹窗组件 AlertDialog调用AlertDialog.show()弹出提示弹窗配置title弹窗标题、message提示文本用于展示注册、登录成功或失败的反馈信息。二、状态管理知识点使用State装饰器定义页面响应式变量包含用户名、密码、确认密码、开关状态等数据。State实现双向数据绑定输入框修改变量时页面 UI 自动同步更新修改变量值也会同步刷新界面是 ArkUI 响应式开发核心语法。三、路由与页面跳转核心知识点路由模块导入通过import router from ohos.router引入系统路由模块提供页面切换能力。路由配置文件 main_pages.json项目路由配置文件src数组内统一注册所有页面路径页面跳转填写的url必须与配置路径完全匹配未注册页面无法正常跳转。本项目注册页面pages/Tiaozhuan、pages/Tiaozhuan1、pages/Tiaozhuan2、pages/HomePages。页面跳转 API router.pushUrl无参跳转仅传入url参数实现页面简单切换首页、注册页、登录页互相跳转。带参跳转配置params键值对实现跨页面数据传递注册页面将用户名、密码传递给主页HomePages。四、TypeScript 语法知识点静态类型标注定义变量时声明数据类型字符串string、布尔值boolean回调函数参数标注类型遵循 TypeScript 强类型规范。分支判断 if-else用于表单校验逻辑判断输入内容是否为空、两次密码是否一致、账号密码是否填写区分成功、失败两种弹窗提示。模板字符串使用${变量}拼接文本与变量动态展示弹窗提示内容。变量赋值清空点击清空按钮直接将State变量赋值为空字符串一键清空所有输入框内容。五、页面业务逻辑知识点首页选择页 Tiaozhuan.ets项目入口页面提供两个文本跳转入口分别进入注册页面、登录页面。注册页面 Tiaozhuan1.ets实现账号注册表单包含用户名、密码、确认密码输入框表单校验不通过弹出失败弹窗校验成功携带账号信息跳转主页支持清空输入、返回首页、跳转登录页面。登录页面 Tiaozhuan2.ets实现账号登录表单包含密码隐藏输入框、记住密码开关校验账号填写状态弹出登录成功 / 失败提示支持清空输入、跳转注册页、返回首页。跨页面数据通信利用路由params参数将注册页面表单数据传递至目标主页实现页面间数据传递。六、样式与工程结构知识点样式设置支持百分比尺寸100%、固定像素尺寸系统内置颜色Color.xxx、十六进制自定义背景色borderRadius统一设置圆角美化组件margin控制组件外边距、padding控制组件内部填充。项目目录结构entry/src/main/ets/pages存放所有业务页面 ets 代码entry/src/main/resources/media存放图片、视频等静态资源entry/src/main/resources/base存放全局颜色、尺寸、字符串资源配置main_pages.json全局路由配置文件是页面跳转的基础依赖。七、整体业务流程知识点程序启动后进入页面选择页分为两条业务分支一是跳转注册页完成表单校验成功后携带账号信息进入主页二是跳转登录页完成账号校验弹出对应反馈弹窗页面之间可自由互相跳转同时提供返回首页功能完整实现注册登录基础业务流程。一、ArkTS 组件与布局相关知识点页面装饰器Component用于标记自定义 UI 组件结构体Entry标记页面为可路由访问的独立入口页面所有跳转页面均需添加这两个装饰器。布局容器Column垂直布局容器实现页面组件纵向排列可通过space设置内部间距、width(100%)与height(100%)铺满全屏搭配padding、alignItems、justifyContent控制内边距与子元素对齐方式。Row水平布局容器实现一行内多个组件横向排布用于用户名、密码输入区域的文字与输入框组合布局。基础展示组件Text文本组件支持fontSize字号、fontColor文字颜色、fontWeight.Bold文字加粗、textAlign.Center居中、margin外边距等样式绑定.onClick()点击事件可实现页面跳转交互。Image图片组件使用$r(app.media.资源名)读取resources/media目录下本地图片通过width、height固定尺寸borderRadius设置圆角实现圆形头像效果。表单交互组件TextInput文本输入框通过text双向绑定状态变量placeholder设置输入提示type.InputType.Password开启密码隐藏模式onChange()监听输入内容实时更新状态变量支持自定义背景色、圆角样式。Toggle开关组件切换开关样式ToggleType.Switch绑定布尔类型状态变量实现 “记住密码” 功能可监听切换状态并自定义开关选中颜色。Button按钮组件设置宽高、圆角、内边距美化样式绑定点击事件完成表单校验、清空输入、页面返回等业务逻辑。弹窗组件 AlertDialog调用AlertDialog.show()弹出提示弹窗配置title弹窗标题、message提示文本用于展示注册、登录成功或失败的反馈信息。二、状态管理知识点使用State装饰器定义页面响应式变量包含用户名、密码、确认密码、开关状态等数据。State实现双向数据绑定输入框修改变量时页面 UI 自动同步更新修改变量值也会同步刷新界面是 ArkUI 响应式开发核心语法。三、路由与页面跳转核心知识点路由模块导入通过import router from ohos.router引入系统路由模块提供页面切换能力。路由配置文件 main_pages.json项目路由配置文件src数组内统一注册所有页面路径页面跳转填写的url必须与配置路径完全匹配未注册页面无法正常跳转。本项目注册页面pages/Tiaozhuan、pages/Tiaozhuan1、pages/Tiaozhuan2、pages/HomePages。页面跳转 API router.pushUrl无参跳转仅传入url参数实现页面简单切换首页、注册页、登录页互相跳转。带参跳转配置params键值对实现跨页面数据传递注册页面将用户名、密码传递给主页HomePages。四、TypeScript 语法知识点静态类型标注定义变量时声明数据类型字符串string、布尔值boolean回调函数参数标注类型遵循 TypeScript 强类型规范。分支判断 if-else用于表单校验逻辑判断输入内容是否为空、两次密码是否一致、账号密码是否填写区分成功、失败两种弹窗提示。模板字符串使用${变量}拼接文本与变量动态展示弹窗提示内容。变量赋值清空点击清空按钮直接将State变量赋值为空字符串一键清空所有输入框内容。五、页面业务逻辑知识点首页选择页 Tiaozhuan.ets项目入口页面提供两个文本跳转入口分别进入注册页面、登录页面。注册页面 Tiaozhuan1.ets实现账号注册表单包含用户名、密码、确认密码输入框表单校验不通过弹出失败弹窗校验成功携带账号信息跳转主页支持清空输入、返回首页、跳转登录页面。登录页面 Tiaozhuan2.ets实现账号登录表单包含密码隐藏输入框、记住密码开关校验账号填写状态弹出登录成功 / 失败提示支持清空输入、跳转注册页、返回首页。跨页面数据通信利用路由params参数将注册页面表单数据传递至目标主页实现页面间数据传递。六、样式与工程结构知识点样式设置支持百分比尺寸100%、固定像素尺寸系统内置颜色Color.xxx、十六进制自定义背景色borderRadius统一设置圆角美化组件margin控制组件外边距、padding控制组件内部填充。项目目录结构entry/src/main/ets/pages存放所有业务页面 ets 代码entry/src/main/resources/media存放图片、视频等静态资源entry/src/main/resources/base存放全局颜色、尺寸、字符串资源配置main_pages.json全局路由配置文件是页面跳转的基础依赖。七、整体业务流程知识点程序启动后进入页面选择页分为两条业务分支一是跳转注册页完成表单校验成功后携带账号信息进入主页二是跳转登录页完成账号校验弹出对应反馈弹窗页面之间可自由互相跳转同时提供返回首页功能完整实现注册登录基础业务流程。