uni-app onUnload内的回调函数不执行

示例代码：

// App.vue  
<script>  
    export default {  
        onLaunch: function() {  
            uni.redirectTo({ url: '/pages/index/index' })  
            console.log('App Launch')  
        },  
        onShow: function() {  
            console.log('App Show')  
        },  
        onHide: function() {  
            console.log('App Hide')  
        }  
    }  
</script>  

<style>  
    /*每个页面公共css */  
</style>

// launch.vue  
<template>  
  <view>启动页 </view>  
</template>  

<script setup lang="ts">  
import { onLoad, onUnload } from '@dcloudio/uni-app'  
onLoad(() => {  
  console.log('launch onLoad')  
  uni.showLoading({  
    title: '加载中',  
    mask: true  
  })  
})  

onUnload(() => {  
  console.log('launch onUnload')  
  uni.hideLoading()  
})  
</script>  

<style scoped lang="scss"></style>

// index.vue  
<template>  
    <view>主页</view>  
</template>  

<script setup lang="ts"></script>  

<style lang="scss" scoped></style>

// pages.json  
{
    "path" : "pages/launch/launch",  
    "style" :   
    {  
        "navigationBarTitleText" : "",  
        "enablePullDownRefresh" : false  
    }  
},  
{  
    "path": "pages/index/index",  
    "style": {  
        "navigationBarTitleText": "uni-app"  
    }  
}


## 操作步骤：

使用HbuilderX创建新的vue3项目，再在pages文件夹下创建launch.vue页面，进入launch页面在onLoad函数中加入 

```ts
uni.showLoading({
    title: '加载中',
    mask: true
})

在onUnload函数中加入

uni.hideLoading()

预期结果：

launch页面的loading弹窗关闭

实际结果：

launch页面的loading弹窗未关闭，并且launch页面的onUnload生命周期的回调函数没有执行

bug描述：

pages.json中的pages参数设置A页面为启动页，在App.vue的onLaunch使用redirectTo跳转到B页面时，A页面的onUnload不会触发

htzhanglong 1楼•4 天前

用的你的代码测试的没问题，

<template> <view [@click](/user/click)="test">启动页 </view> </template> <script setup lang="ts"> import { onLoad, onUnload } from '[@dcloudio](/user/dcloudio)/uni-app' onLoad(() => { console.log('launch onLoad') }) onUnload(() => { console.log('launch onUnload') uni.hideLoading() }) function test(){ uni.redirectTo({ url:'/pages/index/index' }) } </script> <style scoped lang="scss"></style>

不过在page.json中增加了tabbar

“tabBar”: {
“color”: “#D7D7D7”,
“selectedColor”: “#D0DAFB”,
“borderStyle”: “none”,
“backgroundColor”: “”,
{
“pagePath”: “pages/index/index”,
“iconPath”: “static/logo.png”,
“selectedIconPath”: “static/logo.png”,
“text”: “首页”
}
}

eggper 2楼•4 天前

步骤错了页面跳转在onLaunch里面执行，不是手动触发然后运行起来你看一下是不是loading弹窗一直都在

phonegap100 3楼•4 天前作者

回复 1***@qq.com: 额…你先研究下App.vue和界面生命周期的顺序吧，，按照你说的，在app.vue中的onLaunch去跳转B界面，那A界面都没加载呢，怎么执行A的onUnload？

yibo5220 4楼•4 天前

在 uni-app 中，onUnload 是页面生命周期钩子之一，用于在页面卸载时执行一些操作。如果你发现 onUnload 内的回调函数不执行，可能是由于以下几个原因：

1. 页面未正确卸载

onUnload 只有在页面被卸载时才会触发。如果页面没有被正确卸载（例如，页面仍然保持在导航堆栈中），onUnload 不会执行。
确保你使用了正确的导航方法（如 uni.navigateBack 或 uni.redirectTo）来关闭页面。

2. 页面缓存

如果页面被缓存（例如使用了 uni-app 的页面缓存机制），页面可能不会被真正卸载，从而导致 onUnload 不执行。
你可以通过 pages.json 中的 "enablePullDownRefresh": false 或 "disableScroll": true 等配置来控制页面缓存行为。

3. 异步操作

如果 onUnload 内有异步操作（如 setTimeout 或 Promise），这些操作可能不会在页面卸载前完成。
确保在 onUnload 内执行同步操作，或者使用 Promise 等方式确保异步操作完成。

4. 组件生命周期

如果 onUnload 是在组件中定义的，确保组件确实被卸载了。如果组件被复用或缓存，onUnload 可能不会触发。

5. 调试问题

在某些情况下，调试工具可能会导致生命周期钩子行为异常。尝试在不使用调试工具的情况下运行应用，看看问题是否仍然存在。

6. uni-app 版本问题

如果你使用的是较旧的 uni-app 版本，可能存在一些已知的 Bug。尝试升级到最新版本，看看问题是否得到解决。

示例代码

export default {
  onUnload() {
    console.log('页面卸载'); // 确保这行代码被执行
    // 执行其他清理操作
  }
}