👨💻 作者简介：程序员半夏 , 一名全栈程序员，擅长使用各种编程语言和框架，如JavaScript、React、Node.js、Java、Python、Django、MySQL等.专注于大前端与后端的硬核干货分享,同时是一个随缘更新的UP主. 你可以在各个平台找到我!
🏆 本文收录于专栏: uniapp踩坑指南
🔥 专栏介绍: 本专栏提供了uni-app开发过程中必不可少的组件和解决方案。本书详细介绍了各种常用组件的使用方法和技巧，以及如何应对uniapp开发中遇到的各种问题。
场景
假设我们有A和B两个页面，A页面是一个列表，B页面是从A页面点击某个列表项进入的，当我们在B页面操作完之后，需要返回A页面，此时需要刷新A页面的数据。
方法1：getCurrentPages
介绍
在uni-app中，getCurrentPages()方法用于获取当前页面栈的实例数组。页面栈是指打开的页面的层级关系，当前页面在数组中的索引为pages.length - 1，上一页在数组中的索引为pages.length - 2，以此类推。
getCurrentPages()方法返回的是一个页面栈数组，数组中的每个元素都是一个页面实例，包含了页面的数据和方法。通过获取页面栈数组，我们可以根据索引获取到上一页的实例，然后可以调用上一页的方法或访问上一页的数据。
具体流程如下：
- 调用
getCurrentPages()方法获取当前页面栈的实例数组：
var pages = getCurrentPages();
- 使用
pages.length - 2获取上一页的索引，然后通过pages[beforePage]获取上一页的实例：
var beforePage = pages[pages.length - 2];
- 通过上一页的实例，可以访问上一页的数据和方法，例如：
beforePage.data // 可以访问上一页的数据
beforePage.method() // 可以调用上一页的方法
通过以上步骤，我们可以获取到上一页的实例，并进行相应的操作。这样就可以实现在当前页返回上一页并刷新数据的功能。
代码演示
- 在A页面的methods中，编写获取数据的逻辑。
<script>
export default {
data() {
return {
dataList: [] // A页面的数据列表
}
},
methods: {
getData() {
// 发送请求获取数据，并更新dataList
}
}
}
</script>
- 在A页面的列表项上添加点击事件，跳转到B页面，并传递需要的参数。
<template>
<view>
<!-- A页面的列表 -->
<view v-for="(item, index) in dataList" :key="index" @click="goToB(item)">
<!-- 列表项的内容 -->
</view>
</view>
</template>
<script>
export default {
methods: {
goToB(item) {
uni.navigateTo({
url: '/pages/BPage?id=' + item.id // 跳转到B页面，并传递参数
})
}
}
}
</script>
- 在B页面中，完成相应的操作后，通过uni.navigateBack方法返回A页面。
<script>
export default {
methods: {
goBack() {
var pages = getCurrentPages();
var beforePage = pages[pages.length - 2];
uni.navigateBack({
success: function() {
beforePage.getData();
}
});
}
}
}
</script>
这样，当点击返回按钮时，会返回上一页并调用上一页的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。
代码演示
- 在A页面的onShow生命周期函数中，编写获取数据的逻辑。这样每次返回A页面时都会重新获取最新的数据。
<script>
export default {
data() {
return {
dataList: [] // A页面的数据列表
}
},
onShow() {
// 获取数据的逻辑，例如发送请求获取最新数据
this.getData()
},
methods: {
getData() {
// 发送请求获取数据，并更新dataList
}
}
}
</script>
- 在A页面的列表项上添加点击事件，跳转到B页面，并传递需要的参数。
<template>
<view>
<!-- A页面的列表 -->
<view v-for="(item, index) in dataList" :key="index" @click="goToB(item)">
<!-- 列表项的内容 -->
</view>
</view>
</template>
<script>
export default {
methods: {
goToB(item) {
uni.navigateTo({
url: '/pages/BPage?id=' + item.id // 跳转到B页面，并传递参数
})
}
}
}
</script>
- 在B页面中，完成相应的操作后，通过uni.navigateBack方法返回A页面。
<script>
export default {
methods: {
goBack() {
// 完成操作后返回A页面
uni.navigateBack({
delta: 1 // 返回的页面数，如果是返回上一级页面，delta为1
})
}
}
}
</script>
- 在A页面的onShow生命周期函数中，重新获取数据，以刷新A页面的数据。
通过以上步骤，当从B页面返回A页面时，A页面的onShow生命周期函数会被触发，重新获取数据并刷新页面。这样就实现了从B页面返回A页面并刷新A页面数据的功能。
缺点
虽然onShow生命周期函数在实现从B页面返回A页面并刷新数据的功能时非常方便，但也存在一些缺点：
-
不适用于首次加载：onShow生命周期函数在页面每次显示时都会触发，包括首次加载和从其他页面返回。如果A页面是首次加载时需要获取数据，onShow生命周期函数会在每次返回A页面时都触发获取数据的逻辑，导致数据重复获取和页面重复刷新。
-
无法传递参数：onShow生命周期函数没有参数传递的机制，无法在返回A页面时传递参数给onShow函数，因此无法根据传递的参数来决定是否需要刷新数据，或者刷新哪些数据。
-
页面切换时性能开销：在返回A页面时，onShow生命周期函数会被触发，这可能会导致页面在切换时出现短暂的卡顿或延迟，特别是当A页面的数据量较大或需要进行复杂的数据处理时。
-
无法精确控制刷新时机：onShow生命周期函数的触发时机是在页面显示时，无法精确控制刷新数据的时机。如果需要在B页面完成某个操作后立即刷新A页面的数据，使用onShow生命周期函数无法满足需求。文章来源：https://www.toymoban.com/news/detail-753514.html
综上所述，虽然onShow生命周期函数在一些简单的场景下可以方便地实现从B页面返回A页面并刷新数据，但在复杂的场景下可能存在一些缺点和不足。在实际开发中，可以根据具体需求选择合适的数据刷新方案，例如使用事件总线、vuex等来进行数据传递和管理，或者使用自定义的生命周期函数来实现更精确的控制。文章来源地址https://www.toymoban.com/news/detail-753514.html
到了这里，关于uni-app -移动端H5小程序 关闭当前页，返回上一页并调用上一页的方法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
