1***@qq.com
1***@qq.com
  • 发布:2024-02-22 11:31
  • 更新:2024-02-22 11:59
  • 阅读:91

【报Bug】onUnload内的回调函数不执行

分类:uni-app

产品分类: uniapp/H5

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: windows11

HBuilderX类型: 正式

HBuilderX版本号: 3.99

浏览器平台: Chrome

浏览器版本: 不关浏览器原因

项目创建方式: HBuilderX

示例代码:
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": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages  
        {  
            "path" : "pages/launch/launch",  
            "style" :   
            {  
                "navigationBarTitleText" : "",  
                "enablePullDownRefresh" : false  
            }  
        },  
        {  
            "path": "pages/index/index",  
            "style": {  
                "navigationBarTitleText": "uni-app"  
            }  
        }  

    ]

操作步骤:

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

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不会触发

2024-02-22 11:31 负责人:无 分享
已邀请:
套马杆的套子

套马杆的套子 - 没有解决不了的问题,只有解决不完的问题

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


<template>    
  <view @click="test">启动页 </view>    
</template>    

<script setup lang="ts">    
import { onLoad, onUnload } from '@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": "首页"  
        }  
    }  
  • 1***@qq.com (作者)

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

    2024-02-22 13:29

  • 套马杆的套子

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

    2024-02-22 13:48

要回复问题请先登录注册