当前位置: 首页 > news >正文

微信小程序中常见的 跳转方式 及其特点的表格总结(wx.navigateTo 适合需要返回上一页的场景)

文章目录

      • 详细说明
      • 总结
      • `wx.navigateTo` 的特点
      • 为什么 `wx.navigateTo` 最常用?
      • 其他跳转方式的使用频率
      • 总结

以下是微信小程序中常见的跳转方式及其特点的表格总结:

跳转方式API 方法特点适用场景
wx.navigateTowx.navigateTo({ url: '路径' })保留当前页面,跳转到新页面(非 tabBar 页面)。最多支持 10 层页面栈。用于跳转到非 tabBar 页面,且需要返回上一页的场景。
wx.redirectTowx.redirectTo({ url: '路径' })关闭当前页面,跳转到新页面(非 tabBar 页面)。用于不需要返回当前页面的场景,如登录后跳转到主页。
wx.switchTabwx.switchTab({ url: '路径' })跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。用于切换到 tabBar 页面的场景。
wx.reLaunchwx.reLaunch({ url: '路径' })关闭所有页面,跳转到新页面(可以是 tabBar 或非 tabBar 页面)。用于重置应用状态并跳转到新页面的场景,如退出登录后跳转到登录页。
wx.navigateBackwx.navigateBack({ delta: 1 })返回上一页面或多层页面,delta 参数指定返回的层数。用于返回上一页或多层页面的场景。
wx.navigateToMiniProgramwx.navigateToMiniProgram({ appId: '目标小程序appId' })跳转到其他小程序。用于跳转到其他小程序的场景。
wx.navigateBackMiniProgramwx.navigateBackMiniProgram()从其他小程序返回到当前小程序。用于从其他小程序返回当前小程序的场景。

详细说明

  1. wx.navigateTo

    • 特点:保留当前页面,跳转到新页面。
    • 限制:最多只能打开 10 层页面栈。
    • 示例
      wx.navigateTo({url: '/pages/detail/detail?id=123'
      });
      
  2. wx.redirectTo

    • 特点:关闭当前页面,跳转到新页面。
    • 限制:不能跳转到 tabBar 页面。
    • 示例
      wx.redirectTo({url: '/pages/index/index'
      });
      
  3. wx.switchTab

    • 特点:跳转到 tabBar 页面,并关闭其他非 tabBar 页面。
    • 限制:只能跳转到 tabBar 页面。
    • 示例
      wx.switchTab({url: '/pages/home/home'
      });
      
  4. wx.reLaunch

    • 特点:关闭所有页面,跳转到新页面。
    • 限制:无。
    • 示例
      wx.reLaunch({url: '/pages/login/login'
      });
      
  5. wx.navigateBack

    • 特点:返回上一页面或多层页面。
    • 参数delta 指定返回的层数,默认为 1。
    • 示例
      wx.navigateBack({delta: 1 // 返回上一页
      });
      
  6. wx.navigateToMiniProgram

    • 特点:跳转到其他小程序。
    • 限制:需要目标小程序的 appId,且需要用户授权。
    • 示例
      wx.navigateToMiniProgram({appId: '目标小程序的appId',path: '目标小程序的路径'
      });
      
  7. wx.navigateBackMiniProgram

    • 特点:从其他小程序返回到当前小程序。
    • 示例
      wx.navigateBackMiniProgram();
      

总结

微信小程序提供了多种跳转方式,适用于不同的场景:

  • 页面内跳转wx.navigateTowx.redirectTowx.reLaunch
  • tabBar 跳转wx.switchTab
  • 返回上一页wx.navigateBack
  • 跳转到其他小程序wx.navigateToMiniProgramwx.navigateBackMiniProgram

根据具体需求选择合适的跳转方式,可以提升用户体验和开发效率。


在微信小程序开发中,wx.navigateTo 是使用最频繁的跳转方式。以下是它的特点和使用场景,以及为什么它是最常用的:


wx.navigateTo 的特点

  1. 保留当前页面

    • 跳转到新页面时,当前页面会被保留在页面栈中,用户可以通过返回按钮回到上一页。
    • 适合需要返回上一页的场景。
  2. 支持传递参数

    • 可以通过 URL 传递参数到目标页面,例如:
      wx.navigateTo({url: '/pages/detail/detail?id=123&name=foo'
      });
      
    • 目标页面可以通过 onLoad 生命周期函数接收参数:
      Page({onLoad(query) {console.log(query.id); // 输出 123console.log(query.name); // 输出 foo}
      });
      
  3. 适用于非 tabBar 页面

    • wx.navigateTo 只能跳转到非 tabBar 页面,而 tabBar 页面通常使用 wx.switchTab
  4. 页面栈限制

    • 最多只能打开 10 层页面栈。如果超过 10 层,需要先关闭一些页面。

为什么 wx.navigateTo 最常用?

  1. 符合用户习惯

    • 用户通常期望通过返回按钮回到上一页,而 wx.navigateTo 正好满足这一需求。
  2. 灵活性高

    • 支持传递参数,适合大多数页面跳转场景。
    • 可以跳转到任意非 tabBar 页面。
  3. 开发便捷

    • 代码简单易用,适合快速开发。
  4. 适用场景广泛

    • 例如:
      • 从列表页跳转到详情页。
      • 从表单页跳转到确认页。
      • 从主页跳转到设置页。

其他跳转方式的使用频率

  1. wx.redirectTo

    • 使用频率较低,通常用于不需要返回当前页面的场景,例如登录后跳转到主页。
  2. wx.switchTab

    • 用于跳转到 tabBar 页面,使用频率中等。
  3. wx.reLaunch

    • 使用频率较低,通常用于重置应用状态,例如退出登录后跳转到登录页。
  4. wx.navigateBack

    • 使用频率较高,通常用于返回上一页或多层页面。
  5. wx.navigateToMiniProgram

    • 使用频率较低,通常用于跳转到其他小程序。

总结

  • wx.navigateTo 是最常用的跳转方式,因为它符合用户习惯、灵活性高且开发便捷。
  • 其他跳转方式(如 wx.switchTabwx.redirectTo 等)则根据具体场景选择使用。

在这里插入图片描述

http://www.lryc.cn/news/527269.html

相关文章:

  • 【Elasticsearch】index:false
  • 新版IDEA创建数据库表
  • 输入带空格的字符串,求单词个数
  • C语言程序设计十大排序—希尔排序
  • Excel制作合同到期自动提醒!
  • “AI质量评估系统:智能守护,让品质无忧
  • 爬虫基础之爬取某基金网站+数据分析
  • 使用 Aryn DocPrep、DocParse 和 Elasticsearch 向量数据库实现高质量 RAG
  • Couchbase UI: Server
  • Web3.0时代的挑战与机遇:以开源2+1链动模式AI智能名片S2B2C商城小程序为例的深度探讨
  • langchain基础(一)
  • 【Android】布局文件layout.xml文件使用控件属性android:layout_weight使布局较为美观,以RadioButton为例
  • RabbitMQ 架构分析
  • Qt Enter和HoverEnter事件
  • 大语言模型之prompt工程
  • WPF基础 | WPF 常用控件实战:Button、TextBox 等的基础应用
  • [笔记] 极狐GitLab实例 : 手动备份步骤总结
  • 随笔十七、eth0单网卡绑定双ip的问题
  • 逻辑复制parallel并发参数测试
  • Cursor 帮你写一个小程序
  • WordPress免费证书插件
  • Linux:多线程[2] 线程控制
  • C++——list的了解和使用
  • Agent群舞,在亚马逊云科技搭建数字营销多代理(Multi-Agent)(下篇)
  • DBeaver连接MySQL数据库
  • Leetcode40: 组合总和 II
  • win32汇编环境,对话框程序中使用进度条控件
  • AIGC时代下的Vue组件开发深度探索
  • 在Kubernets Cluster中部署LVM类型的StorageClass - 上
  • 一次StarRocks分析的经历