鸿蒙 OS ArkTS 页面跳转功能开发

一、项目名称

HarmonyOS ArkTS 双页面双向跳转应用

二、项目简介

本项目基于鸿蒙 OS ArkTS 开发框架，完成了两个页面之间的双向跳转功能：

• 第一个页面（首页）显示 “你好世界” 和 “下一页” 按钮；
• 点击 “下一页” 按钮后，跳转到第二个页面；
• 第二个页面显示 “第二个页面” 和 “返回” 按钮；
• 点击 “返回” 按钮后，回到第一个页面。本项目通过 ArkUI 声明式 UI 构建界面，使用系统路由（Router）实现页面间的导航切换，实现了最基础的页面跳转逻辑，为后续多页面应用开发打下基础。

三、项目整体结构

项目的核心文件结构如下：

• Index.ets：第一个页面（首页），应用默认启动页；
• Second.ets：第二个页面，点击 “下一页” 跳转的目标页；
• main_pages.json：页面路由配置文件，用于注册所有页面路径，让系统识别页面。

四、页面设计与实现过程

（一）第一个页面（Index 首页）

1. 界面设计

   • 页面顶部居中显示 “你好世界” 文本，字体加粗，字号较大，突出页面标题；
   • 文本下方居中放置一个粉色胶囊形状按钮，按钮文字为 “下一页”；
   • 整体布局采用垂直居中排列，界面简洁、直观。
   • 代码大致如下

2.功能实现

• 点击 “下一页” 按钮时，触发点击事件；
• 通过系统提供的Router.pushUrl()方法，跳转到第二个页面pages/Second；
• 跳转过程中，系统会自动保存当前页面的状态，方便后续返回

（二）第二个页面（Second 页面）

1. 界面设计

   • 页面顶部居中显示 “第二个页面” 文本，字体加粗，字号与首页保持一致；
   • 文本下方居中放置一个蓝色胶囊形状按钮，按钮文字为 “返回”；
   • 布局与首页保持一致，保证用户体验的连贯性。

2. 功能实现

   • 点击 “返回” 按钮时，触发点击事件；
   • 通过系统提供的Router.back()方法，直接返回到上一个页面（即首页）；
   • 无需额外指定路径，back()方法会自动返回上一级页面。
   • 代码大致如下

（三）关键配置：路由注册

为了让系统能够识别并跳转页面，需要在main_pages.json文件中注册两个页面的路径，否则点击按钮时不会有任何反应。配置文件中声明了首页和第二页的路径，确保路由跳转能够正常工作。

六、测试过程与结果

1. 启动应用：运行项目后，模拟器成功启动应用，默认进入首页，显示 “你好世界” 和 “下一页” 按钮，界面正常加载。
2. 跳转测试：点击首页的 “下一页” 按钮，成功跳转到第二个页面，显示 “第二个页面” 和 “返回” 按钮，跳转过程流畅无卡顿。
3. 返回测试：点击第二个页面的 “返回” 按钮，成功回到首页，页面状态正常，文本和按钮显示无误。
4. 多次测试：重复跳转、返回操作多次，均能正常切换页面，无崩溃、报错或界面错乱问题。

感谢观看！