uni-app 真机调试时 eventChannel 报错

uni-app 真机调试时 eventChannel 报错

操作步骤：

  • index页面跳转
uni.navigateTo({  
    url: '/pages/modal/modal',  
    animationType: 'fade-in',  
    success: function(res) {  
        res.eventChannel.emit('ShowModalMessage', data);  
    }  
});
  • modal页面接收
onLoad(options) {  
    let that = this;  
    const eventChannel = this.$scope.eventChannel; // 兼容APP-NVUE  
    // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据  

    eventChannel.on('ShowModalMessage', function (data) {  
          that.modalData = data;  
    });  
}

预期结果：

  • 希望能正常使用

实际结果：

  • TypeError: Cannot read properties of undefined (reading ‘on’)

bug描述：

  • nvue页面取上一页面通过eventChannel传送到当前页面的数据报错

图片

Image

环境信息

信息类别 内容
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 10
HBuilderX类型 正式
HBuilderX版本号 3.3.2
手机系统 Android
手机系统版本号 Android 8.1
手机厂商 vivo
手机机型 vivo
页面类型 nvue
vue版本 vue3
打包方式 云端
项目创建方式 HBuilderX

更多关于uni-app 真机调试时 eventChannel 报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

问题复现，相关组排查下，已加分，感谢您的反馈！

更多关于uni-app 真机调试时 eventChannel 报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 的 nvue 页面中，this.$scope.eventChannel 的写法在 Vue 3 环境下可能无法正确获取到 eventChannel 对象，导致 undefined 错误。你可以尝试以下两种解决方案：

方案一：使用 getOpenerEventChannel 方法（推荐） 在 nvue 页面的 onLoad 生命周期中，通过 uni.getOpenerEventChannel() 获取 eventChannel 对象：

onLoad(options) {
    const eventChannel = uni.getOpenerEventChannel();
    eventChannel.on('ShowModalMessage', (data) => {
        this.modalData = data;
    });
}

方案二：通过页面参数传递 eventChannel 在跳转时通过 events 参数定义事件监听器：

// 跳转页面
uni.navigateTo({
    url: '/pages/modal/modal',
    events: {
        ShowModalMessage: (data) => {
            // 这里可以直接处理数据
        }
    },
    success: function(res) {
        res.eventChannel.emit('ShowModalMessage', data);
    }
});
回到顶部