Ability內頁面間的跳轉（ArkTS）

介紹

本篇Codelab基于Stage模型下的Ability開發，實現Ability內頁面間的跳轉和數據傳遞。

最終效果圖如下：

相關概念

• [頁面路由]：提供通過不同的url訪問不同的頁面，包括跳轉到應用內的指定頁面、用應用內的某個頁面替換當前頁面、返回上一頁面或指定的頁面等。

環境搭建

軟件要求

• [DevEco Studio]版本：DevEco Studio 3.1 Release。
• OpenHarmony SDK版本：API version 9。
• 開發前請熟悉鴻蒙開發指導文檔 ：[`gitee.com/li-shizhen-skin/harmony-os/blob/master/README.m

硬件要求

• 開發板類型：[潤和RK3568開發板]。
• OpenHarmony系統：3.2 Release。

環境搭建

完成本篇Codelab我們首先要完成開發環境的搭建，本示例以RK3568開發板為例，參照以下步驟進行：

1. [獲取OpenHarmony系統版本]：標準系統解決方案（二進制）。以3.2 Release版本為例：
   
2. 搭建燒錄環境。
   1. [完成DevEco Device Tool的安裝]
   2. [完成RK3568開發板的燒錄]
3. 搭建開發環境。
   1. 開始前請參考[工具準備]，完成DevEco Studio的安裝和開發環境配置。
   2. 開發環境配置完成后，請參考[使用工程向導]創建工程（模板選擇“Empty Ability”）。
   3. 工程創建完成后，選擇使用[真機進行調測]。

代碼結構解讀

本篇Codelab只對核心代碼進行講解，完整代碼可以直接從gitee獲取。

├──entry/src/main/ets                // 代碼區
│  ├──common
│  │  ├──constants
│  │  │  └──CommonConstants.ets      // 公共常量類
│  │  └──utils
│  │    └──Logger.ets                // 日志類
│  ├──entryability
│  │  └──EntryAbility.ets            // 程序入口類
│  └──pages
│     ├──IndexPage.ets               // 入口頁面
│     └──SecondPage.ets              // 跳轉頁
└──entry/src/main/resources          // 資源文件目錄

頁面跳轉

1. 在工程pages目錄中，選中Index.ets，點擊鼠標右鍵 > Refactor > Rename，改名為IndexPage.ets。改名后，修改工程entryability目錄下EntryAbility.ets文件中windowStage.loadContent方法第一個參數為pages/IndexPage。

   // EntryAbility.ets
   onWindowStageCreate(windowStage: Window.WindowStage): void {
     ...
     windowStage.loadContent('pages/IndexPage', (err, data) = > {
       ...
     });
   }
   

2. 在工程pages目錄中，點擊鼠標右鍵 > New > Page，新建命名為SecondPage的page頁。

3. 從IndexPage頁面跳轉到SecondPage頁面，并進行數據傳遞，需要如下幾個步驟：

   • 給兩個頁面導入router路由模塊。
   • 在IndexPage頁面中給Button組件添加點擊事件，使用router.pushUrl()方法將SecondPage頁面路徑添加到url中，params為自定義參數。
   • SecondPage頁面通過router.getParams()方法獲取IndexPage頁面傳遞過來的自定義參數。

   IndexPage頁面有一個Text文本和Button按鈕，點擊按鈕跳轉到下一個頁面，并傳遞數據。IndexPage.ets代碼如下：

   // IndexPage.ets
   import router from '@ohos.router';
   import CommonConstants from '../common/constants/CommonConstants';
   
   @Entry
   @Component
   struct IndexPage {
     @State message: string = CommonConstants.INDEX_MESSAGE;
   
     build() {
       Row() {
         Column() {
           Text(this.message)
             ...
           Blank()
           Button($r('app.string.next'))
             ...
             .onClick(() = > {
               router.pushUrl({
                 url: CommonConstants.SECOND_URL,
                 params: {
                   src: CommonConstants.SECOND_SRC_MSG
                 }
              }).catch((error: Error) = > {
                Logger.info(TAG, 'IndexPage push error' + JSON.stringify(error));
              });
           })
         }
         ...
       }
       ...
     }
   }
   

   SecondPage頁面有兩個Text文本，其中一個文本展示從IndexPage頁面傳遞過來的數據。SecondPage.ets代碼如下：

   // SecondPage.ets
   import router from '@ohos.router';
   import CommonConstants from '../common/constants/CommonConstants';
   
   @Entry
   @Component
   struct Second {
     @State message: string = CommonConstants.SECOND_MESSAGE;
     @State src: string = (router.getParams() as Record< string, string >)[CommonConstants.SECOND_SRC_PARAM];
   
     build() {
       Row() {
         Column() {
           Text(this.message)
             ...
           Text(this.src)
             ...
         }
         ...
       }
       ...
     }
   }
   `HarmonyOS與OpenHarmony鴻蒙文檔籽料：mau123789是v直接拿`
   

頁面返回

在SecondPage頁面中，Button按鈕添加onClick()事件。調用router.back()方法，實現返回上一頁面的功能。

// SecondPage.ets
Button($r('app.string.back'))
  ...
  .onClick(() = > {
    router.back();
  })

審核編輯 黃宇