微信小程序的几种页面跳转方式

最新推荐文章于 2025-05-20 08:07:10 发布

Js_Zoro

最新推荐文章于 2025-05-20 08:07:10 发布

阅读量5.8k

点赞数 3

CC 4.0 BY-SA版权

文章标签：小程序

本文链接：https://blog.youkuaiyun.com/Js_Zoro/article/details/117747191

本文详细介绍了小程序中五种不同的页面跳转方法及其生命周期的影响，包括跳转至 tabBar 页面、其他页面、返回上一页等操作的具体实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

跳转方式一：跳转至tabBar页面，并关闭其他所有非 tabBar 页面

	 wx.switchTab({
       url: '/pages/logs/logs'
       //url同app.json中配置的tabBar路径
     })
     // 依次走的生命周期是:本页面的隐藏onHide,和目标页面的
     // 已经去过的 ：显示onShow
  	//  没去过的：加载onLoad，显示onShow，初次渲染onReady

跳转方式二：跳转至其他页面（非tabBar页面)

     wx.redirectTo({
       url: '../index/index'
       //url默认为本页面，所以需要退一层../
     })
     /**
   * 该方法会关闭当前页面，左上角不会有返回按钮
   * 依次走：本页面的卸载，
   * 目标页面的：加载，显示，初次渲染
   */

跳转方式三：此方法不会关闭当前页面，且页面最多层叠10层（非tabBar页面)

  wx.navigateTo({
    url: '../index/index'
  })
   /**
   * 依次走本页面的：隐藏onHide
   * 目标页面的：加载onload，显示onshow，初次渲染onready
  **/

跳转方式四：此方法会卸载所有页面

  wx.reLaunch({
    url: '../tahnak/thanks'
  })
    /**
   *跳转到（非tabBar页面)
   * 走先走本页面的卸载生命周期,然后依次卸载之前层叠的页面
   * 然后走目标页面的加载，显示，初次渲染
   * 同时左上角会出现一个主页按钮，点击主页会卸载当前页面然后回到首页
   * 走首页的加载，显示，初次渲染
  **/

跳转方式五：返回上一页

// 这个方法会先卸载当前页面，
  // 然后是目标页面的显示
   wx.navigateBack({
     delta: 1 //返回的页面数，1为返回上一页，如果大于现有页面数，则返回到首页。
   })

总结：

wx.switchTab({url: '/pages/logs/logs'}),
wx.redirectTo({url: '../index/index'}),
wx.navigateTo({url: '../index/index'}),
wx.reLaunch({url: '../tahnak/thanks'}),
wx.reLaunch({url: '../tahnak/thanks'})