小程序路由配置

2023-08-4

# 一、小程序跳转方式

# 1、wx.switchTab(Object object)

跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面

需要跳转的 tabBar 页面的路径 (代码包路径)(需在 app.json 的 tabBar 字段定义的页面),路径后不能带参数。

使用备注:由于 tabBar 在切换器需要获取收取及是否登录的判断,故当前小程序的 tabBar 是自定义组件,该跳转无效

只有该方法的 url 参数,不能进行拼接,必须跟 tabBar 配置的路由一模一样;wx.navigateBack 没有 url 参数

# 2、wx.reLaunch(Object object)

关闭所有页面,打开到应用内的某个页面

# 3、wx.redirectTo(Object object)

关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。

导航样式: 如果当前只有一个路由层级,导航 header 左侧会默认显示可以进入“首页”的图标

# 4、wx.navigateTo(Object object)

保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。

events 用于监听被打开页面发送到当前页面的数据。

导航样式:导航 header 左侧会默认显示“返回”的图标

# 5、wx.navigateBack(Object object)

关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈,决定需要返回几层。

通过参数 delta 设置返回的页面数,如果 delta 大于现有页面数,则返回到首页。默认值为 1

# 二、二货集小程序路由分析

# 1、目前所有 pages——总计 10 个

存在潜在路由层级超过 10 个风险

当路由层级达到 10 个时,wx.navigateTo 将无法打开新页面

'pages/index/index',
'pages/publish/index',
'pages/detail/index',
'pages/search/index',
'pages/profile/index',
'pages/profile/contact/index',
'pages/profile/contact/add/index',
'pages/profile/edit/index',
'pages/profile/feedback',
'pages/myProductList/index',

# 2、路由跳转方式使用现状

# 2.1、wx.redirectTo 的使用

使用条件

  • 不需要返回到当前页面时
  • 同时,其他页面仍需要返回显示时

使用效果

  • 关闭当前页面,同时打开一个新页面,即便新页面还在路由栈里
    • 在新页面不会返回到当前页面
  • 路由栈层级级数不变
    • 跟在当前页的路由栈层级比较起来,层级不变
    • 跟进入该页面之前比起来,路由栈层级增加 1
    • 如果反复进入该当前页面,则会导致路由层级不断增加
    • 需要谨慎使用

使用页面

  • 发布页面,在新建状态下,提交成功后,进入“该商品详情页”
    • 从发布页接入详情页,不需要再次返回进入发布页
    • 进入详情页后,依然需要保持之前的页面存在,进行正常返回

# 2.2、自定义 tabBar 跳转方式 wx.reLaunch

使用效果

  • 每次切换,都会关闭当前的所有页面,继而打开一个新页面
    • 如果使用 wx.navigateTo,通过 tabBar 的切换,很快就会超过 10 个路由栈层级
    • 如果使用 wx.redirectTo,存在路由栈超过 10 级的风险

tabBar 使用页面

  • 首页——'pages/index/index'
  • 发布——'pages/publish/index'
  • 个人中心——'pages/profile/index'

# 2.3、wx.reLaunch 方式的使用

使用效果

  • 关闭当前所有页面,打开一个新页面
  • 路由栈层级级数变成 1

使用页面

  • tabBar 组件
  • 搜索页面,点击“取消/返回”按钮,进回“首页”
    • 如果该页面使用 wx.navigateTo,则进入的“首页”header 部分会显示“返回”图标
    • 如果该页面使用 wx.redirectTo,反复执行“首页——搜索页——首页”这个操作路径,会导致层级达到 10 级
    • 该页面,也可以使用 wx.navigateBack。在不清楚之后会有什么样交互的前提下,wx.reLaunch 更加保险

# 2.4、wx.navigateBack 方式的使用

使用条件

  • 不需要返回到当前页面时
  • 返回层级数目明确的情况下使用

使用效果

  • 关闭当前页面,进入之前的页面
    • 在之前的页面点击返回按钮,不会再进入该页面
  • 路由栈层级减少一级
    • 跟在当前页的路由栈层级比较起来,减少一级
    • 跟进入该页面之前比起来,路由栈层级不变

使用页面

  • 发布页面,在编辑状态下,提交成功后,返回“该商品详情页”
  • 发布页面,在编辑状态下,如果获取初始信息失败,返回“该商品详情页”
  • 新增联系方式页面,提交成功后,返回“联系方式列表页面”

# 2.5、wx.navigateTo 方式的使用

使用条件

  • 需要返回到当前页面时,使用该方法

使用效果

  • 保留当前页面,打开一个页面
    • 可以在新页面返回到当前页面
  • 路由栈层级增加一级
  • 谨慎使用

使用页面

  • 首页推荐产品、搜索结果页,点击商品图片,进入“该商品详情页”
  • 首页分类模块,点击“分类图标”,进入“搜索-结果页”
  • 首页搜索模块,点击“搜索栏”,进入“搜索页”
  • 商品详情页面,点击“管理——编辑”,进入“发布页面-编辑态”
  • 搜索页面-模糊搜索结果,点击“商品标题”,进入“该商品详情页”
  • 个人中心,进入“修改个人信息页面”、“反馈页面”、“进入联系方式页面”、“发布/收藏产品列表页面”
  • 个人中心-我的发布、我的收藏页面,点击商品图片,进入“该商品详情页”
  • 个人中心-联系方式页面,点击“新增按钮”,进入“新增页面”

# 三、注意事项

  • 尽量保证每个跳转循环完成后,路由层级不会增加,最好只有一个路由层级
  • 注意出现页面跳转循环的路径

# 四、分包

  • app:首页 商品详情页
  • 搜索
  • 发布
  • 个人中心
支付宝打赏
支付宝打赏
微信打赏
微信打赏