vue3 打包抖音小程序，真机上 canvas不能触发touch事件

[zxh-0830]

问题描述 uniapp vue3版本打包抖音小程序，在字节开发者工具能正常预览，在真机上调试，会报错。

复现步骤 [复现问题的步骤]

<template>
  <canvas id="cs" type="2d" @touchstart="onTouchStart"></canvas>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  methods: {
    onTouchStart() {
      uni.showToast({ title: 'touch start', icon: 'none' });
    },
  }
});
</script>

预期结果 真机上正常弹出toast提示信息 实际结果 真机上报错，且无反应。

系统信息:

• 发行平台: [抖音小程序]
• 宿主app基础库版本 [ 3.11.0]
• 操作系统 [iOS 15.1.1]
• uni-app版本 [3.0.0-3090920231225001]
• 设备信息 [iPhone13]

[Otto-J]

使用使用下面 demo 在安卓小米 13 抖音小程序中未能复现你的问题。

这是一个可以直接运行的 demo https://gitcode.net/xiurensha5731/uni-app-questions/-/blob/q/canvas-2d/src/pages/index/index.vue

真机调试发现点击 cancas 可以正常弹出 toast

--

哦哦，你是 iPhone，请你使用我提供的 demo 运行代码，看是否有问题。后续沟通请基于我提供的 demo 进行说明。

[zxh-0830]

https://gitcode.net/xiurensha5731/uni-app-questions/-/blob/q/canvas-2d/src/pages/index/index.vue

在上面这个demo中，在ios环境下能正常运行的。 但是在上述代码的基础上给canvas标签增加 type=“2d”，在真机上会报错。报错信息与问题描述里一致。

-- 猜测是 type 属性 与 touch事件 不兼容。

[Otto-J]

我知道在微信小程序里加不加 type=2d 是两种渲染 canvas 的方式，我看看抖音文档是否和微信平台一样。

你的场景下可以不加 type=2d 吗？不加能解决你的问题吗？

update:

嗯，我看 抖音开发者文档 中提到也是区分两个版本，我看下微信的新版写法是否可以用在字节上

[Otto-J]

<template>
  <canvas
    id="myCanvas6"
    canvas-id="myCanvas6"
    type="2d"
    @touchstart="onTouchStart"
    style="height: 150px"
  ></canvas>
</template>

<script lang="ts" setup>
import { getCurrentInstance } from "vue";
import { onMounted } from "vue";

const canvasIdErrorCallback = (e: any) => {
  console.error(e.detail.errMsg);
};
const onTouchStart = (e: any) => {
  console.log("touch start", e);
  uni.showToast({ title: "touch start", icon: "none" });
};
/** 使用的 fields */
function render6() {
  const ins = getCurrentInstance();
  const query = uni.createSelectorQuery().in(ins);

  query
    .select("#myCanvas6") // 在 WXML 中填入的 id
    .fields({ node: true, size: true })
    .exec((res) => {
      // Canvas 对象
      const canvas = res[0].node;

      // 这里可以执行 canvas 提供的方法
      // https://developers.weixin.qq.com/miniprogram/dev/api/canvas/Canvas.requestAnimationFrame.html
      console.log(typeof canvas.requestAnimationFrame === "function");

      // 渲染上下文
      const ctx = canvas.getContext("2d");
      const context = ctx;
      // debugger;

      // 绘制红色正方形
      context.fillStyle = "rgb(200, 0, 0)";
      context.fillRect(10, 10, 50, 50);

      // 绘制蓝色半透明正方形
      context.fillStyle = "rgba(0, 0, 200, 0.5)";
      context.fillRect(30, 30, 50, 50);
      // context.draw();
    });
}

onMounted(() => {
  render6();
});
</script>

这段代码我在小米 13 真机调试可以正常渲染和弹窗提示，你看是否有问题？这个是微信小程序的新版写法。你可以根据实际情况进行调整

[zxh-0830]

在实际场景中 已经是使用上述的写法。遵守开发文档 使用 createSelectorQuery 获取实例。这个问题依然存在的。使用抖音文档提供的原生代码片段在真机上是没有问题的。抖音canvas实例代码。目前的解决方式只能是在字节小程序端 先屏蔽掉 touch事件。

-- 期待后续版本更新修复。