一、小程序跳转方式
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将无法打开新页面
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方式的使用
使用条件
使用效果
- 保留当前页面,打开一个页面
- 路由栈层级增加一级
- 谨慎使用
使用页面
- 首页推荐产品、搜索结果页,点击商品图片,进入“该商品详情页”
- 首页分类模块,点击“分类图标”,进入“搜索-结果页”
- 首页搜索模块,点击“搜索栏”,进入“搜索页”
- 商品详情页面,点击“管理——编辑”,进入“发布页面-编辑态”
- 搜索页面-模糊搜索结果,点击“商品标题”,进入“该商品详情页”
- 个人中心,进入“修改个人信息页面”、“反馈页面”、“进入联系方式页面”、“发布/收藏产品列表页面”
- 个人中心-我的发布、我的收藏页面,点击商品图片,进入“该商品详情页”
- 个人中心-联系方式页面,点击“新增按钮”,进入“新增页面”
三、注意事项
- 尽量保证每个跳转循环完成后,路由层级不会增加,最好只有一个路由层级
- 注意出现页面跳转循环的路径
四、分包