uni-app使用情况下，跳转出现locked，并且APP就卡住不能动了。

发布于 1周前 作者 eggper 来自 Uni-App

uni-app使用情况下，跳转出现locked，并且APP就卡住不能动了。

开发环境 版本号 项目创建方式
Windows 11 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

HBuilderX类型：Alpha

HBuilderX版本号：4.32

手机系统：Android

手机系统版本号：Android 7.1.1

手机机型：工控机

页面类型：vue

vue版本：vue2

打包方式：云端

项目创建方式：HBuilderX

示例代码：

<template>  
    <view class="countdown_home">  
        <view class="countdown_time">  
            <text class="txt">{{countdown}}</text>  
        </view>  
        <view class="back" @click="home">  
            <text class="back_text">返回首页</text>  
        </view>  
    </view>  
</template>  

<script>  
    export default {  
        name: "countdown",  
        data() {  
            return {  
                countdown: 60,  
                interval: null,  
                showHome: false,  
            };  
        },  
        created() {  
            // 开始倒计时  
            this.interval = setInterval(() => {  
                this.countdown--  
                if (this.countdown <= 0) {  
                    setTimeout(() => {  
                        uni.navigateTo({  
                            url: '/pages/index/index'  
                        })  
                    }, 300)  
                }  
            }, 1000)  
        },  
        onHide() {  
            if (this.interval != null) {  
                clearInterval(this.interval as number)  
            }  
        },  
        onUnload() {  
            if (this.interval != null) {  
                clearInterval(this.interval as number)  
            }  
            // console.log('组件卸载了');  
        },  
        methods: {  
            home() {  
                if (this.interval != null) {  
                    clearInterval(this.interval as Number)  
                }  
                console.log('这里看看')  
                uni.navigateTo({  
                    url: '/pages/index/index',  
                    success( res ){  
                        console.log('成功')  
                        console.log(res)  
                    },  
                    fail( err ){  
                        console.log(err)  
                    }  
                })  
            }  
        }  
    }  
</script>  

<style lang="scss">  
    .countdown_home {  
        height: 100px;  
    }  

    .countdown_time {  
        position: absolute;  
        z-index: 999;  
        top: 40px;  
        height: 30px;  
        right: 40px;  
        border: 2px solid rgb(86, 151, 238);  
        border-radius: 30px;  
        width: 60px;  
    }  

    .countdown_time .txt {  
        color: rgb(74, 74, 74);  
        font-family: SJxiaozhuanti;  
        font-size: 20px;  
        line-height: 25px;  
        text-align: center;  
    }  

    .back {  
        position: fixed;  
        z-index: 999;  
        left: 50px;  
        top: 40px;  
        width: 80px;  
        height: 30px;  
        border-radius: 50px;  
        background-color: rgb(255, 158, 13);  
    }  

    .back_text {  
        font-size: 14px;  
        text-align: center;  
        line-height: 30px;  
        color: #fff;  
    }  
</style>

操作步骤：

偶然出现，具体怎么复现我也不知道，偶然出现，但是很致命

预期结果：

能解锁或者其他的方式能够跳转，

实际结果：

卡死不动。

bug描述：

偶然出现，

{
"errMsg": "reLaunch:fail /pages/index/index locked"
}

Harmonyos Next教程
5 回复

出现lock是因为本地路由跳转未结束的时候，又进行了相同的路由跳转 如果是想要在倒计时结束时进行路由跳转，建议使用 vue watch API, 而不是 setInterval


有没有示例可以参考一下，有点没明白你的意思

这样更简单点，根本原因是你的定时器清理的太晚了

回复 DCloud_UNI_WZF: 应该不是定时器的问题，当我把定时器注释掉，当我反复点击页面的时候，还是会出现锁定。

在uni-app开发中遇到跳转页面时出现“locked”状态并且APP卡住的问题，通常是由于页面跳转逻辑中存在死锁或者无限循环跳转导致的。这种情况常见于页面间的导航守卫（如onNavigateBack、beforeRouteLeave等）处理不当，或者跳转逻辑本身存在缺陷。以下是一个可能的代码案例分析和解决方案，用于说明如何排查和修复这类问题。

问题分析

假设在uni-app中有两个页面：PageA和PageB。从PageA跳转到PageB，然后尝试返回PageA时出现问题。

PageA.vue

<template>
  <view>
    <button @click="navigateToPageB">Go to PageB</button>
  </view>
</template>

<script>
export default {
  methods: {
    navigateToPageB() {
      uni.navigateTo({
        url: '/pages/PageB/PageB'
      });
    }
  }
}
</script>

PageB.vue

<template>
  <view>
    <button @click="backToPageA">Back to PageA</button>
  </view>
</template>

<script>
export default {
  methods: {
    backToPageA() {
      uni.navigateBack();
    },
    onUnload() {
      // 假设这里有逻辑错误导致死循环或长时间阻塞
      // 例如：不断发起网络请求或进行复杂的计算
      // 这只是一个假设示例，实际情况可能更复杂
      this.somePotentiallyBlockingFunction();
    }
  },
  somePotentiallyBlockingFunction() {
    // 模拟长时间运行的任务
    while (true) {
      // 这里应该使用异步处理或避免死循环
    }
  }
}
</script>

解决方案

  1. 检查并优化onUnload或相关生命周期钩子：确保这些钩子中没有死循环或长时间运行的任务。如果需要执行耗时操作，应考虑使用异步方法或setTimeout来避免阻塞主线程。

  2. 审查导航守卫：如果使用了页面间的导航守卫，检查是否有逻辑错误导致无法正确返回或进入页面。

  3. 使用正确的跳转方式：确保跳转逻辑正确，避免不必要的重复跳转或错误跳转。

  4. 日志记录：在关键位置添加日志记录，帮助定位问题发生的具体位置。

通过上述步骤，通常可以定位并解决uni-app中页面跳转导致的“locked”和APP卡住问题。在实际开发中，良好的代码风格和充分的测试也是预防此类问题的重要手段。

回到顶部