支持小程序的捕获类型事件在uni-app中的应用

支持小程序的捕获类型事件在uni-app中的应用

示例代码：

<template>  
    <view @touchStart.capture.stop="showToast">showToast</view>  
</template>

操作步骤：

npx degit dcloudio/uni-preset-vue#vite-alpha my-vue3-project 创建 cli项目，编译成支付宝和微信小程序，查看产物

预期结果：

支付宝小程序可以解析捕获修饰符

实际结果：

支付宝小程序不能解析捕获修饰符，微信可以

bug描述：

同一份带有捕获修饰符的代码，编译到微信平台正常，支付宝不正常，见附件

github 也有人提了 issue https://github.com/dcloudio/uni-app/issues/4339

https://opendocs.alipay.com/mini/framework/events#%E4%BA%8B%E4%BB%B6%E7%9A%84%E6%8D%95%E8%8E%B7%E9%98%B6%E6%AE%B5

Image


更多关于支持小程序的捕获类型事件在uni-app中的应用的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

感谢反馈，问题已经复现，已加分。
临时解决方案
替换 node_modules/@dcloudio/uni-mp-alipay/dist/uni.compiler.js 为 附件的文件

更多关于支持小程序的捕获类型事件在uni-app中的应用的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是uni-app在支付宝小程序平台的事件处理机制差异问题。微信小程序原生支持事件捕获阶段，而支付宝小程序虽然文档提到有捕获阶段，但实际实现与微信存在差异。

在uni-app中，事件修饰符.capture在微信小程序能正常编译是因为微信原生支持，而支付宝小程序平台底层实现不完全一致。目前建议的解决方案：

  1. 对于需要捕获阶段处理的场景，可以使用条件编译针对支付宝平台单独处理：
<template>
  <!-- #ifdef MP-ALIPAY -->
  <view @touchStart.stop="showToast">showToast</view>
  <!-- #else -->
  <view @touchStart.capture.stop="showToast">showToast</view>
  <!-- #endif -->
</template>
  1. 或者改用原生事件绑定方式：
<template>
  <view ref="captureView">showToast</view>
</template>

<script>
export default {
  mounted() {
    // #ifdef MP-ALIPAY
    this.$refs.captureView.$el.addEventListener('touchstart', this.showToast, true)
    // #endif
  }
}
</script>
回到顶部