微信小程序路由跳转

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

相关推荐
万少8 小时前
HarmonyOS 开发必会 5 种 Builder 详解
前端·harmonyos
橙序员小站10 小时前
Agent Skill 是什么?一文讲透 Agent Skill 的设计与实现
前端·后端
炫饭第一名13 小时前
速通Canvas指北🦮——基础入门篇
前端·javascript·程序员
王晓枫13 小时前
flutter接入三方库运行报错:Error running pod install
前端·flutter
符方昊13 小时前
React 19 对比 React 16 新特性解析
前端·react.js
ssshooter13 小时前
又被 Safari 差异坑了:textContent 拿到的值居然没换行?
前端
曲折13 小时前
Cesium-气象要素PNG色斑图叠加
前端·cesium
Forever7_14 小时前
Electron 淘汰!新的桌面端框架 更强大、更轻量化
前端·vue.js
Angelial14 小时前
Vue3 嵌套路由 KeepAlive:动态缓存与反向配置方案
前端·vue.js
jiayu14 小时前
Angular学习笔记24:Angular 响应式表单 FormArray 与 FormGroup 相互嵌套
前端