鸿蒙 OS ArkTS 页面跳转功能开发
一、项目名称HarmonyOS ArkTS 双页面双向跳转应用二、项目简介本项目基于鸿蒙 OS ArkTS 开发框架完成了两个页面之间的双向跳转功能第一个页面首页显示 “你好世界” 和 “下一页” 按钮点击 “下一页” 按钮后跳转到第二个页面第二个页面显示 “第二个页面” 和 “返回” 按钮点击 “返回” 按钮后回到第一个页面。本项目通过 ArkUI 声明式 UI 构建界面使用系统路由Router实现页面间的导航切换实现了最基础的页面跳转逻辑为后续多页面应用开发打下基础。三、项目整体结构项目的核心文件结构如下Index.ets第一个页面首页应用默认启动页Second.ets第二个页面点击 “下一页” 跳转的目标页main_pages.json页面路由配置文件用于注册所有页面路径让系统识别页面。四、页面设计与实现过程一第一个页面Index 首页界面设计页面顶部居中显示 “你好世界” 文本字体加粗字号较大突出页面标题文本下方居中放置一个粉色胶囊形状按钮按钮文字为 “下一页”整体布局采用垂直居中排列界面简洁、直观。代码大致如下2.功能实现点击 “下一页” 按钮时触发点击事件通过系统提供的Router.pushUrl()方法跳转到第二个页面pages/Second跳转过程中系统会自动保存当前页面的状态方便后续返回二第二个页面Second 页面界面设计页面顶部居中显示 “第二个页面” 文本字体加粗字号与首页保持一致文本下方居中放置一个蓝色胶囊形状按钮按钮文字为 “返回”布局与首页保持一致保证用户体验的连贯性。功能实现点击 “返回” 按钮时触发点击事件通过系统提供的Router.back()方法直接返回到上一个页面即首页无需额外指定路径back()方法会自动返回上一级页面。代码大致如下三关键配置路由注册为了让系统能够识别并跳转页面需要在main_pages.json文件中注册两个页面的路径否则点击按钮时不会有任何反应。配置文件中声明了首页和第二页的路径确保路由跳转能够正常工作。六、测试过程与结果启动应用运行项目后模拟器成功启动应用默认进入首页显示 “你好世界” 和 “下一页” 按钮界面正常加载。跳转测试点击首页的 “下一页” 按钮成功跳转到第二个页面显示 “第二个页面” 和 “返回” 按钮跳转过程流畅无卡顿。返回测试点击第二个页面的 “返回” 按钮成功回到首页页面状态正常文本和按钮显示无误。多次测试重复跳转、返回操作多次均能正常切换页面无崩溃、报错或界面错乱问题。感谢观看