uniapp内监听原生发送的数据 onNativeEventReceive 无法注销或者移除

uniapp内监听原生发送的数据 onNativeEventReceive 无法注销或者移除

操作步骤：

  • 在不同页面添加 “onNativeEventReceive”，第一次注册监听的页面，退出之后进入第二个页面，第二个页面触发不了onNativeEventReceive监听事件

预期结果：

  • 希望第二个页面能正常触发onNativeEventReceive

实际结果：

  • 第二个页面无法触发onNativeEventReceive

bug描述：

  • 页面的onload方法中添加onNativeEventReceive后，当前页面退出后还是会影响其他页面onNativeEventReceive接收数据

| 信息类别       | 内容           |
|----------------|----------------|
| 产品分类       | uniapp/App     |
| PC开发环境操作系统 | Mac            |
| PC开发环境操作系统版本号 | 15.5 (24F74)   |
| HBuilderX类型 | 正式           |
| HBuilderX版本号 | 4.75           |
| 手机系统       | iOS            |
| 手机系统版本号 | iOS 18         |
| 手机厂商       | 苹果           |
| 手机机型       | iphone13       |
| 页面类型       | vue            |
| vue版本        | vue3           |
| 打包方式       | 离线           |
| 项目创建方式   | HBuilderX      |

2 回复

不必这样做。参考这个吧 https://ask.dcloud.net.cn/question/166935


在 uni-app 中，onNativeEventReceive 是全局事件监听器，注册后不会随页面销毁自动移除。第一个页面注册的监听器会持续占用事件通道，导致后续页面无法正常接收事件。

解决方案：

  1. 在页面卸载时手动移除监听器
onLoad() {
  // 注册监听
  uni.onNativeEventReceive(this.handleNativeEvent)
},
onUnload() {
  // 页面卸载时移除监听
  uni.offNativeEventReceive(this.handleNativeEvent)
},
methods: {
  handleNativeEvent(data) {
    // 处理原生事件
  }
}
  1. 使用唯一标识符区分不同页面的监听器
// 页面A
onLoad() {
  uni.onNativeEventReceive(this.handleNativeEvent, 'pageA')
}

// 页面B  
onLoad() {
  uni.onNativeEventReceive(this.handleNativeEvent, 'pageB')
}
  1. 在App.vue中统一管理全局事件
// App.vue
export default {
  onLaunch() {
    uni.onNativeEventReceive(this.globalEventHandler)
  },
  methods: {
    globalEventHandler(data) {
      // 通过Vuex或EventBus分发到具体页面
    }
  }
}
回到顶部