uni-app 通过hbuildx 编译过的支付宝小程序在ios15.0以上系统tap事件响应延时或者不响应

uni-app 通过hbuildx 编译过的支付宝小程序在ios15.0以上系统tap事件响应延时或者不响应

示例代码：

点击查看代码

代码上传至附件中

操作步骤：

  1. 在苹果手机支付宝小程序中预览，点击车次下方的输入框，会弹出模拟键盘
  2. 快速点击字母或者数字 ，不连续点一个按钮
  3. 会出现事件不响应，或者反应慢的问题
  4. 和setData无关，console.lgo tap 事件也是无反应或者反应延时
  5. 不快速点击了，会有事件反应

预期结果：

希望tap 事件快速的响应，能够把获取的值展示在ui中

实际结果：

tap事件响应延时，或者不响应

bug描述：

自定义模拟做了一个键盘，上方一排为英文字母，下方为数字 ，下方的数字按钮相对大一些，上方的英文字母相对小一些。用tap事件进行绑定，支付宝小程序在ios15.0以上系统上会出现tap事件响慢的问题，按钮小的时候响应就会快，按钮大的时候响应就慢，使用原生的支付宝小程序代码开发，一切正常响应。在插件市场上，也有人做的模拟数字键盘，是同样的问题。


更多关于uni-app 通过hbuildx 编译过的支付宝小程序在ios15.0以上系统tap事件响应延时或者不响应的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

感谢您的反馈！ 查看相关问题：https://ask.dcloud.net.cn/question/132506

更多关于uni-app 通过hbuildx 编译过的支付宝小程序在ios15.0以上系统tap事件响应延时或者不响应的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的支付宝小程序在iOS 15+系统上的性能问题，与uni-app的编译无关，而是支付宝小程序底层在特定iOS版本上的事件处理机制存在缺陷。

核心原因分析：

  1. iOS 15+系统对支付宝小程序WebView的优化不足：支付宝小程序在iOS 15及以上版本中，对tap事件的处理在某些复杂DOM结构或频繁触发的场景下会出现响应延迟。
  2. 事件冒泡和捕获阶段性能下降：当按钮面积较大或布局层级较深时，iOS 15+系统下支付宝小程序的事件传递机制可能出现卡顿。
  3. 与原生开发的差异：原生支付宝小程序代码可能使用了更底层的事件绑定或优化，而uni-app编译后的事件绑定方式可能触发了这个底层bug。

解决方案：

  1. 使用[@touchstart](/user/touchstart)替代[@tap](/user/tap)

    <!-- 将 -->
<view [@tap](/user/tap)="handleTap">按钮</view>
<!-- 改为 -->
<view [@touchstart](/user/touchstart)="handleTap">按钮</view>

    touchstart是更底层的事件，响应速度更快，但需要注意这会立即触发，没有tap的延迟处理。

  2. 添加CSS样式优化

    .keyboard-button {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

    减少点击高亮效果，优化触摸响应。

  3. 减少事件绑定数量 如果键盘按钮很多，考虑使用事件委托：

    <view [@tap](/user/tap)="handleKeyboardTap" data-key="A">A</view>
<view [@tap](/user/tap)="handleKeyboardTap" data-key="B">B</view>

<script>
methods: {
  handleKeyboardTap(e) {
    const key = e.currentTarget.dataset.key;
    // 处理按键
  }
}
</script>

  4. 使用catchtap阻止事件冒泡

    <view catchtap="handleTap">按钮</view>

  5. 支付宝小程序特定优化 在pages.json中配置：

    {
  "style": {
    "ios": {
      "renderer": "skyline"
    }
  }
}
回到顶部