Mobile Platform as a Service:ルート

my.switchTab

このインターフェースは、指定されたタブページ（tabBar）にジャンプし、その他すべての非タブページを閉じるために使用されます。

詳細については、「ルート関連のよくある質問」をご参照ください。

サンプルコード

// app.json
{
  "tabBar": {
    "items": [{
      "pagePath": "page/home/index",
      "name": "Home"
    },{
      "pagePath": "page/user/index",
      "name": "User"
    }]
  }
}

//.js
my.switchTab({
  url: 'page/home/index'
})

パラメーター

パラメーターは Object 型で、属性は次のとおりです。

tabBar の構成

構成 items の構成：

サンプル構成

// tabBar のサンプル構成
{
  "tabBar": {
    "textColor": "#dddddd",
    "selectedColor": "#49a9ee",
    "backgroundColor": "#ffffff",
    "items": [
      {
        "pagePath": "pages/index/index",
        "name": "Home"
      },
      {
        "pagePath": "pages/logs/logs",
        "name": "Log"
      }
    ]
  }
}

my.reLaunch

現在のすべてのページを閉じて、アプリケーション内の指定されたページにジャンプします。

バージョン要件：ベースライブラリ 1.4.0 以降のバージョン。以前のバージョンについては、互換性処理を実行することをお勧めします。

詳細については、「ルート関連のよくある質問」をご参照ください。

サンプルコード

my.reLaunch({
  url: '/page/index'
})

パラメーター

パラメーターは Object 型で、属性は次のとおりです。

my.redirectTo

現在のページを閉じて、アプリケーション内の指定されたページにジャンプします。

詳細については、「ルート関連のよくある質問」をご参照ください。

サンプルコード

my.redirectTo({
  url: 'new_page?count=100' // URL は絶対パスまたは相対パスです
})

ホームページのインデックスページにリダイレクトする場合を例に説明します。

• 絶対パスを使用：URL は /pages/index/index です。

• 相対パスを使用：URL は ../index/index です。

パラメーター

パラメーターは Object 型で、属性は次のとおりです。

my.navigateTo

現在のページを維持し、アプリケーション内の指定されたページにジャンプします。

• my.navigateBack を使用して元のページに戻ることができます。

• 最大ページ深度は 10 です。つまり、navigateTo は最大 10 回呼び出すことができます。

my.navigateTo と my.redirectTo は、tabBar ページへのジャンプをサポートしていません。必要な場合は、my.switchTab を使用して tabBar ページにリダイレクトできます。

詳細については、「ルート関連のよくある質問」をご参照ください。

サンプルコード

// API-DEMO page/API/navigator/navigator.json
{
    "defaultTitle": "ページリダイレクト"
}

<!-- API-DEMO page/API/navigator/navigator.axml-->
<view class="page">
  <view class="page-section">
    <button type="primary" onTap="navigateTo">新しいページにジャンプ</button>
    <button type="primary" onTap="navigateBack">前のページに戻る</button>
    <button type="primary" onTap="redirectTo">現在のページで開く - ユーザー情報を取得</button>
    <button type="primary" onTap="switchTab">タブにジャンプ - コンポーネント</button>
    <view class="page-description">このデモは API の説明のみを提供し、ミニプログラムのリダイレクト機能は網羅していません。ミニプログラムのリダイレクトについては、関連ドキュメントを参照してください。</view>
    <button type="primary" onTap="navigateToMiniProgram">ミニプログラムにジャンプ</button>
    <button type="primary" onTap="navigateBackMiniProgram">ミニプログラムに戻る</button>
  </view>
</view>

// API-DEMO page/API/navigator/navigator.js
Page({
  navigateTo() {
    my.navigateTo({ url: '../get-user-info/get-user-info' })
  },
  navigateBack() {
    my.navigateBack()
  },
  redirectTo() {
    my.redirectTo({ url: '../get-user-info/get-user-info' })
  },
  navigateToMiniProgram() {
    if (my.canIUse('navigateToMiniProgram')) {
      my.navigateToMiniProgram({
        appId: '2017072607907880',
        extraData: {
          "data1": "test"
        },
        success: (res) => {
          console.log(JSON.stringify(res))
        },
        fail: (res) => {
          console.log(JSON.stringify(res))
        }
      });
    }
  },
  navigateBackMiniProgram() {
    if (my.canIUse('navigateBackMiniProgram')) {
      my.navigateBackMiniProgram({
        extraData: {
          "data1": "test"
        },
        success: (res) => {
          console.log(JSON.stringify(res))
        },
        fail: (res) => {
          console.log(JSON.stringify(res))
        }
      });
    }
  },
  switchTab() {
    my.switchTab({
        url: '/page/tabBar/component/index',
        success: () => {
          my.showToast({
            content: 'Succeeded',
            type: 'success',
            duration: 4000
          });
        }
      }
    );
  },
})

/* API-DEMO page/API/navigator/navigator.acss */
button + button {
  margin-top: 20rpx;
}

パラメーター

パラメーターは Object 型で、属性は次のとおりです。

my.navigateBack

現在のページを閉じて、前のページまたは上位レベルのページに戻ります。getCurrentPages を使用して現在のページスタック情報を取得し、戻るレベル数を決定できます。

詳細については、「ルート関連のよくある質問」をご参照ください。

サンプルコード

// API-DEMO page/API/navigator/navigator.json
{
    "defaultTitle": "ページリダイレクト"
}

<!-- API-DEMO page/API/navigator/navigator.axml-->
<view class="page">
  <view class="page-section">
    <button type="primary" onTap="navigateTo">新しいページに移動</button>
    <button type="primary" onTap="navigateBack">前のページに戻る</button>
    <button type="primary" onTap="redirectTo">現在のページで開く - ユーザー情報を取得</button>
    <button type="primary" onTap="switchTab">タブに移動 - コンポーネント</button>
    <view class="page-description">このデモは API の説明のみを提供し、ミニプログラムのリダイレクト機能は網羅していません。ミニプログラムのリダイレクトについては、関連ドキュメントを参照してください。</view>
    <button type="primary" onTap="navigateToMiniProgram">ミニプログラムに移動</button>
    <button type="primary" onTap="navigateBackMiniProgram">ミニプログラムに戻る</button>
  </view>
</view>

// API-DEMO page/API/navigator/navigator.js
Page({
  navigateTo() {
    my.navigateTo({ url: '../get-user-info/get-user-info' })
  },
  navigateBack() {
    my.navigateBack()
  },
  redirectTo() {
    my.redirectTo({ url: '../get-user-info/get-user-info' })
  },
  navigateToMiniProgram() {
    if (my.canIUse('navigateToMiniProgram')) {
      my.navigateToMiniProgram({
        appId: '2017072607907880',
        extraData: {
          "data1": "test"
        },
        success: (res) => {
          console.log(JSON.stringify(res))
        },
        fail: (res) => {
          console.log(JSON.stringify(res))
        }
      });
    }
  },
  navigateBackMiniProgram() {
    if (my.canIUse('navigateBackMiniProgram')) {
      my.navigateBackMiniProgram({
        extraData: {
          "data1": "test"
        },
        success: (res) => {
          console.log(JSON.stringify(res))
        },
        fail: (res) => {
          console.log(JSON.stringify(res))
        }
      });
    }
  },
  switchTab() {
    my.switchTab({
        url: '/page/tabBar/component/index',
        success: () => {
          my.showToast({
            content: 'Succeeded',
            type: 'success',
            duration: 4000
          });
        }
      }
    );
  },
})

/* API-DEMO page/API/navigator/navigator.acss */
button + button {
  margin-top: 20rpx;
}

パラメーター

パラメーターは Object 型で、属性は次のとおりです。

ルート関連のよくある質問

• Q：my.navigateTo または my.redirectTo を使用してページをリダイレクトするときに、ページの下部に tabBar が表示されないのはなぜですか？

  A：コマンド（my.navigateTo）またはコマンド（my.redirectTo）を使用してページにリダイレクトする場合、tabBar 構成で定義されていても、ページの下部に tabBar は表示されません。タブにリダイレクトするには、my.switchTab メソッドを使用します。

• Q：my.navigateTo はパラメーター入力をサポートしていますか？

  A：はい。

  パラメーター規則：パスとパラメーターの間に「?」を使用します。パラメーターキーとパラメーター値を「=」で連結し、異なるパラメーターを「&」で区切ります。

  例：path?key1=value1&key2=value2

• Q：my.redirectTo を使用してページリダイレクトを行うときに、左上隅の戻るボタンを削除できますか？

  A：ページスタックの深さが 1 の場合、my.redirectTo を使用した後に、ターゲットページの左上隅に[戻る]ボタンは表示されません。

  • getCurrentPages メソッドを使用して、ピークページスタックの深さを決定することをお勧めします。

  • または、my.reLaunch を使用してリダイレクトします。my.reLaunch を使用してリダイレクトする場合、tabBar ページにリダイレクトすることはできません。

• Q：ミニプログラムは my.navigateTo を使用して何度もリダイレクトされています。ただし、さらに数回試行した後、リダイレクトは失敗します。なぜですか？

  A：ミニプログラムの最大ページスタックの深さは 10 です。getCurrentPages を使用してピークページスタックの深さを決定し、最大深度を超えた場合は、ページジャンプにリダイレクトを使用することをお勧めします。

• Q：ミニプログラムのナビゲーションバーの[戻る]ボタンを非表示にできますか？

  A：[戻る]ボタンは階層構造のため常に表示されます。my.reLaunch メソッドを使用して[戻る]ボタンを非表示にし、現在のすべてのページを閉じてこのページにリダイレクトできます。