uni-app uni.onBeaconUpdate后无法解除扫描监听

uni-app uni.onBeaconUpdate后无法解除扫描监听

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

产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：win10

HBuilderX类型：正式

HBuilderX版本号：3.2.9

手机系统：Android

手机系统版本号：Android 10

手机厂商：小米

手机机型：M2004J7AC

页面类型：vue

vue版本：vue3

打包方式：云端

示例代码：

<script>
export default {
data() {
return {
count: 0
}
},
onLoad() {
console.log('onLoad')
this.startBeacon()
},
onUnload() {
console.log('onUnload')
uni.stopBeaconDiscovery()
},
methods: {
startBeacon() {
let that = this
uni.startBeaconDiscovery({
success: function(res) {
that.count = 0
uni.onBeaconUpdate(function(res) {
that.count++
console.log('第' + that.count + '次扫描')
if(that.count>5){
uni.stopBeaconDiscovery()
}
})
}
})
}
}
}
</script>

操作步骤：

  • 步骤一:进入A页面,执行uni.startBeaconDiscovery后执行uni.onBeaconUpdate创建Beacon扫描监听
  • 步骤二:执行uni.stopBeaconDiscovery后退出当前页面
  • 步骤三:再次进入A页面,执行uni.startBeaconDiscovery,之前创建的beacon扫描监听会继续执行

预期结果：

  • 退出页面时,当前页创建的beacon扫描监听销毁掉

实际结果：

  • 再次进入A页面,执行uni.startBeaconDiscovery,之前创建的beacon扫描监听会继续执行

bug描述：

执行uni.startBeaconDiscovery后执行uni.onBeaconUpdate创建Beacon扫描监听,再执行uni.stopBeaconDiscovery后停止监听,重新uni.startBeaconDiscovery后,之前创建的监听依然还在执行


更多关于uni-app uni.onBeaconUpdate后无法解除扫描监听的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app uni.onBeaconUpdate后无法解除扫描监听的实战教程也可以访问 https://www.itying.com/category-93-b0.html


根据你的代码和描述，这是一个典型的监听器未正确移除的问题。在uni-app中，uni.onBeaconUpdate 注册的监听器是全局的，不会随页面销毁自动移除。

问题分析：

  1. uni.onBeaconUpdate 注册的是全局监听，即使调用 uni.stopBeaconDiscovery() 停止扫描，监听器本身仍然存在。
  2. 当再次进入页面并调用 uni.startBeaconDiscovery() 时，之前注册的监听器会继续响应beacon更新事件。

解决方案： 需要在页面卸载时移除监听器。使用 uni.offBeaconUpdate() 方法：

onUnload() {
    console.log('onUnload')
    uni.stopBeaconDiscovery()
    uni.offBeaconUpdate() // 移除所有beacon更新监听
}

或者，如果你需要更精确的控制，可以保存监听函数引用：

export default {
    data() {
        return {
            count: 0,
            beaconUpdateCallback: null
        }
    },
    onLoad() {
        console.log('onLoad')
        this.startBeacon()
    },
    onUnload() {
        console.log('onUnload')
        uni.stopBeaconDiscovery()
        if (this.beaconUpdateCallback) {
            uni.offBeaconUpdate(this.beaconUpdateCallback)
        }
    },
    methods: {
        startBeacon() {
            let that = this
            uni.startBeaconDiscovery({
                success: function(res) {
                    that.count = 0
                    // 保存回调引用
                    that.beaconUpdateCallback = function(res) {
                        that.count++
                        console.log('第' + that.count + '次扫描')
                        if(that.count > 5) {
                            uni.stopBeaconDiscovery()
                        }
                    }
                    uni.onBeaconUpdate(that.beaconUpdateCallback)
                }
            })
        }
    }
}
回到顶部