0
  • 聊天消息
  • 系統(tǒng)消息
  • 評(píng)論與回復(fù)
登錄后你可以
  • 下載海量資料
  • 學(xué)習(xí)在線課程
  • 觀看技術(shù)視頻
  • 寫文章/發(fā)帖/加入社區(qū)
會(huì)員中心
創(chuàng)作中心

完善資料讓更多小伙伴認(rèn)識(shí)你,還能領(lǐng)取20積分哦,立即完善>

3天內(nèi)不再提示

鴻蒙Ability Kit(程序框架服務(wù))【Ability內(nèi)頁面間的跳轉(zhuǎn)】

jf_46214456 ? 來源:jf_46214456 ? 作者:jf_46214456 ? 2024-06-03 20:43 ? 次閱讀

Ability內(nèi)頁面間的跳轉(zhuǎn)(ArkTS)

介紹

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

最終效果圖如下:

相關(guān)概念

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

環(huán)境搭建

軟件要求

  • [DevEco Studio]版本:DevEco Studio 3.1 Release。
  • OpenHarmony SDK版本:API version 9。
  • 開發(fā)前請(qǐng)熟悉鴻蒙開發(fā)指導(dǎo)文檔 :[`gitee.com/li-shizhen-skin/harmony-os/blob/master/README.m

硬件要求

  • 開發(fā)板類型:[潤和RK3568開發(fā)板]。
  • OpenHarmony系統(tǒng):3.2 Release。

環(huán)境搭建

完成本篇Codelab我們首先要完成開發(fā)環(huán)境的搭建,本示例以RK3568開發(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開發(fā)板的燒錄]
  3. 搭建開發(fā)環(huán)境。
    1. 開始前請(qǐng)參考[工具準(zhǔn)備],完成DevEco Studio的安裝和開發(fā)環(huán)境配置。
    2. 開發(fā)環(huán)境配置完成后,請(qǐng)參考[使用工程向?qū)創(chuàng)建工程(模板選擇“Empty Ability”)。
    3. 工程創(chuàng)建完成后,選擇使用[真機(jī)進(jìn)行調(diào)測(cè)]。

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

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

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

頁面跳轉(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頁。

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

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

    IndexPage頁面有一個(gè)Text文本和Button按鈕,點(diǎn)擊按鈕跳轉(zhuǎn)到下一個(gè)頁面,并傳遞數(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頁面有兩個(gè)Text文本,其中一個(gè)文本展示從IndexPage頁面?zhèn)鬟f過來的數(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)
              ...
          }
          ...
        }
        ...
      }
    }
    `HarmonyOS與OpenHarmony鴻蒙文檔籽料:mau123789是v直接拿`
    

新文檔.png

頁面返回

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

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

審核編輯 黃宇

聲明:本文內(nèi)容及配圖由入駐作者撰寫或者入駐合作網(wǎng)站授權(quán)轉(zhuǎn)載。文章觀點(diǎn)僅代表作者本人,不代表電子發(fā)燒友網(wǎng)立場(chǎng)。文章及其配圖僅供工程師學(xué)習(xí)之用,如有內(nèi)容侵權(quán)或者其他違規(guī)問題,請(qǐng)聯(lián)系本站處理。 舉報(bào)投訴
  • 框架
    +關(guān)注

    關(guān)注

    0

    文章

    404

    瀏覽量

    17755
  • 鴻蒙
    +關(guān)注

    關(guān)注

    57

    文章

    2474

    瀏覽量

    43689
收藏 人收藏

    評(píng)論

    相關(guān)推薦
    熱點(diǎn)推薦

    鴻蒙開發(fā)接口Ability框架:【@ohos.application.Ability (Ability)】

    Ability模塊提供對(duì)Ability生命周期、上下文環(huán)境等調(diào)用管理的能力,包括Ability創(chuàng)建、銷毀、轉(zhuǎn)儲(chǔ)客戶端信息等。
    的頭像 發(fā)表于 04-30 17:42 ?2586次閱讀
    <b class='flag-5'>鴻蒙</b>開發(fā)接口<b class='flag-5'>Ability</b><b class='flag-5'>框架</b>:【@ohos.application.<b class='flag-5'>Ability</b> (<b class='flag-5'>Ability</b>)】

    鴻蒙開發(fā)接口Ability框架:【@ohos.ability.featureAbility (FeatureAbility模塊)】

    FeatureAbility模塊提供帶有UI設(shè)計(jì)與用戶交互的能力,包括啟動(dòng)新的ability、獲取dataAbilityHelper、設(shè)置此Page Ability、獲取當(dāng)前Ability對(duì)應(yīng)的窗口,連接
    的頭像 發(fā)表于 05-06 16:31 ?1231次閱讀
    <b class='flag-5'>鴻蒙</b>開發(fā)接口<b class='flag-5'>Ability</b><b class='flag-5'>框架</b>:【@ohos.<b class='flag-5'>ability</b>.featureAbility (FeatureAbility模塊)】

    鴻蒙開發(fā)接口Ability框架:【 (Context模塊)】

    Context模塊提供了ability或application的上下文的能力,包括允許訪問特定于應(yīng)用程序的資源、請(qǐng)求和驗(yàn)證權(quán)限等。
    的頭像 發(fā)表于 05-13 16:04 ?1003次閱讀
    <b class='flag-5'>鴻蒙</b>開發(fā)接口<b class='flag-5'>Ability</b><b class='flag-5'>框架</b>:【 (Context模塊)】

    鴻蒙開發(fā)接口Ability框架:【(AbilityContext)】

    AbilityContext是Ability的上下文環(huán)境,繼承自Context。
    的頭像 發(fā)表于 05-13 09:26 ?1260次閱讀
    <b class='flag-5'>鴻蒙</b>開發(fā)接口<b class='flag-5'>Ability</b><b class='flag-5'>框架</b>:【(AbilityContext)】

    鴻蒙開發(fā)接口Ability框架:【(AbilityDelegator)】

    AbilityDelegator提供添加用于監(jiān)視指定能力的生命周期狀態(tài)更改的AbilityMonitor對(duì)象的能力,包括對(duì)AbilityMonitor實(shí)例的添加、刪除、等待ability到達(dá)
    的頭像 發(fā)表于 05-13 17:58 ?1148次閱讀
    <b class='flag-5'>鴻蒙</b>開發(fā)接口<b class='flag-5'>Ability</b><b class='flag-5'>框架</b>:【(AbilityDelegator)】

    鴻蒙開發(fā)接口Ability框架:【AbilityDelegator】

    AbilityDelegator提供添加用于監(jiān)視指定能力的生命周期狀態(tài)更改的AbilityMonitor對(duì)象的能力,包括對(duì)AbilityMonitor實(shí)例的添加、刪除、等待ability到達(dá)
    的頭像 發(fā)表于 05-16 16:48 ?1133次閱讀
    <b class='flag-5'>鴻蒙</b>開發(fā)接口<b class='flag-5'>Ability</b><b class='flag-5'>框架</b>:【AbilityDelegator】

    鴻蒙Ability Kit程序框架服務(wù))【UIExtensionAbility】

    [UIExtensionAbility]是UI類型的ExtensionAbility組件,需要與[UIExtensionComponent]一起配合使用,開發(fā)者可以在UIAbility的頁面中通過
    的頭像 發(fā)表于 06-05 09:19 ?1820次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>Ability</b> <b class='flag-5'>Kit</b>(<b class='flag-5'>程序</b><b class='flag-5'>框架</b><b class='flag-5'>服務(wù)</b>)【UIExtensionAbility】

    鴻蒙Ability開發(fā)-Stage模型下Ability的創(chuàng)建和使用

    。 在購物應(yīng)用中,我們點(diǎn)擊首頁商品列表中的某一項(xiàng)商品,即可跳轉(zhuǎn)到商品的詳情頁面。此處使用到UIAbilityContext模塊的啟動(dòng)Ability的能力。關(guān)于獲取UIAbilityContext的方法
    發(fā)表于 01-08 15:34

    鴻蒙 Ability 講解(頁面生命周期、后臺(tái)服務(wù)、數(shù)據(jù)訪問)

    Service可以這么寫,但是有一點(diǎn)你要確認(rèn),那就是你啟動(dòng)的這個(gè)服務(wù)是否允許其他應(yīng)用程序發(fā)現(xiàn)?否則你就算知道這個(gè)服務(wù)的包名和類名也是白搭。還記得剛才在創(chuàng)建Service Ability
    發(fā)表于 12-17 10:37

    使用FeatureAbility模塊啟動(dòng)其他Ability

    路由跳轉(zhuǎn)方式,而路由跳轉(zhuǎn)方式是頁面跳轉(zhuǎn),可以利用featureAbility模塊進(jìn)行Ability
    發(fā)表于 09-02 15:04

    #DAYU200#Ability入門

    下來就到今天最關(guān)鍵的的學(xué)習(xí)環(huán)節(jié)了1.Ability內(nèi)頁面跳轉(zhuǎn)(不帶參數(shù))在eTS目錄如下,pages目錄下有index.ets和second.ets;實(shí)現(xiàn):在index.ets中引入router模塊
    發(fā)表于 09-28 15:03

    HarmonyOS開發(fā)案例:【Ability內(nèi)頁面跳轉(zhuǎn)

    基于Stage模型下的Ability開發(fā),實(shí)現(xiàn)Ability內(nèi)頁面跳轉(zhuǎn)和數(shù)據(jù)傳遞。
    的頭像 發(fā)表于 05-09 10:39 ?824次閱讀
    HarmonyOS開發(fā)案例:【<b class='flag-5'>Ability</b><b class='flag-5'>內(nèi)頁面</b><b class='flag-5'>間</b>的<b class='flag-5'>跳轉(zhuǎn)</b>】

    鴻蒙應(yīng)用模型:【Ability Kit】簡介

    Ability Kit程序框架服務(wù))提供了應(yīng)用程序開發(fā)和運(yùn)行的應(yīng)用模型,是系統(tǒng)為開發(fā)者提供的應(yīng)
    的頭像 發(fā)表于 05-29 14:41 ?976次閱讀
    <b class='flag-5'>鴻蒙</b>應(yīng)用模型:【<b class='flag-5'>Ability</b> <b class='flag-5'>Kit</b>】簡介

    鴻蒙Ability Kit程序框架服務(wù))【UIAbility內(nèi)和UIAbility頁面跳轉(zhuǎn)

    基于Stage模型下的UIAbility開發(fā),實(shí)現(xiàn)UIAbility內(nèi)和UIAbility頁面跳轉(zhuǎn)。
    的頭像 發(fā)表于 06-03 14:13 ?1031次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>Ability</b> <b class='flag-5'>Kit</b>(<b class='flag-5'>程序</b><b class='flag-5'>框架</b><b class='flag-5'>服務(wù)</b>)【UIAbility內(nèi)和UIAbility<b class='flag-5'>間</b><b class='flag-5'>頁面</b>的<b class='flag-5'>跳轉(zhuǎn)</b>】

    鴻蒙Ability Kit程序框架服務(wù))【Ability與ServiceExtensionAbility通信】

    本示例展示通過[IDL的方式]和?[@ohos.rpc]?等接口實(shí)現(xiàn)了Ability與ServiceExtensionAbility之間的通信。
    的頭像 發(fā)表于 06-05 09:28 ?710次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>Ability</b> <b class='flag-5'>Kit</b>(<b class='flag-5'>程序</b><b class='flag-5'>框架</b><b class='flag-5'>服務(wù)</b>)【<b class='flag-5'>Ability</b>與ServiceExtensionAbility通信】

    電子發(fā)燒友

    中國電子工程師最喜歡的網(wǎng)站

    • 2931785位工程師會(huì)員交流學(xué)習(xí)
    • 獲取您個(gè)性化的科技前沿技術(shù)信息
    • 參加活動(dòng)獲取豐厚的禮品