微信小程序路由跳转

embedded/2024/9/25 4:11:48/

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


http://www.ppmy.cn/embedded/44048.html

相关文章

渗透测试工具Cobalt strike-2.CS基础使用

三、结合metasploit,反弹shell 在kali中开启使用命令开启metasploit msfconsole ┌──(root㉿oldboy)-[~] └─# msfconsole --- msf6 > use exploit/multi/handler [*] Using configured payload generic/shell_reverse_tcp --- msf6 exploit(multi/handler) > show …

vue3学习(四)

前言 接上篇学习笔记&#xff0c;分享3个内置组件&#xff1a;动态组件、缓存组件、分发组件基本用法。大家一起通过code的示例&#xff0c;从现象理解,注意再次理解生命周期。 一、code示例 组件A&#xff1a;CompA <script setup> import {onMounted, onUnmounted} f…

后端技术栈都有哪些

在后端技术领域&#xff0c;有很多不同的技术栈可供选择&#xff0c;这取决于项目的具体需求、团队的技能和经验以及所使用的框架或库的流行程度。以下是一些常见的后端技术栈的示例&#xff1a; Node.js&#xff1a; 框架&#xff1a;Express.js, Koa.js, NestJS, Hapi.js数据…

spring session+redis存储session,实现用户登录功能,并在拦截器里面判断用户session是否过期,过期就跳转到登录页面

在Spring应用中&#xff0c;使用Redis存储Session是一种常见的方式&#xff0c;可以实现分布式环境下的Session管理。以下是实现用户登录功能&#xff0c;并在拦截器中判断Session是否过期并跳转到登录页面的基本步骤&#xff1a; 添加依赖&#xff1a;首先&#xff0c;确保你的…

kotlin基础之泛型和委托

Kotlin泛型的概念及使用 泛型概念 在Kotlin中&#xff0c;泛型&#xff08;Generics&#xff09;是一种允许在类、接口和方法中使用类型参数的技术。这些类型参数在实例化类、实现接口或调用方法时会被具体的类型所替代。泛型的主要目的是提高代码的复用性、类型安全性和可读…

4月平板电脑行业线上销售数据分析

由于全球科技发展趋势&#xff0c;如AI技术的应用&#xff0c;以及厂商新品发布计划&#xff1b;同时&#xff0c;平板电脑作为个人电脑的延伸产品&#xff0c;其便携性和生产力相较于手机具有明显优势&#xff0c;这也为行业的进一步发展提供了动力。 据鲸参谋数据统计&#…

程序猿转型做项目经理一定要注意这 5 个坑

前言 国内的信息系统项目经理&#xff0c;很多都是从技术骨干转型的&#xff0c;我就是这样一路走过来的&#xff0c;这样有很多好处&#xff0c;比如技术过硬容易服众、熟悉开发流程更容易把控项目进度和质量、开发过程中碰到难题时更好组织攻坚等等&#xff0c;但是所谓成也…

【微机原理及接口技术】可编程计数器/定时器8253

【微机原理及接口技术】可编程计数器/定时器8253 文章目录 【微机原理及接口技术】可编程计数器/定时器8253前言一、8253的内部结构和引脚二、8253的工作方式三、8253的编程总结 前言 本篇文章就8253芯片展开&#xff0c;详细介绍8253的内部结构和引脚&#xff0c;8253的工作方…