1. 首页
  2. 问答
  3. [dcloudio/uni-app]支付宝小程序，EventChannel无法监听BUG

[dcloudio/uni-app]支付宝小程序，EventChannel无法监听BUG

2024-02-22 384 views
9

问题描述 支付宝小程序(Vue3.x)，使用页面间事件通信通道，次页面无法监听到事件

复现步骤

  1. 新建空白Vue3项目，新建next页面；
  2. 复制以下代码至对应页面，保存并运行到【支付宝小程序开发者工具】；
  3. 点击indexPage按钮跳转至nextPage；在nextPage页面，eventChannel.once()监听。
// index
<template>
  <button type="default" @click="_click">Button</button>
</template>

<script setup>
  const _click = () => {
    uni.navigateTo({ url: '/pages/next/next' })
      .then(({ eventChannel }) => {
        eventChannel.emit('acceptDataFromOpenerPage', { data: 'data from starter page' })
      })
  }
</script>

// next
<script setup>
  import { getCurrentInstance } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'

  const { proxy } = getCurrentInstance()

  onLoad(() => {
    // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
    const eventChannel = proxy.getOpenerEventChannel()
    eventChannel.on('acceptDataFromOpenerPage', data => {
       console.log(data) // 控制台无输出
    })
  })
</script>

预期结果 点击按钮跳转至nextPage页，控制台可正常输出日志

实际结果

  1. 跳转至nextPage未输出日志；
  2. 同样代码运行至【微信小程序开发者工具】，跳转至nextPage正常输出日志；
  3. 【支付宝小程序开发者工具】新建工程，使用my.navigateTo({ url: '/pages/next/next' })跳转，eventChannel亦可输出日志。

系统信息:

  • 发行平台:：支付宝
  • 操作系统：Android 12.0+
  • HBuilderX版本：3.6.4 和 3.6.7 Beta
  • 设备信息：meizuPro18，Mate 40Pro 等

zzzz1Mo

回答

5

这个更新发布了吗？ 影响很大

milo-wjh

4

微信转支付宝，这个fix没发版，暂时用替代方案，你可以参考下：

// 商品详情页
<script setup>
  // 选择完规格、数量及配送方式，携带参数去结算页
  const handleEvent = ({ product, spec, count, type }) => {
    // 监听结算页加载完成
    uni.$once('secondPageLoaded', data => {
      // 派发事件并携带必须参数
      uni.$emit('update:product', { product, spec, count, type })
    })
    // 跳转至结算页
    uni.navigateTo({ url: '/pages/product/product-settle' })
  }
</script>

// 商品结算页
<script setup>
  // 监听
  uni.$once('update:product', data => console.log(data) )
  // 派发(须在监听事件下另起一行，否则不生效)
  uni.$emit('secondPageLoaded', '页面加载完成')
  // 必须先$once，再$emit，否则无法监听到（实际应该是先$emit事件，告知
  // 上页“我加载完了，你派发事件给我吧”，然后再$once监听上页派发的事件，
  // 接收参数。此处不知道是不是BUG）
</script>

次页向上页通信无须如此，就不贴代码了

zzzz1Mo

5

HBuilderX 3.6.9 已修复

zhenyuWang