微信小程序返回页以及页面路由的控制

今天药忘吃喽~ 2023-06-28 15:24 25阅读 0赞

其实小程序大家都会涉及到一个页面路由的问题，一个是正向的，页面A跳转到页面B，页面B跳转到页面C，还有一个就是反向操作，就是A，B，C页面正向跳转之后的返回，我们可不可以直接C返回到A页面呢？这就是这个问题所在，因为实际业务场景，我们不仅要正向跳转还要反向跳转。

举个例子，你做一个商城，下单后你希望用户天转到哪里，你可以在这个页面设置一下按钮，引导用户跳转到你想要他去的目标页。但是实际情况就是，用户说“我不，老子实体按键返回，或者我要点击上面导航栏的返回键，就是不点你的。”，于是 ABC三个页面，如果都是压栈的方式，就会出现A— B— C— B— A，奇怪路径，虽然说是原路返回，但是十分不符合业务，尤其是订单页返回又要到你要下单的页面，看起来就很有问题，产品使用逻辑上甚至会给人很大误导，留下十分不友好的印象。

其实怎么解决？其实有两种方式来解决，但实际只有一种算是勉强能用。介绍这两种方法时，先让我把官方文档糊在你脸上，毕竟没有什么比官方文档更权威的了。

[微信小程序页面路由][Link 1]

为防止页面失联，我再截个图，咱一步一步谈页面路由，然后引出返回页的处理

首先你要知道一个“页面栈的东西”，就是管理页面进入的先后次序的，我们计算机程序操作很多都会涉及到栈，比如方法的压栈出栈，让程序跑起来。页面栈管理所有页面，但是我们可以通过路由方式来调整页面是否入栈。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ZlaUNoYW5nV3VSYW8_size_16_color_FFFFFF_t_70]  
没入栈的页面，返回时栈里找不到他，返回时就会“跳过去”，这就是我们第一种方式navigateTo，他操作的就不会把页面放进页面栈里。

wx.redirectTo({ 
      url: 'test?id=1'
    })

还有一种就是我们常用的navigateBack，因为不是重定向那页面就会放在栈里面，但是你知道他大概位置，比如A—B---C的大致路径，你知道A和C中间就隔着一个B，你可以跳过他。这个delta是1就是上一个页面，以此类推，参看下面代码。

// 在C页面内 navigateBack，将返回A页面
    wx.navigateBack({ 
      delta: 2
    })

总结：  
那问题来了，我推荐哪个呢？我推荐重定向，因为不入栈，小程序控制不了实体返回键的操作，就是你能自定义上面导航栏的返回键跳转通过条件判断navigateBack或者干脆navigateTo，但是你不能监控实体键就很蛋疼。

重定向直接不把页面放进栈里，返回时直接忽略，就省了很多麻烦事，做到操作一致，但是如果中间夹杂了不少跳转逻辑，有的时候我要C返回A，有的时候C返回B，甚至干脆就是跳转到另外一个页面，你可能要写不少相关的逻辑，甚至可能回答不到预期的效果，毕竟数据结构不是人，你不能让他自己“见机行事”，所以我们中间的逻辑要搞好。

[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/route.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ZlaUNoYW5nV3VSYW8_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200109154446874.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ZlaUNoYW5nV3VSYW8=,size_16,color_FFFFFF,t_70