uni-app 红米手机进入扫码页面按Home键导致扫码功能无法正常使用

uni-app 红米手机进入扫码页面按Home键导致扫码功能无法正常使用

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

示例代码：

uni.scanCode({  
    success: (res) => {  
        if(res.scanType=='QR_CODE') {  

        }else {  
             uni.showToast({  
                title: '识别失败，请重新扫码！',  
               icon: 'none',  
               duration: 2500  
            })  
           }  
       }  
    })

操作步骤：

  • 打开扫码的一瞬间，按home键进入后台，再次打开APP时扫码页面为一片黑色，无法扫码，重启应用后恢复正常

预期结果：

  • 可以正常使用扫码功能

实际结果：

  • 页面黑屏，无法正常使用。返回后再次进入此页面还是黑屏

bug描述：

  • 打开扫码的一瞬间，按home键进入后台，再次打开APP时扫码页面为一片黑色，无法扫码，重启应用后恢复正常。复现难度：中，需要多试几次

更多关于uni-app 红米手机进入扫码页面按Home键导致扫码功能无法正常使用的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 红米手机进入扫码页面按Home键导致扫码功能无法正常使用的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个典型的应用生命周期管理问题。当APP进入后台时，摄像头资源被系统回收，但返回前台时未正确重新初始化扫码功能。

解决方案：

  1. 在页面生命周期中监听应用状态变化：
onShow() {
    this.initScanCode()
},
onHide() {
    // 可选的清理操作
},
methods: {
    initScanCode() {
        uni.scanCode({
            success: (res) => {
                if(res.scanType == 'QR_CODE') {
                    // 处理扫码结果
                } else {
                    uni.showToast({
                        title: '识别失败，请重新扫码！',
                        icon: 'none',
                        duration: 2500
                    })
                }
            }
        })
    }
}
  1. 或者使用全局应用状态监听：
// App.vue
onShow: function() {
    // APP从后台进入前台时触发
    if(需要重新初始化扫码页面) {
        // 通知页面重新初始化扫码
    }
}
回到顶部