介紹

基于Stage模型下的Ability開(kāi)發(fā)，實(shí)現(xiàn)Ability內(nèi)頁(yè)面間的跳轉(zhuǎn)和數(shù)據(jù)傳遞。

最終效果圖如下：

相關(guān)概念

• [頁(yè)面路由]：提供通過(guò)不同的url訪(fǎng)問(wèn)不同的頁(yè)面，包括跳轉(zhuǎn)到應(yīng)用內(nèi)的指定頁(yè)面、用應(yīng)用內(nèi)的某個(gè)頁(yè)面替換當(dāng)前頁(yè)面、返回上一頁(yè)面或指定的頁(yè)面等。

環(huán)境搭建

軟件要求

• [DevEco Studio]版本：DevEco Studio 3.1 Release。
• OpenHarmony SDK版本：API version 9。

硬件要求

• 開(kāi)發(fā)板類(lèi)型：[潤(rùn)和RK3568開(kāi)發(fā)板]。
• OpenHarmony系統(tǒng)：3.2 Release。

環(huán)境搭建

完成本篇Codelab我們首先要完成開(kāi)發(fā)環(huán)境的搭建，本示例以RK3568開(kāi)發(fā)板為例，參照以下步驟進(jìn)行：

1. [獲取OpenHarmony系統(tǒng)版本]：標(biāo)準(zhǔn)系統(tǒng)解決方案（二進(jìn)制）。以3.2 Release版本為例：
   
2. 搭建燒錄環(huán)境。
   1. [完成DevEco Device Tool的安裝]
   2. [完成RK3568開(kāi)發(fā)板的燒錄](méi)
3. 搭建開(kāi)發(fā)環(huán)境。
   1. 開(kāi)始前請(qǐng)參考[工具準(zhǔn)備]，完成DevEco Studio的安裝和開(kāi)發(fā)環(huán)境配置。
   2. 開(kāi)發(fā)環(huán)境配置完成后，請(qǐng)參考[使用工程向?qū)創(chuàng)建工程（模板選擇“Empty Ability”）。
   3. 工程創(chuàng)建完成后，選擇使用[真機(jī)進(jìn)行調(diào)測(cè)]。
   4. 開(kāi)發(fā)前請(qǐng)熟悉鴻蒙開(kāi)發(fā)指導(dǎo)文檔：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]

代碼結(jié)構(gòu)解讀

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

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

`HarmonyOS與OpenHarmony鴻蒙文檔籽料：mau123789是v直接拿`

頁(yè)面跳轉(zhuǎn)

1. 在工程pages目錄中，選中Index.ets，點(diǎn)擊鼠標(biāo)右鍵 > Refactor > Rename，改名為IndexPage.ets。改名后，修改工程entryability目錄下EntryAbility.ets文件中windowStage.loadContent方法第一個(gè)參數(shù)為pages/IndexPage。

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

2. 在工程pages目錄中，點(diǎn)擊鼠標(biāo)右鍵 > New > Page，新建命名為SecondPage的page頁(yè)。

3. 從IndexPage頁(yè)面跳轉(zhuǎn)到SecondPage頁(yè)面，并進(jìn)行數(shù)據(jù)傳遞，需要如下幾個(gè)步驟：

   • 給兩個(gè)頁(yè)面導(dǎo)入router路由模塊。
   • 在IndexPage頁(yè)面中給Button組件添加點(diǎn)擊事件，使用router.pushUrl()方法將SecondPage頁(yè)面路徑添加到url中，params為自定義參數(shù)。
   • SecondPage頁(yè)面通過(guò)router.getParams()方法獲取IndexPage頁(yè)面?zhèn)鬟f過(guò)來(lái)的自定義參數(shù)。

   IndexPage頁(yè)面有一個(gè)Text文本和Button按鈕，點(diǎn)擊按鈕跳轉(zhuǎn)到下一個(gè)頁(yè)面，并傳遞數(shù)據(jù)。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頁(yè)面有兩個(gè)Text文本，其中一個(gè)文本展示從IndexPage頁(yè)面?zhèn)鬟f過(guò)來(lái)的數(shù)據(jù)。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)
             ...
         }
         ...
       }
       ...
     }
   }
   

頁(yè)面返回

在SecondPage頁(yè)面中，Button按鈕添加onClick()事件。調(diào)用router.back()方法，實(shí)現(xiàn)返回上一頁(yè)面的功能。

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

審核編輯 黃宇