支付宝小程序API 路由

2020-09-16 16:33 更新

my.switchTab

简介

my.switchTab 是跳转到指定标签页(tabbar)页面,并关闭其他所有非标签页页面的 API。

如果小程序是一个多标签(tab)应用,即客户端窗口的底部栏可以切换页面,那么可以通过标签页配置项指定标签栏的表现形式,以及标签切换时显示的对应页面。

通过页面跳转 (my.navigateTo)或者页面重定向(my.redirectTo)所到达的页面,即使是定义在标签页配置中的页面,也不会显示底部的标签栏。标签页的第一个页面必须是首页。

相关问题请参见下文 路由FAQ。

扫码体验

tabbar.jpeg

示例代码

// 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)配置。

item 配置:
属性 类型 必填 描述
pagePath String 设置页面路径。
name String 名称。
icon String 普通图标路径。
activeIcon String 高亮图标路径。

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

my.reLaunch

简介

my.reLaunch 是关闭当前所有页面,跳转到应用内的某个指定页面的 API。

相关问题请参见下文 路由FAQ 。

使用限制

基础库 1.4.0 或更高版本;支付宝客户端 10.1.8 或更高版本,若版本较低,建议采取 兼容处理

扫码体验

导航栏.jpeg

示例代码

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

入参

Object 类型,属性如下:

属性 类型 必填 描述
url String 页面路径。如果页面不为 tabbar 页面则路径后可以带参数。参数规则:路径与参数之间使用?分隔,参数键与参数值用=相连,不同参数必须用&分隔。示例:path?key1=value1&key2=value2
success Function 调用成功的回调函数。
fail Function 调用失败的回调函数。
complete Function 调用结束的回调函数(调用成功、失败都会执行)。

my.redirectTo

简介

my.redirectTo 是关闭当前页面,跳转到应用内的某个指定页面的 API。

相关问题请参见下文路由FAQ 。

扫码体验

导航栏.jpeg

示例代码

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.navigateTo 是从当前页面,跳转到应用内的某个指定页面的 API。

相关问题请参见 路由FAQ 。

使用限制

  • 可使用 my.navigateBack 返回到原来页面。
  • 小程序中页面栈最多十层。
  • my.navigateTo 和 my.redirectTo 不允许跳转到选项卡(tabbar)页面;若需跳转到 tabbar 页面,请使用 my.switchTab

扫码体验

导航栏.jpeg

示例代码

// navigateTo.json
{
    "defaultTitle": "Navigator"
}
<!-- navigateTo.axml-->
<view class="page">
  <view class="page-section">
    <button type="primary" onTap="navigateTo">跳转新页面</button>
    <button type="primary" onTap="redirectTo">在当前页面打开新页面</button>
    <button type="primary" onTap="switchTab">跳转到“我的”</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">返回上一页</button>
  </view>
</view>
// navigateBack.js
Page({
  navigateBack() {
    my.navigateBack()
  },
});
// navigateBack.json
{
    "defaultTitle": "Navigator"
}

入参

Object 类型,属性如下:

属性 类型 必填 描述
url String 需要跳转的应用内非 tabbar 的目标页面路径,路径后可以带参数。参数规则:路径与参数之间使用 ?分隔,参数键与参数值用=相连,不同参数必须用&分隔。示例:path?key1=value1&key2=value2
success Function 调用成功的回调函数。
fail Function 调用失败的回调函数。
complete Function 调用结束的回调函数(调用成功、失败都会执行)。

my.navigateBack

简介

my.navigateBack 是关闭当前页面,返回上一级或多级页面的 API。可通过 Page.getCurrentPages 获取当前的页面栈信息,决定需要返回几层。

相关问题请参见下文路由FAQ 。

扫码体验

导航栏.jpeg

示例代码

// navigateTo.json
{
    "defaultTitle": "Navigator"
}
<!-- navigateTo.axml-->
<view class="page">
  <view class="page-section">
    <button type="primary" onTap="navigateTo">跳转新页面</button>
    <button type="primary" onTap="redirectTo">在当前页面打开新页面</button>
    <button type="primary" onTap="switchTab">跳转到“我的”</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">返回上一页</button>
  </view>
</view>
// navigateBack.js
Page({
  navigateBack() {
    my.navigateBack()
  },
});
// navigateBack.json
{
    "defaultTitle": "Navigator"
}

入参

Object 类型,属性如下:

属性 类型 必填 描述
delta Number 返回的页面数,如果 delta 大于现有打开的页面数,则返回到首页。默认值为 1。

路由 FAQ

Q:使用 my.navigateTo 或者 my.redirectTo 跳转的页面为什么不显示底部的 tab 栏?

A:通过页面跳转(my.navigateTo)或者页面重定向(my.redirectTo)所到达的页面,即使它是定义在 tabBar 配置中的页面,也不会显示底部的 tab 栏。若要跳转到 tab 页面,请使用 my.switchTab 方法。

Q:my.navigateTo 或者 my.switchTab 是否支持带参数跳转?

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 方法关闭当前所有页面去跳转到此页面,就没有这个返回按钮了。

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号