調用my.switchTab跳轉到指定標籤頁 - Mobile Platform as a Service

my.switchTab

該介面用於跳轉到指定標籤頁（tabBar）頁面，並關閉其他所有非標籤頁頁面。

說明

如果小程式是一個多標籤（tab）應用，即用戶端視窗的底部欄可以切換頁面，那麼可以通過標籤頁配置項指定標籤欄的表現形式，以及標籤切換時顯示的對應頁面。
通過頁面跳轉（my.navigateTo）或者頁面重新導向（my.redirectTo）所到達的頁面，即使是定義在標籤頁配置中的頁面，也不會顯示底部的標籤欄。
標籤頁的第一個頁面必須是首頁。

程式碼範例

// app.json
{
  "tabBar": {
    "items": [{
      "pagePath": "page/home/index",
      "name": "首頁"
    },{
      "pagePath": "page/user/index",
      "name": "使用者"
    }]
  }
}

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

入參

Object 類型，屬性如下：

屬性	類型	必填	說明
url	String	是	跳轉的標籤頁的路徑（需在 app.json 的 tabBar 欄位定義的頁面）。注意：路徑後不能帶參數。
success	Function	否	調用成功的回呼函數。
fail	Function	否	調用失敗的回呼函數。
complete	Function	否	調用結束的回呼函數（調用成功、失敗都會執行）。

tabBar 配置

屬性	類型	必填	描述
textColor	HexColor	否	文字顏色。
selectedColor	HexColor	否	選中文字顏色。
backgroundColor	HexColor	否	背景色。
items	Array	是	每個標籤（tab）配置。

items 配置：

屬性	類型	必填	描述
pagePath	String	是	設定頁面路徑。
name	String	是	名稱。
icon	String	否	普通表徵圖路徑。推薦大小為 60*60 px ，系統會對任意傳入的圖片非等比展開或縮放。
activeIcon	String	否	高亮表徵圖路徑。

配置樣本

// tabBar 樣本配置
{
  "tabBar": {
    "textColor": "#dddddd",
    "selectedColor": "#49a9ee",
    "backgroundColor": "#ffffff",
    "items": [
      {
        "pagePath": "pages/index/index",
        "name": "首頁"
      },
      {
        "pagePath": "pages/logs/logs",
        "name": "日誌"
      }
    ]
  }
}

my.reLaunch

該介面用於關閉當前所有頁面，跳轉到應用內的某個指定頁面。

版本要求：基礎庫 1.4.0 或更高版本，若版本較低，建議做相容處理。

相關問題參見路由常見問題。

程式碼範例

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

入參

Object 類型，屬性如下：

屬性	類型	必填	描述
url	String	是	頁面路徑。如果頁面不為 tabBar 頁面則路徑後可以帶參數。參數規則：路徑與參數之間使用`?`分隔，參數鍵與參數值用`=`相連，不同參數必須用`&`分隔。樣本：`path?key1=value1&key2=value2`
success	Function	否	調用成功的回呼函數。
fail	Function	否	調用失敗的回呼函數。
complete	Function	否	調用結束的回呼函數（調用成功、失敗都會執行）。

my.redirectTo

該介面用於關閉當前頁面，跳轉到應用內的某個指定頁面。

相關問題參見路由常見問題。

說明

使用 my.redirectTo 跳轉到某個頁面的同時，會關閉當前頁面再跳轉到下個頁面，所以在頁面上沒有返回箭頭。

程式碼範例

my.redirectTo({
  url: 'new_page?count=100' //路徑可以使用相對路徑或絕對路徑的方式進行傳遞
})

以跳轉至首頁 index 頁面為例：

使用絕對路徑：URL 為 /pages/index/index。
使用相對路徑：URL 為 ../index/index。

入參

Object 類型，屬性如下：

屬性	類型	必填	描述
url	String	是	需要跳轉的應用內非 tabBar 的目標頁面路徑 ,路徑後可以帶參數。參數規則：路徑與參數之間使用`?`分隔，參數鍵與參數值用`=`相連，不同參數必須用`&`分隔。樣本：`path?key1=value1&key2=value2`
success	Function	否	調用成功的回呼函數。
fail	Function	否	調用失敗的回呼函數。
complete	Function	否	調用結束的回呼函數（調用成功、失敗都會執行）。

my.navigateTo

該介面用於從當前頁面，跳轉到應用內的某個指定頁面。

您可使用 my.navigateBack 返回到原來頁面。
小程式中頁面棧最多十層。

my.navigateTo 和 my.redirectTo 不允許跳轉到選項卡（tabBar）頁面；若需跳轉到 tabBar 頁面，請使用 my.switchTab。

相關問題參見路由常見問題。

程式碼範例

// 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">跳轉 Tab - 組件</button>
    <view class="page-description">本Demo不具備小程式跳轉功能，僅展示 API 的使用，具體接入請參考小程式官方文檔 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: '成功',
            type: 'success',
            duration: 4000
          });
        }
      }
    );
  },
})

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

入參

Object 類型，屬性如下：

屬性	類型	必填	描述
url	String	是	需要跳轉的應用內非 tabBar 的目標頁面路徑 ,路徑後可以帶參數。參數規則：路徑與參數之間使用 `?`分隔，參數鍵與參數值用`=`相連，不同參數必須用`&`分隔。樣本：`path?key1=value1&key2=value2`
success	Function	否	調用成功的回呼函數。
fail	Function	否	調用失敗的回呼函數。
complete	Function	否	調用結束的回呼函數（調用成功、失敗都會執行）。

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">跳轉 Tab - 組件</button>
    <view class="page-description">本Demo不具備小程式跳轉功能，僅展示 API 的使用，具體接入請參考小程式官方文檔 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: '成功',
            type: 'success',
            duration: 4000
          });
        }
      }
    );
  },
})

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

入參

Object 類型，屬性如下：

屬性	類型	必填	預設值	描述
delta	Number	否	1	返回的頁面數，如果 delta 大於現有開啟的頁面數，則返回到首頁。

路由常見問題

Q：使用 my.navigateTo 或者 my.redirectTo 跳轉的頁面為什麼不顯示底部的 tab 欄？
A：通過頁面跳轉（my.navigateTo）或者頁面重新導向（my.redirectTo）所到達的頁面，即使它是定義在 tabBar 配置中的頁面，也不會顯示底部的 tab 欄。若要跳轉到 tab 頁面，請使用 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 方法關閉當前所有頁面去跳轉到此頁面，則不會有返回按鈕。