微信小程序路由跳转

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

相关推荐
AAA简单玩转程序设计13 分钟前
C++进阶小技巧:让代码从"能用"变"优雅"
前端·c++
子洋13 分钟前
群晖 DSM 更新后 Cloudflare DDNS 失效的排查记录
前端·后端·dns
一颗烂土豆21 分钟前
告别 Vue 多分辨率适配烦恼:vfit 让元素定位 “丝滑” 跨设备
前端·vue.js
ArkPppp23 分钟前
牛刀小试:Vue 3的响应式系统和Proxy?
前端
venton25 分钟前
Next.js SSR 实战:从零到一,构建服务端渲染应用
前端
萌狼蓝天32 分钟前
[Vue]性能优化:动态首行与动态列的匹配,表格数据格式处理性能优化
前端·javascript·vue.js·性能优化·ecmascript
一 乐35 分钟前
宠物管理宠物医院管理|基于Java+vue的宠物医院管理系统(源码+数据库+文档)
java·前端·数据库·vue.js·spring boot·宠物
一 乐36 分钟前
学习辅导系统|数学辅导小程序|基于java+小程序的数学辅导小程序设计与实现(源码+数据库+文档)
java·前端·数据库·vue.js·spring boot·学习·小程序
徐同保1 小时前
react+antd Input回车输入生成tag组件
前端·react.js·前端框架