uni-app 【报Bug】vue3 setup语法下eventChannel失效（支付宝小程序异常，微信正常）

uni-app 【报Bug】vue3 setup语法下eventChannel失效（支付宝小程序异常，微信正常）

表格：开发环境、版本号及项目创建方式

项目 信息
产品分类 uniapp/小程序/阿里
PC开发环境 Windows
操作系统版本 windows 11
HBuilderX 正式
版本号 4.04
第三方工具 3.8.4
基础库 2.9.19
项目创建方式 HBuilderX

示例代码：

<script setup>  
    import {  
        getCurrentInstance,  
    } from 'vue'  
    import { onLoad } from '@dcloudio/uni-app';  
    const { proxy } = getCurrentInstance();  
    const eventChannel = proxy.getOpenerEventChannel()  
    console.log(eventChannel)  
    onLoad(async () => {  
        eventChannel.on('emitData', data => {  
            console.log(data)  
        })  
    })  
</script>  

上面这种写法就没有打印data  
下面vue2就正常  

export default {  
        data(){  
            return{}  
        },  
        onLoad() {  
            const eventChannel = this.getOpenerEventChannel()  
            eventChannel.on('emitData', data => {  
                console.log(data )  
            })  
        }  
    }

操作步骤：

A页面添加跳转事件

linkTo(){  
    uni.navigateTo({  
        url: '/pages/component/view/view',   
        events:{  
            detailsEmitRefresh: async () => {  
                console.log('test')  
            }  
        },  
        success: res => {  
            console.log('emit', {a:1,b:2,c:3})  
            res.eventChannel.emit('emitData', {a:1,b:2,c:3})  
        }  
    })  
},

B页面

<script setup>  
    import {  
        getCurrentInstance,  
    } from 'vue'  
    import { onLoad } from '@dcloudio/uni-app';  
    const { proxy } = getCurrentInstance();  
    const eventChannel = proxy.getOpenerEventChannel()  
    console.log(eventChannel)  
    onLoad(async () => {  
        eventChannel.on('emitData', data => {  
            console.log(data)  
        })  
    })  
</script>  

上面这种写法就没有打印data  
下面vue2就正常  

export default {  
        data(){  
            return{}  
        },  
        onLoad() {  
            const eventChannel = this.getOpenerEventChannel()  
            eventChannel.on('emitData', data => {  
                console.log(data )  

            })  
        }  
    }

预期结果：

vue2与vue3应该都正常

实际结果：

setup语法下channel on事件并不触发


更多关于uni-app 【报Bug】vue3 setup语法下eventChannel失效（支付宝小程序异常，微信正常）的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

const eventChannel = proxy.getOpenerEventChannel()放到onLoad里试下

更多关于uni-app 【报Bug】vue3 setup语法下eventChannel失效（支付宝小程序异常，微信正常）的实战教程也可以访问 https://www.itying.com/category-93-b0.html


解决了

在使用 uni-app 开发跨平台小程序时，可能会遇到 eventChannel 在 Vue3 setup 语法下失效的问题，尤其是在支付宝小程序中表现异常，而在微信小程序中正常。这个问题通常与 eventChannel 的初始化和使用方式有关。

问题分析

  1. eventChannel 的作用： eventChannel 是 uni-app 提供的一种跨页面通信机制，允许页面之间传递数据和事件。通常在页面跳转时通过 uni.navigateTo 等 API 传递 eventChannel。

  2. Vue3 setup 语法： 在 Vue3 的 setup 语法中，this 不再指向组件实例，因此传统的 this.$emit 和 this.$on 等方式无法直接使用。eventChannel 的初始化和事件监听需要特别注意。

  3. 平台差异： 支付宝小程序和微信小程序在底层实现上存在差异，可能会导致某些 API 在不同平台上的表现不一致。

解决方案

1. 确保 eventChannel 正确初始化

在 uni.navigateTo 等跳转 API 中，确保正确传递 eventChannel 参数。

uni.navigateTo({
  url: '/pages/targetPage',
  events: {
    // 定义事件监听
    someEvent: (data) => {
      console.log('Received someEvent:', data);
    }
  },
  success: (res) => {
    // 通过 eventChannel 发送数据
    res.eventChannel.emit('someEvent', { message: 'Hello from source page' });
  }
});

2. 在目标页面中监听 eventChannel

在目标页面的 setup 函数中，通过 onLoad 钩子获取 eventChannel 并监听事件。

import { onLoad } from '[@dcloudio](/user/dcloudio)/uni-app';
import { ref } from 'vue';

export default {
  setup() {
    const message = ref('');

    onLoad((options) => {
      const eventChannel = this.getOpenerEventChannel();
      eventChannel.on('someEvent', (data) => {
        message.value = data.message;
      });
    });

    return {
      message
    };
  }
};

3. 处理支付宝小程序的差异

如果问题仅在支付宝小程序中出现，可以尝试以下方法：

  • 检查支付宝小程序的兼容性：确保使用的 uni-app 版本支持支付宝小程序的 eventChannel 功能。
  • 使用 uni.$on 和 uni.$emit 作为替代方案：如果 eventChannel 在支付宝小程序中确实存在问题，可以考虑使用全局事件总线 uni.$on 和 uni.$emit 进行跨页面通信。
// 源页面
uni.navigateTo({
  url: '/pages/targetPage',
  success: () => {
    uni.$emit('someEvent', { message: 'Hello from source page' });
  }
});

// 目标页面
import { onMounted, onUnmounted } from 'vue';

export default {
  setup() {
    const message = ref('');

    const handleEvent = (data) => {
      message.value = data.message;
    };

    onMounted(() => {
      uni.$on('someEvent', handleEvent);
    });

    onUnmounted(() => {
      uni.$off('someEvent', handleEvent);
    });

    return {
      message
    };
  }
};

4. 更新 uni-app 版本

确保你使用的是最新版本的 uni-app，因为官方可能会修复一些平台兼容性问题。

npm update [@dcloudio](/user/dcloudio)/uni-app
回到顶部