您的当前位置:首页正文

微信小程序之页面路由

2024-11-26 来源:个人技术集锦

微信小程序的页面路由是指在小程序中实现页面之间的跳转。微信小程序提供了几种不同的方式来实现页面路由,包括导航到新页面、重定向、返回上一页等。下面是一些常用的页面路由方法及其使用场景:

 1. wx.navigateTo(OBJECT)

用途:用于跳转到应用内的某个页面,但不关闭当前页面。

参数:

  - `url`:需要跳转的应用内非 tabBar 的页面的路径, 路径后可以带参数。参数与路径之间使用 ? 分隔,参数键与参数值用 =相连,不同参数用 `&` 分隔;如 `'path?key=value&key2=value2'`。

  - `success`:接口调用成功的回调函数。

  -fail:接口调用失败的回调函数。

  - `complete`:接口调用结束的回调函数(调用成功、失败都会执行)。

 示例代码:

javascript

wx.navigateTo({

  url: '/pages/detail/detail?id=123',

  success: function(res){

    // 成功跳转后的操作

},

  fail: function(res) {

    // 失败时的操作

 },

  complete:function(res) {

    // 无论成功或失败都会执行的操作

 }

})

2.wx.redirectTo(OBJECT)

用途:关闭当前页面,跳转到应用内的某个页面。

-参数:同 wx.navigateTo。

示例代码:

wx.redirectTo({

  url: '/pages/list/list'

})

3.wx.switchTab(OBJECT)

- 用途:跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。

参数:

  - `url`:需要跳转的 tabBar 页面的路径(需在 app.json的 `tabBar` 字段定义的页面)。

  - `success、fail、complete:同wx.navigateTo`。

示例代码:

wx.switchTab({

  url: '/pages/index/index'

})

4. wx.navigateBack(OBJECT)

用途:关闭当前页面,返回上一页面或多级页面。

参数:

  -delta:返回的页面数,如果 delta 大于现有打开的页面数,则返回到首页。

  - `success、fail、complete:同wx.navigateTo`。

示例代码:

wx.navigateBack({

  delta: 1

})

5.wx.reLaunch(OBJECT)

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

参数:同 wx.navigateTo。

示例代码:

wx.reLaunch({

  url: '/pages/home/home'

})

 注意事项

- 每次调用 `wx.navigateTo` 后,小程序会将当前页面压入栈中,最多可压入 10 个页面。

- 使用`wx.navigateBack` 可以控制返回的页面层数。

-`wx.switchTab` 只能用于跳转到 tabBar 页面,且会关闭所有非 tabBar 页面。

-`wx.reLaunch` 会关闭所有页面并重新打开指定的页面,适合用于重置整个应用的状态。

显示全文