Vue3 canvas标签在执行微信小程序编译时会自动加上bindtouchstart="eh"等事件。

[gezichenshan]

相关平台

微信小程序

复现仓库

https://github.com/jooyyy/abroad-go 这个是私有仓库你们看不了。
小程序基础库: 2.24.3
使用框架: Vue 3

复现步骤

npm run build:weapp

期望结果

期望canvas编译过程不自动添加bind事件

实际结果

canvas编译后增加了非期望的bindtouchend， bindtouchstart等事件，会导致canvas处滑动卡顿。

 <canvas canvas-id="{{i.canvasId}}" disable-scroll="{{xs.b(i.disableScroll,false)}}" binderror="eh" bindtouchstart="eh" bindtouchmove="eh" bindtouchend="eh" bindtouchcancel="eh" bindlongtap="eh" type="{{i.type}}" style="{{i.st}}" class="{{i.cl}}" bindtap="eh"  id="{{i.uid||i.sid}}" data-sid="{{i.sid}}">
    <block wx:for="{{i.cn}}" wx:key="sid">
      <template is="{{xs.e(cid+1)}}" data="{{i:item,l:l}}" />
    </block>
  </canvas>

环境信息

Taro v3.4.3


  Taro CLI 3.4.3 environment info:
    System:
      OS: macOS 11.4
      Shell: 5.8 - /bin/zsh
    Binaries:
      Node: 16.14.2 - /usr/local/bin/node
      Yarn: 1.22.10 - /usr/local/bin/yarn
      npm: 8.5.0 - /usr/local/bin/npm
    npmPackages:
      @tarojs/cli: 3.4.3 => 3.4.3 
      @tarojs/components: 3.4.3 => 3.4.3 
      @tarojs/mini-runner: 3.4.3 => 3.4.3 
      @tarojs/runtime: 3.4.3 => 3.4.3 
      @tarojs/taro: 3.4.3 => 3.4.3 
      @tarojs/webpack-runner: 3.4.3 => 3.4.3 
      babel-preset-taro: 3.4.3 => 3.4.3 
      eslint-config-taro: 3.4.3 => 3.4.3 

[Chen-jj]

@gezichenshan 确认从模板中删除这些事件绑定能解决卡顿问题么？

[gezichenshan]

@Chen-jj 确定，删除之后滑动没有卡顿了。

有没有一个编译参数可以禁止Taro为原生组件加某些属性？

比如还有我在run dev:weapp的时候，发现会给img标签增加一个h5-img的class样式。

[Chen-jj]

可以试试参考编写一个 Taro 插件：https://github.com/NervJS/taro-plugin-inject/blob/master/src/index.ts，删除 template.internalComponents.Canvas 上的事件属性。

h5-img 是为了兼容标签选择器，这点没办法去掉