Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
gezichenshan opened this issue Jun 2, 2022 · 3 comments
Labels
F-vue3 Framework - Vue 3 T-weapp Target - 编译到微信小程序 V-3 Version - 3.x

Comments

@gezichenshan
Copy link

gezichenshan commented Jun 2, 2022

相关平台

微信小程序

复现仓库

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 
@taro-bot2 taro-bot2 bot added F-vue3 Framework - Vue 3 T-weapp Target - 编译到微信小程序 V-3 Version - 3.x labels Jun 2, 2022
@Chen-jj
Copy link
Contributor

Chen-jj commented Jun 5, 2022

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

@gezichenshan
Copy link
Author

gezichenshan commented Jun 6, 2022

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

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

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

@Chen-jj
Copy link
Contributor

Chen-jj commented Jun 6, 2022

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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
F-vue3 Framework - Vue 3 T-weapp Target - 编译到微信小程序 V-3 Version - 3.x
Projects
None yet
Development

No branches or pull requests

2 participants