uni-app -移动端H5小程序 关闭当前页，返回上一页并调用上一页的方法

👨‍💻 作者简介：程序员半夏 , 一名全栈程序员，擅长使用各种编程语言和框架，如JavaScript、React、Node.js、Java、Python、Django、MySQL等.专注于大前端与后端的硬核干货分享,同时是一个随缘更新的UP主. 你可以在各个平台找到我!

🏆 本文收录于专栏: uniapp踩坑指南

🔥 专栏介绍: 本专栏提供了uni-app开发过程中必不可少的组件和解决方案。本书详细介绍了各种常用组件的使用方法和技巧，以及如何应对uniapp开发中遇到的各种问题。

文章目录

• 场景
• 方法1：getCurrentPages
• • 介绍
  • 代码演示
  • 报错not a function？请注意！！！
  • 注意2：Android端执行之后报Cannot read property '$vm' of undefined
  • 方法2 ：onshow
  • • 介绍
    • 代码演示
    • 缺点

      场景

      假设我们有A和B两个页面，A页面是一个列表，B页面是从A页面点击某个列表项进入的，当我们在B页面操作完之后，需要返回A页面，此时需要刷新A页面的数据。

      方法1：getCurrentPages

      介绍

      在uni-app中，getCurrentPages()方法用于获取当前页面栈的实例数组。页面栈是指打开的页面的层级关系，当前页面在数组中的索引为pages.length - 1，上一页在数组中的索引为pages.length - 2，以此类推。

      getCurrentPages()方法返回的是一个页面栈数组，数组中的每个元素都是一个页面实例，包含了页面的数据和方法。通过获取页面栈数组，我们可以根据索引获取到上一页的实例，然后可以调用上一页的方法或访问上一页的数据。

      具体流程如下：

      1. 调用getCurrentPages()方法获取当前页面栈的实例数组：

      var pages = getCurrentPages();
      

      1. 使用pages.length - 2获取上一页的索引，然后通过pages[beforePage]获取上一页的实例：

      var beforePage = pages[pages.length - 2];
      

      1. 通过上一页的实例，可以访问上一页的数据和方法，例如：

      beforePage.data // 可以访问上一页的数据
      beforePage.method() // 可以调用上一页的方法
      

      通过以上步骤，我们可以获取到上一页的实例，并进行相应的操作。这样就可以实现在当前页返回上一页并刷新数据的功能。

      代码演示

      1. 在A页面的methods中，编写获取数据的逻辑。

      export default {
        data() {
          return {
            dataList: [] // A页面的数据列表
          }
        },
        methods: {
          getData() {
            // 发送请求获取数据，并更新dataList
          }
        }
      }
      
      

      1. 在A页面的列表项上添加点击事件，跳转到B页面，并传递需要的参数。

        
          
          
            
          
        
      
      
      export default {
        methods: {
          goToB(item) {
            uni.navigateTo({
              url: '/pages/BPage?id=' + item.id // 跳转到B页面，并传递参数
            })
          }
        }
      }
      
      

      1. 在B页面中，完成相应的操作后，通过uni.navigateBack方法返回A页面。

      export default {
        methods: {
          goBack() {
            
              var pages = getCurrentPages();
              var beforePage = pages[pages.length - 2];
              
              uni.navigateBack({
                  success: function() {
                      beforePage.getData();
                  }
              });
               
               
          }
        }
      }
      
      

      这样，当点击返回按钮时，会返回上一页并调用上一页的getData函数来刷新数据。

      报错not a function？请注意！！！

      在uni-app中是适配多端的,beforePage.getData();只在h5中有效，在app端和微信小程序端都会报错 getData not a function；

      在APP端和微信小程序需要加上

      beforePage.$vm.
      

      修改后完整的代码如下

      var pages = getCurrentPages();
      var beforePage = pages[pages.length - 2];
      uni.navigateBack({
          success: function() {
              // #ifdef H5
              beforePage.getData()
              // #endif
              // #ifndef H5
              beforePage.$vm.getData()
              // #endif
          }
      });
               
      

      注意2：Android端执行之后报Cannot read property ‘$vm’ of undefined

      在完成代码编写后，保存并重新加载软件后，上一页已经不存在了。此时，只需要退出软件并重新进入即可解决问题。

      方法2 ：onshow

      介绍

      onshow属于uni-app的页面生命周期: 监听页面显示，页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面

      onshow是一个会重复触发的事件。a页面刚进入时，会触发a页面的onShow。从其他页面跳转或者返回a页面，会再次触发onShow。

      

      代码演示

      1. 在A页面的onShow生命周期函数中，编写获取数据的逻辑。这样每次返回A页面时都会重新获取最新的数据。

      export default {
        data() {
          return {
            dataList: [] // A页面的数据列表
          }
        },
        onShow() {
          // 获取数据的逻辑，例如发送请求获取最新数据
          this.getData()
        },
        methods: {
          getData() {
            // 发送请求获取数据，并更新dataList
          }
        }
      }
      
      

      1. 在A页面的列表项上添加点击事件，跳转到B页面，并传递需要的参数。

        
          
          
            
          
        
      
      
      export default {
        methods: {
          goToB(item) {
            uni.navigateTo({
              url: '/pages/BPage?id=' + item.id // 跳转到B页面，并传递参数
            })
          }
        }
      }
      
      

      1. 在B页面中，完成相应的操作后，通过uni.navigateBack方法返回A页面。

      export default {
        methods: {
          goBack() {
            // 完成操作后返回A页面
            uni.navigateBack({
              delta: 1 // 返回的页面数，如果是返回上一级页面，delta为1
            })
          }
        }
      }
      
      

      1. 在A页面的onShow生命周期函数中，重新获取数据，以刷新A页面的数据。

      通过以上步骤，当从B页面返回A页面时，A页面的onShow生命周期函数会被触发，重新获取数据并刷新页面。这样就实现了从B页面返回A页面并刷新A页面数据的功能。

      缺点

      虽然onShow生命周期函数在实现从B页面返回A页面并刷新数据的功能时非常方便，但也存在一些缺点：

      1. 不适用于首次加载：onShow生命周期函数在页面每次显示时都会触发，包括首次加载和从其他页面返回。如果A页面是首次加载时需要获取数据，onShow生命周期函数会在每次返回A页面时都触发获取数据的逻辑，导致数据重复获取和页面重复刷新。

      2. 无法传递参数：onShow生命周期函数没有参数传递的机制，无法在返回A页面时传递参数给onShow函数，因此无法根据传递的参数来决定是否需要刷新数据，或者刷新哪些数据。

      3. 页面切换时性能开销：在返回A页面时，onShow生命周期函数会被触发，这可能会导致页面在切换时出现短暂的卡顿或延迟，特别是当A页面的数据量较大或需要进行复杂的数据处理时。

      4. 无法精确控制刷新时机：onShow生命周期函数的触发时机是在页面显示时，无法精确控制刷新数据的时机。如果需要在B页面完成某个操作后立即刷新A页面的数据，使用onShow生命周期函数无法满足需求。

      综上所述，虽然onShow生命周期函数在一些简单的场景下可以方便地实现从B页面返回A页面并刷新数据，但在复杂的场景下可能存在一些缺点和不足。在实际开发中，可以根据具体需求选择合适的数据刷新方案，例如使用事件总线、vuex等来进行数据传递和管理，或者使用自定义的生命周期函数来实现更精确的控制。