HarmonyOS ArkTS のページジャンプとデータ転送機能

HarmonyOS ArkTS アビリティのデータ転送には、アビリティ内のページジャンプとデータ転送、アビリティ間のデータジャンプとデータ転送が含まれます。アビリティにおけるページジャンプとデータ転送を中心に説明します。

DevEco Studio を開き、空の能力プロジェクトテンプレートを選択し、デモンストレーションの例として「ArkUIPagesRouter」という名前のプロジェクトを作成します。

2.4.1 アビリティで新しいページを作成する

プロジェクトを初期化すると、次のコードが生成されます。

src/main/ets/entryability ディレクトリに、アビリティファイル EntryAbility.ts が最初に生成されます。ビジネスニーズに応じて、Ability のライフサイクルコールバックコンテンツを EntryAbility.ts ファイルに実装できます。
src/main/ets/pages ディレクトリに、インデックスページが生成されます。アビリティによる応募のエントリーページでもあります。ビジネスニーズに応じて、エントリーページの機能をインデックスページ上で実現できます。

ページジャンプやデータ転送を実現するには、新規ページを作成する必要があります。src/main/ets/pages ディレクトリで、次の図 2-5 に示すように、[新規]->[ページ]を右クリックして新しいページを作成できます。

元の Index ページに基づいて、次の図 2-6 に示すように Second という名前の新しいページを作成します。

2 番目のページが作成されると、2 つのアクションが自動的に実行されます。

1 つのアクションは、src/main/ets/pages ディレクトリに Second.ets ファイルを作成することです。ファイルの内容は次のとおりです。

@Entry
@Component
struct Second {
    
    
  @State message: string = 'Hello World'

  build() {
    
    
    Row() {
    
    
      Column() {
    
    
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }
}

もう 1 つのアクションは、2 ページ目の情報を src/main/resources/base/profile/main_pages.json ファイルに構成することです。main_pages.json ファイルの内容は次のとおりです。

{
    
    
  "src": [
    "pages/Index",
    "pages/Second"
  ]
}

Index.ets と Second.ets のメッセージ変数の値をそれぞれ「Index page」と「Second page」に変更して違いを表示します。

2.4.2 ページジャンプとパラメータの受け渡し

ページ間のナビゲーションは、ページルーティングルーターモジュールを通じて実装できます。ページルーティングモジュールは、ページ URL に従ってターゲットページを見つけて、ジャンプを実現します。ページルーティングモジュールを介して、さまざまな URL を使用してさまざまなページにアクセスできます。これには、アビリティの指定したページへのジャンプ、現在のページをアビリティのページで置き換える、前のページまたは指定したページに戻るなどが含まれます。params を介してパラメータを渡します。

ページルーティングを使用する前に、次のコードに示すようにルーターモジュールをインポートする必要があります。

// 导入router模块
import router from '@ohos.router';

ページにジャンプするにはいくつかの方法があります。必要に応じてジャンプ方法を選択してください。

1.router.push()

router.push() メソッドを呼び出して、アビリティ内の指定されたページにジャンプします。router.push() メソッドが呼び出されるたびに、新しいページが作成されます。デフォルトでは、ページスタックの数は 1 ずつ増加し、ページスタックでサポートされる最大ページ数は 32 です。

ページスタックの数が多いか 32 を超える場合は、router.clear() メソッドを呼び出して、ページスタック内のすべての履歴ページをクリアし、現在のページのみをスタックのトップページとして保持できます。

使用例は次のとおりです。

router.push({
    
    
  url: 'pages/Second',
  params: {
    
    
    src: 'Index页面传来的数据',
  }
})

2. router.push() プラスモードパラメータ

router.push() メソッドは、router.RouterMode.Single シングルインスタンスモードおよび router.RouterMode.Standard 標準モードとして設定できるモードパラメータを追加します。

シングルインスタンスモードでは、ターゲットページの URL が同じ URL ページを持つページスタックに既に存在する場合、スタックの先頭に最も近い同じ URL を持つページがスタックの先頭に移動され、移動されたページはページは新しいページであり、元のページがスタックにまだ存在する場合、ページスタックの数は変更されません。ターゲットページの URL が同じ URL ページでページスタックに存在しない場合は、標準モードに従ってジャンプします。 , ページスタックの数が 1 増加します。

使用例は次のとおりです。

router.push({
    
    
  url: 'pages/Second',
  params: {
    
    
    src: 'Index页面传来的数据',
  }
}, router.RouterMode.Single)

3. router.replace()

router.replace() メソッドを呼び出して、アビリティ内の指定されたページにジャンプします。現在のページが新しいページに置き換えられ、置き換えられた現在のページが破棄されても、ページスタックの数は変わりません。

使用例は次のとおりです。

router.replace({
    
    
  url: 'pages/Second',
  params: {
    
    
    src: 'Index页面传来的数据',
  }
})

3. router.replace() プラスモードパラメータ

router.replace() メソッドは、router.RouterMode.Single シングルインスタンスモードおよび router.RouterMode.Standard 標準モードとして設定できるモードパラメータを追加します。

シングルインスタンスモードでは、ターゲットページの URL が同じ URL ページのページスタックに既に存在する場合、スタックの先頭に最も近い同じ URL のページがスタックの先頭に移動され、現在の URL と置き換えられます。ページを削除し、置き換えられた現在のページを破棄します。そのページは新しく作成されたページであり、ページスタックの数は 1 つ減ります。ターゲットページの URL が同じ URL ページのページスタックに存在しない場合は、ジャンプします。標準モードに従って、ページスタックの数は変更されません。

使用例は次のとおりです。

router.replace({
    
    
  url: 'pages/Second',
  params: {
    
    
    src: 'Index页面传来的数据',
  }
}, router.RouterMode.Single)

最後に、ジャンプをトリガーするボタンを Index.ets ファイルに追加します。Index.ets コードは次のとおりです。

// 导入router模块
import router from '@ohos.router';

@Entry
@Component
struct Index {
    
    
  @State message: string = 'Index页面'

  build() {
    
    
    Row() {
    
    
      Column() {
    
    
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)

        // 添加按钮，触发跳转
        Button('跳转')
          .fontSize(40)
          .onClick(() => {
    
    
            router.push({
    
    
              url: 'pages/Second',
              params: {
    
    
                src: 'Index页面传来的数据',
              }
            });
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

2.4.3 パラメータの受信

router.getParams() メソッドを呼び出して、インデックスページから渡されたカスタムパラメータを取得します。

import router from '@ohos.router';

@Entry
@Component
struct Second {
    
    
  @State src: string = router.getParams()?.['src'];
  // 页面刷新展示
  ...
}

router.back() メソッドを呼び出すと、前のページに戻ることができます。

最終的に、完全な Second.ets コードは次のようになります。

// 导入router模块
import router from '@ohos.router';

@Entry
@Component
struct Second {
    
    
  @State message: string = 'Second页面'
  @State src: string = router.getParams()?.['src'];

  build() {
    
    
    Row() {
    
    
      Column() {
    
    
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)

        // 显示传参的内容
        Text(this.src)
          .fontSize(30)

        // 添加按钮，触发返回
        Button('返回')
          .fontSize(40)
          .onClick(() => {
    
    
            router.back();
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

2.4.4 実行中

プロジェクトを実行すると、初期化インターフェイスが図 2-7 に表示されます。

インデックスページで、[ジャンプ] をクリックすると、インデックスページから 2 ページ目にジャンプし、パラメータを受信して 2 ページ目のページを更新します。インターフェイスの効果は、図 2-8 に示されています。

2 ページ目で「戻る」をクリックすると、図 2-7 に示すインデックスページに戻ります。

上記は、ページジャンプ、パラメータの受け渡し、パラメータの受け取りの完全なプロセスです。

618 ビッグブック割引

苦労も得もありません。HarmonyOS アプリケーション開発をしっかり学び、高給与に挑戦してください!

618 アクティビティシーズンを利用して、もっとエネルギーを充電しましょう。携帯電話で遊ぶのを減らして、もっと勉強するのが王道です。現在、Dangdang と JD.com は、プラットフォーム上で書籍を購入する場合に 50% 割引のプロモーションを開始しました。これは非常に手頃な価格と言えます。

もちろん、文字は嫌いだけど動画を見るのは好きという子ども靴もいますので、Menmokeの「Hongmeng System 実践ショートビデオアプリ 0から1からHarmonyOSをマスターする」などのオンライン動画講座もあります。 com は非常に優れており、Douyin に似た短いビデオアプリを最初から開発する方法を教えてくれます。合計39時間と内容も充実！

参考文献

Liu Weiwei. HarmonyOS 携帯電話アプリケーション開発実践 [M]. 北京: 清華大学出版局、2022.
Liu Weiwei.Hongmeng HarmonyOS アプリケーション開発の入門から習得まで [M].北京:北京大学出版局、2022.
Liu Weiwei. Lao Wei から HarmonyOS 開発を学ぶ [EB/OL]. https://github.com/waylau/harmonyos-tutorial、2020-12-13/2022-12-29
Liu Weiwei. HarmonyOS 試験バンク [EB/OL]. https://github.com/waylau/harmonyos-exam、2022-11-04/2022-12-29