微信小程序路由跳转

1. wx.navigateTo

  • 作用:保留当前页面,跳转到应用内的某个页面。
  • 特点 :跳转后目标页面的生命周期函数 onLoadonShow 会被触发。
  • 使用场景:一般用于跳转到应用内的其他页面,保留当前页面的状态,例如从文章列表页跳转到文章详情页。

2. wx.redirectTo

  • 作用:关闭当前页面,跳转到应用内的某个页面。
  • 特点 :跳转后当前页面会被销毁,目标页面的生命周期函数 onLoadonShow 会被触发。
  • 使用场景:一般用于页面之间的替换跳转,例如在登录页成功登录后跳转到首页。

3. wx.switchTab

  • 作用:跳转到指定的 tabBar 页面,并关闭其他所有非 tabBar 页面。
  • 特点:只能跳转到 tabBar 页面,不能跳转到非 tabBar 页面。
  • 使用场景:一般用于跳转到应用底部的导航栏页面,例如从其他页面跳转到应用的首页。

4. wx.reLaunch

  • 作用:关闭所有页面,打开到应用内的某个页面。
  • 特点:关闭所有页面,包括所有的 tabBar 页面,然后打开目标页面。
  • 使用场景:一般用于程序重启或者清空页面栈后跳转到某个页面,例如在应用设置中进行设置后重启应用。

假设我们有一个小程序,包含以下页面:

  1. 首页:pages/index/index
  2. 文章详情页:pages/detail/detail
  3. 用户设置页:pages/settings/settings

现在,我们来实现一个场景:用户从首页点击文章进入文章详情页,然后从文章详情页跳转到用户设置页,最后从用户设置页返回到首页。

1. 在首页设置点击事件跳转到文章详情页

javascript 复制代码
// pages/index/index.js
Page({
  // 点击文章跳转到详情页
  gotoDetail: function () {
    wx.navigateTo({
      url: '/pages/detail/detail?id=123&title=Sample Article'
    });
  }
});

2. 在文章详情页设置点击事件跳转到用户设置页

javascript 复制代码
// pages/detail/detail.js
Page({
  // 点击设置跳转到设置页
  gotoSettings: function () {
    wx.navigateTo({
      url: '/pages/settings/settings'
    });
  }
});

3. 在用户设置页设置点击事件返回首页

javascript 复制代码
// pages/settings/settings.js
Page({
  // 点击返回首页
  goBackToIndex: function () {
    wx.switchTab({
      url: '/pages/index/index'
    });
  }
});

通过以上代码,我们实现了一个简单的场景:用户从首页跳转到文章详情页,然后跳转到用户设置页,最后从用户设置页返回到首页。在这个过程中,我们分别使用了**wx.navigateTowx.switchTab**这两个导航API来实现不同的跳转效果。

相关推荐
leobertlan5 小时前
2025年终总结
前端·后端·程序员
子兮曰5 小时前
OpenClaw架构揭秘:178k stars的个人AI助手如何用Gateway模式统一控制12+通讯频道
前端·javascript·github
百锦再6 小时前
Reactive编程入门:Project Reactor 深度指南
前端·javascript·python·react.js·django·前端框架·reactjs
莲华君6 小时前
React快速上手:从零到项目实战
前端·reactjs教程
百锦再6 小时前
React编程高级主题:测试代码
android·前端·javascript·react.js·前端框架·reactjs
易安说AI6 小时前
Ralph Loop 让Claude无止尽干活的牛马...
前端·后端
webYin7 小时前
解决 Uni-App 运行到微信小程序时 “Socket合法域名校验出错” 问题
微信小程序·小程序·uni-app
颜酱7 小时前
图结构完全解析:从基础概念到遍历实现
javascript·后端·算法
失忆爆表症8 小时前
05_UI 组件库集成指南:Shadcn/ui + Tailwind CSS v4
前端·css·ui
小迷糊的学习记录8 小时前
Vuex 与 pinia
前端·javascript·vue.js