微信小程序路由跳转

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来实现不同的跳转效果。

相关推荐
GreenTea2 小时前
GrokBot 核心成员 Lauren Tan:每月交付 2000 个 PR 的人,是怎么用 AI 的
前端·后端·架构
mCell3 小时前
用 Knip 清理 AI Coding 留下的冗余代码
前端·ai编程·前端工程化
笃行3504 小时前
使用Rokid AIUI做了一个童年推箱子游戏
前端
excel5 小时前
前端加密的作用与使用场景
前端
计算机魔术师6 小时前
纽约时报版权诉讼披露:微软高管内部称训练 AI 是人类历史上最大规模劳动窃取
前端
去伪存真6 小时前
大模型的参数量为什么那么大?
前端·人工智能
IT_陈寒6 小时前
Java空指针这次真把我坑惨了
前端·人工智能·后端
高级程序源7 小时前
django大学生创新创业项目管理系统94923-计算机课程设计、毕业设计
javascript·vue.js·spring boot·后端·python·django·课程设计
八荒启·交互动画8 小时前
# Web特效020—让 Web 特效真正动起来:时间循环应该怎么接
前端·webgl·网页特效·八荒启-交互动画·八荒启
动恰客流统计8 小时前
线下零售数字化浪潮下,客流统计的3个核心发展趋势
大数据·前端·人工智能