浅谈uniapp页面跳转的解决方案

作者:唯有灬努力 时间:2023-08-23 01:45:51 

正常的页面跳转的api大家应该都清楚,但是涉及到多页面来回跳转以及返回到导航页的时候就需要一些技巧来进行处理,之前找了挺多文章也没有很详细的介绍,本文就详细说说页面跳转的那些事。

1.uniapp常用跳转API

API作用
uni.navigateTo保留当前页面,跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面。
uni.redirectTo关闭当前页面,跳转到应用内的某个页面。
uni.reLaunch关闭所有页面,打开到应用内的某个页面。
uni.switchTab跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。
uni.navigateBack关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈,决定需要返回几层。

2.微信小程序页面跳转API

API作用
wx.navigateTo保留当前页面,跳转到应用内的某个页面。
wx.redirectTo关闭当前页面,跳转到应用内的某个页面。
wx.reLaunch关闭所有页面,打开到应用内的某个页面。
uni.switchTab跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。使用其他跳转 API 来跳转到 tabbar会跳转失败。
wx.navigateBack关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈,决定需要返回几层。

3.其他页面跳转回tabbar页面的方法

以这个小程序举例,在这个页面可以看到通过点击这些跳转后的页面返回时都得返回现在这个页面。

浅谈uniapp页面跳转的解决方案

以入库记录为例,进去后又有很多的跳转,比如点击某条记录跳转到了详情页,其中点击了编辑又跳转到了另一个编辑页面,编辑完成后肯定得跳转回这个页面,这时候问题来了,直接返回的话就不是跳转回我们想要的tabbar页面了,因为栈中还存在其他的页面,需要一层层的出栈。可能有人会说可以使用navigateBack,使用这个是可以跳回来,但是无法刷新页面,还得在onShow生命周期再发起一次请求。而且需要自己算跳几次也比较麻烦。这时候我们就可以使用这个生命周期onBackPress

浅谈uniapp页面跳转的解决方案

我们通过清空页面栈并且跳转回tabbar来达到我们想要的效果,这个最后的return true非常关键,如果不写就达不到跳转到我们想要的页面的效果。当然使用这个生命周期不是只能跳回到tabbar页面,这个生命周期是监听返回的事件,我们也可以跳转到其他的页面,只需要把switchTab换成redirectTo即可。

onBackPress() {
       uni.switchTab({
               url: '/pages/manage/manage'
       })
       return true
},

这个生命周期是有参数传进入来的,我们可以避免掉通过navigateBack跳过来的页面,否则容易出问题

onBackPress(options) {
   if (options.from === 'navigateBack') {
       return false    
   }
   uni.redirectTo({ url: '/page/index' })
   return true
},

然而这个生命周期只适用APP,H5和支付宝小程序,微信小程序是不支持这个api的,这时候我们就得专门对微信小程序做处理。onUnload生命周期是所有端都通用的,我们只需要在页面卸载时调用微信原生的跳转到tabbar的api即可实现我们的效果,这样就可以多端都保持一致。

onUnload() {
       //#ifdef MP-WEIXIN
       wx.switchTab ({
               url: '/pages/manage/manage'
       })
       //#endif
},

4.页面来回跳转保持数据的方法

一个页面跳转到另一个页面拿到数据后回到原先页面数据还需要维持原先的样子怎么来处理,这个时候就需要navigateBackgetCurrentPages结合起来了使用了。

举个例子,我希望在填写完入库日期备注后通过点击手动跳转到物资选择页面来去选择对应的物资进行入库,这时候如果通过常规的跳转的方式再次回到原先页面,那么之前填写的日期备注等数据就已经重置了,这并不是我们所期望的。

浅谈uniapp页面跳转的解决方案

浅谈uniapp页面跳转的解决方案

我们跳转到物资选择页面可以使用navigateTo

uni.navigateTo({
   url: item.url,
})

在物资选择页面通过获取页面栈实例的方式拿到上一个页面,当我们选择完毕后将数据保存到原先页面定义的data中去,最后通过navigateBack回到上一个页面,那么上一个页面之前填写的内容和现在选择完后的内容就都有了。

浅谈uniapp页面跳转的解决方案

// 获取当前页面栈的实例,以数组形式按栈的顺序给出,第一个元素为首页,最后一个元素为当前页面。
   const pages = getCurrentPages()
   const prevPage = pages[pages.length - 2] //上一个页面
   //#ifdef H5
   prevPage._data.selectData = this.selectMaterial
   //#endif
   //小程序中的修改方法
   // #ifndef H5
   prevPage.$vm._data.selectData = this.selectMaterial
   //#endif
   uni.navigateBack() //返回上一页面

本人也是刚接触uniapp不久,写的有问题的地方还望各位大佬指出,本文只是当自身的踩坑记录。如果对各位有帮助再好不过。

来源:https://juejin.cn/post/7094217394926649351

标签:uniapp,页面跳转
0
投稿

猜你喜欢

  • JS实现控制表格内指定单元格内容对齐的方法

    2024-04-17 09:42:28
  • 如何在2003系统注册fso组件

    2010-11-29 19:55:00
  • Python中如何引入第三方模块

    2023-08-27 08:34:48
  • python神经网络InceptionV3模型复现详解

    2021-05-29 16:53:01
  • 详解如何利用amoeba(变形虫)实现mysql数据库读写分离

    2024-01-18 12:03:05
  • VBScript运行出错信息涵义列表

    2007-08-12 18:03:00
  • 用OpenCV进行年龄和性别检测的实现示例

    2021-02-17 18:18:19
  • Pytest框架之fixture详解(三)

    2023-06-20 12:05:27
  • gchart:基于google图表API的jquery组件全攻略:1、入门

    2010-01-25 12:18:00
  • 快速掌握和使用Flyway的详细教程

    2023-03-05 15:24:24
  • 百分百成功的全网最简约sklearn环境配置教程

    2022-03-27 13:43:44
  • MYSQL锁表问题的解决方法

    2024-01-19 00:53:35
  • python实现备份目录的方法

    2022-10-30 02:54:04
  • PYcharm 激活方法(推荐)

    2022-07-27 01:51:21
  • Python3访问并下载网页内容的方法

    2022-11-12 06:08:39
  • 使用SQL Server判断文件是否存在后再删除(详解)

    2024-01-19 13:03:33
  • SQL Server使用T-SQL进阶之公用表表达式(CTE)

    2024-01-17 22:42:32
  • 详解tf.device()指定tensorflow运行的GPU或CPU设备实现

    2021-03-25 19:39:27
  • vue生成随机验证码的示例代码

    2023-07-02 16:57:09
  • pandas 实现将NaN转换为None

    2023-01-23 21:23:09
  • asp之家 网络编程 m.aspxhome.com