支付寶小程序API 路由

my.switchTab

簡(jiǎn)介

my.switchTab 是跳轉(zhuǎn)到指定標(biāo)簽頁(yè)（tabbar）頁(yè)面，并關(guān)閉其他所有非標(biāo)簽頁(yè)頁(yè)面的 API。

如果小程序是一個(gè)多標(biāo)簽（tab）應(yīng)用，即客戶端窗口的底部欄可以切換頁(yè)面，那么可以通過標(biāo)簽頁(yè)配置項(xiàng)指定標(biāo)簽欄的表現(xiàn)形式，以及標(biāo)簽切換時(shí)顯示的對(duì)應(yīng)頁(yè)面。

通過頁(yè)面跳轉(zhuǎn) (my.navigateTo）或者頁(yè)面重定向（my.redirectTo）所到達(dá)的頁(yè)面，即使是定義在標(biāo)簽頁(yè)配置中的頁(yè)面，也不會(huì)顯示底部的標(biāo)簽欄。標(biāo)簽頁(yè)的第一個(gè)頁(yè)面必須是首頁(yè)。

相關(guān)問題請(qǐng)參見下文 路由FAQ。

掃碼體驗(yàn)

示例代碼

// app.json
{
  "tabBar": {
    "items": [{
      "pagePath": "page/home/index",
      "name": "首頁(yè)"
    },{
      "pagePath": "page/user/index",
      "name": "用戶"
    }]
  }
}

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

入?yún)?/h4>

Object 類型，屬性如下：

屬性	類型	必填	描述
url	String	是	跳轉(zhuǎn)的標(biāo)簽頁(yè)的路徑（需在 app.json 的 tabbar 字段定義的頁(yè)面）。注意：路徑后不能帶參數(shù)。
success	Function	否	調(diào)用成功的回調(diào)函數(shù)。
fail	Function	否	調(diào)用失敗的回調(diào)函數(shù)。
complete	Function	否	調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會(huì)執(zhí)行）。

tabBar 配置

item 配置：

示例配置

// tabBar 示例配置
{
  "tabBar": {
    "textColor": "#dddddd",
    "selectedColor": "#49a9ee",
    "backgroundColor": "#ffffff",
    "items": [
      {
        "pagePath": "pages/index/index",
        "name": "首頁(yè)"
      },
      {
        "pagePath": "pages/logs/logs",
        "name": "日志"
      }
    ]
  }
}

my.reLaunch

簡(jiǎn)介

my.reLaunch 是關(guān)閉當(dāng)前所有頁(yè)面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)指定頁(yè)面的 API。

相關(guān)問題請(qǐng)參見下文 路由FAQ 。

使用限制

基礎(chǔ)庫(kù) 1.4.0 或更高版本；支付寶客戶端 10.1.8 或更高版本，若版本較低，建議采取 兼容處理。

掃碼體驗(yàn)

示例代碼

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

入?yún)?/h4>

Object 類型，屬性如下：

屬性	類型	必填	描述
url	String	是	頁(yè)面路徑。如果頁(yè)面不為 tabbar 頁(yè)面則路徑后可以帶參數(shù)。參數(shù)規(guī)則：路徑與參數(shù)之間使用?分隔，參數(shù)鍵與參數(shù)值用=相連，不同參數(shù)必須用&分隔。示例：path?key1=value1&key2=value2
success	Function	否	調(diào)用成功的回調(diào)函數(shù)。
fail	Function	否	調(diào)用失敗的回調(diào)函數(shù)。
complete	Function	否	調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會(huì)執(zhí)行）。

my.redirectTo

簡(jiǎn)介

my.redirectTo 是關(guān)閉當(dāng)前頁(yè)面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)指定頁(yè)面的 API。

相關(guān)問題請(qǐng)參見下文路由FAQ 。

掃碼體驗(yàn)

示例代碼

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

以跳轉(zhuǎn)至首頁(yè) index 頁(yè)面為例：

• 使用絕對(duì)路徑：url: /pages/index/index
• 使用相對(duì)路徑：url: ../index/index

入?yún)?/h4>

Object 類型，屬性如下：

屬性	類型	必填	描述
url	String	是	需要跳轉(zhuǎn)的應(yīng)用內(nèi)非 tabbar 的目標(biāo)頁(yè)面路徑 ,路徑后可以帶參數(shù)。參數(shù)規(guī)則：路徑與參數(shù)之間使用?分隔，參數(shù)鍵與參數(shù)值用=相連，不同參數(shù)必須用&分隔。示例：path?key1=value1&key2=value2
success	Function	否	調(diào)用成功的回調(diào)函數(shù)。
fail	Function	否	調(diào)用失敗的回調(diào)函數(shù)。
complete	Function	否	調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會(huì)執(zhí)行）。

my.navigateTo

簡(jiǎn)介

my.navigateTo 是從當(dāng)前頁(yè)面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)指定頁(yè)面的 API。

相關(guān)問題請(qǐng)參見 路由FAQ 。

使用限制

• 可使用 my.navigateBack 返回到原來頁(yè)面。
• 小程序中頁(yè)面棧最多十層。
• my.navigateTo 和 my.redirectTo 不允許跳轉(zhuǎn)到選項(xiàng)卡（tabbar）頁(yè)面；若需跳轉(zhuǎn)到 tabbar 頁(yè)面，請(qǐng)使用 my.switchTab。

掃碼體驗(yàn)

示例代碼

// navigateTo.json
{
    "defaultTitle": "Navigator"
}

<!-- navigateTo.axml-->
<view class="page">
  <view class="page-section">
    <button type="primary" onTap="navigateTo">跳轉(zhuǎn)新頁(yè)面</button>
    <button type="primary" onTap="redirectTo">在當(dāng)前頁(yè)面打開新頁(yè)面</button>
    <button type="primary" onTap="switchTab">跳轉(zhuǎn)到“我的”</button>
    <button type="primary" onTap="reLaunch">重新打開</button>
  </view>
</view>

// navigateTo.js
Page({
  navigateTo() {
    my.navigateTo({ url: './back' })
  },
  redirectTo() {
    my.redirectTo({ url: './back' })
  },
  reLaunch() {
    my.reLaunch({
      url: '/demo/my',
    })
  },
  switchTab() {
    my.switchTab({
        url: '/demo/my',
        success: () => {
          my.showToast({
            content: '成功',
            type: 'success',
            duration: 4000
          });
        }
      }
    );
  },
})

<!-- navigateBack.axml-->
<view class="page">
  <view class="page-section">
    <button type="primary" onTap="navigateBack">返回上一頁(yè)</button>
  </view>
</view>

// navigateBack.js
Page({
  navigateBack() {
    my.navigateBack()
  },
});

// navigateBack.json
{
    "defaultTitle": "Navigator"
}

入?yún)?/h4>

Object 類型，屬性如下：

屬性	類型	必填	描述
url	String	是	需要跳轉(zhuǎn)的應(yīng)用內(nèi)非 tabbar 的目標(biāo)頁(yè)面路徑，路徑后可以帶參數(shù)。參數(shù)規(guī)則：路徑與參數(shù)之間使用 ?分隔，參數(shù)鍵與參數(shù)值用=相連，不同參數(shù)必須用&分隔。示例：path?key1=value1&key2=value2
success	Function	否	調(diào)用成功的回調(diào)函數(shù)。
fail	Function	否	調(diào)用失敗的回調(diào)函數(shù)。
complete	Function	否	調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會(huì)執(zhí)行）。

my.navigateBack

簡(jiǎn)介

my.navigateBack 是關(guān)閉當(dāng)前頁(yè)面，返回上一級(jí)或多級(jí)頁(yè)面的 API?？赏ㄟ^ Page.getCurrentPages 獲取當(dāng)前的頁(yè)面棧信息，決定需要返回幾層。

相關(guān)問題請(qǐng)參見下文路由FAQ 。

掃碼體驗(yàn)

示例代碼

// navigateTo.json
{
    "defaultTitle": "Navigator"
}

<!-- navigateTo.axml-->
<view class="page">
  <view class="page-section">
    <button type="primary" onTap="navigateTo">跳轉(zhuǎn)新頁(yè)面</button>
    <button type="primary" onTap="redirectTo">在當(dāng)前頁(yè)面打開新頁(yè)面</button>
    <button type="primary" onTap="switchTab">跳轉(zhuǎn)到“我的”</button>
    <button type="primary" onTap="reLaunch">重新打開</button>
  </view>
</view>

// navigateTo.js
Page({
  navigateTo() {
    my.navigateTo({ url: './back' })
  },
  redirectTo() {
    my.redirectTo({ url: './back' })
  },
  reLaunch() {
    my.reLaunch({
      url: '/demo/my',
    })
  },
  switchTab() {
    my.switchTab({
        url: '/demo/my',
        success: () => {
          my.showToast({
            content: '成功',
            type: 'success',
            duration: 4000
          });
        }
      }
    );
  },
})

<!-- navigateBack.axml-->
<view class="page">
  <view class="page-section">
    <button type="primary" onTap="navigateBack">返回上一頁(yè)</button>
  </view>
</view>

// navigateBack.js
Page({
  navigateBack() {
    my.navigateBack()
  },
});

// navigateBack.json
{
    "defaultTitle": "Navigator"
}

入?yún)?/h4>

Object 類型，屬性如下：

屬性	類型	必填	描述
delta	Number	否	返回的頁(yè)面數(shù)，如果 delta 大于現(xiàn)有打開的頁(yè)面數(shù)，則返回到首頁(yè)。默認(rèn)值為 1。

路由 FAQ

Q：使用 my.navigateTo 或者 my.redirectTo 跳轉(zhuǎn)的頁(yè)面為什么不顯示底部的 tab 欄？

A：通過頁(yè)面跳轉(zhuǎn)（my.navigateTo）或者頁(yè)面重定向（my.redirectTo）所到達(dá)的頁(yè)面，即使它是定義在 tabBar 配置中的頁(yè)面，也不會(huì)顯示底部的 tab 欄。若要跳轉(zhuǎn)到 tab 頁(yè)面，請(qǐng)使用 my.switchTab 方法。

Q：my.navigateTo 或者 my.switchTab 是否支持帶參數(shù)跳轉(zhuǎn)？

A：支持。

參數(shù)規(guī)則：路徑與參數(shù)之間使用 ? 分隔，參數(shù)鍵與參數(shù)值用 = 相連，不同參數(shù)必須用 & 分隔。

示例：path?key1=value1&key2=value2

Q：使用 my.redirectTo 跳轉(zhuǎn)頁(yè)面，是否可以去掉左上角的返回按鈕？

A：當(dāng)頁(yè)面棧深度為 1 時(shí)，使用 my.redirectTo 跳轉(zhuǎn)頁(yè)面的左上角不會(huì)有返回按鈕。

• 建議通過 getCurrentPages 方法判斷頁(yè)面棧峰值。
• 或者可以直接使用 my.reLaunch 進(jìn)行跳轉(zhuǎn)，使用 my.reLaunch 進(jìn)行跳轉(zhuǎn)時(shí)，不允許跳轉(zhuǎn)到 tabbar 頁(yè)面。

Q：小程序多次通過 my.navigateTo 跳轉(zhuǎn)，嘗試幾次后為何再點(diǎn)擊不會(huì)跳轉(zhuǎn)了？

A：小程序規(guī)定最多不能超過 10 層頁(yè)面棧，建議通過 getCurrentPages 方法判斷頁(yè)面棧峰值，超過后用重定向跳轉(zhuǎn)頁(yè)面。

Q：小程序中的導(dǎo)航欄返回按鈕是否能隱藏？

A：因?yàn)橛袑蛹?jí)的原因，所以會(huì)有返回按鈕?？梢哉{(diào)用 my.reLaunch 方法關(guān)閉當(dāng)前所有頁(yè)面去跳轉(zhuǎn)到此頁(yè)面，就沒有這個(gè)返回按鈕了。