欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

微信小程序路由跳转

程序员文章站 2022-05-04 13:05:26
微信小程序路由跳转 1.wx.switchTab(Object object) 这里的tabBar是底下的导航栏指定的页面, 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面 参数 Object object | 属性 | 类型 | 默认值 | 必填 | 说明 | | | | | | ......

微信小程序路由跳转

1.wx.switchtab(object object)

这里的tabbar是底下的导航栏指定的页面,

跳转到 tabbar 页面,并关闭其他所有非 tabbar 页面

参数

object object

属性 类型 默认值 必填 说明
url string 需要跳转的 tabbar 页面的路径(需在 app.json 的 tabbar 字段定义的页面),路径后不能带参数。
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

示例代码

{
  "tabbar": {
    "list": [
      {
        "pagepath": "index",
        "text": "首页"
      },
      {
        "pagepath": "other",
        "text": "其他"
      }
    ]
  }
}
wx.switchtab({
  url: '/index'
})

2.wx.relaunch(object object)

基础库 1.1.0 开始支持,低版本需做。

关闭所有页面,打开到应用内的某个页面

参数

object object

属性 类型 默认值 必填 说明
url string 需要跳转的应用内页面路径,路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;如 'path?key=value&key2=value2'
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

示例代码

wx.relaunch({
  url: 'test?id=1'
})
// test page({ onload (option) { console.log(option.query) } })

3.wx.redirectto(object object)

关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。

参数

object object

属性 类型 默认值 必填 说明
url string 需要跳转的应用内非 tabbar 的页面的路径, 路径后可以带参数。参数与路径之间使用 ? 分隔,参数键与参数值用 = 相连,不同参数用 & 分隔;如 'path?key=value&key2=value2'
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

示例代码

wx.redirectto({
  url: 'test?id=1'
})

4.wx.navigateto(object object)

保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateback 可以返回到原页面。小程序中页面栈最多十层。

参数

object object

属性 类型 默认值 必填 说明
url string 需要跳转的应用内非 tabbar 的页面的路径, 路径后可以带参数。参数与路径之间使用 ? 分隔,参数键与参数值用 = 相连,不同参数用 & 分隔;如 'path?key=value&key2=value2'
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

示例代码

wx.navigateto({
  url: 'test?id=1'
})

// test.js
page({
  onload(option) {
    console.log(option.query)
  }
})

5wx.redirectto与wx.navigateto的区别

1.利用wx.navigateto跳转到下一个页面的时候(这时候会执行onhide方法),下一个页面头部会有返回按钮

2.如果不想有返回按钮,可以用wx.redirectto进行页面跳转(这时候关闭此页面,会执行onunload生命周期,这样下一个页面就不会有返回按钮了,因为上一个页面已经被关闭了,没有页面可以返回)

6wx.navigateback(object object)

关闭当前页面,返回上一页面或多级页面。可通过 getcurrentpages() 获取当前的页面栈,决定需要返回几层。

参数

object object

属性 类型 默认值 必填 说明
delta number 返回的页面数,如果 delta 大于现有页面数,则返回到首页。
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

示例代码

// 注意:调用 navigateto 跳转时,调用该方法的页面会被加入堆栈,而 redirectto 方法则不会。见下方示例代码

// 此处是a页面
wx.navigateto({
  url: 'b?id=1'
})

// 此处是b页面
wx.navigateto({
  url: 'c?id=1'
})

// 在c页面内 navigateback,将返回a页面
wx.navigateback({
  delta: 2
})