问题描述
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]
5条答案
按热度按时间oknwwptz1#
使用使用下面 demo 在安卓小米 13 抖音小程序中未能复现你的问题。
这是一个可以直接运行的 demo
https://gitcode.net/xiurensha5731/uni-app-questions/-/blob/q/canvas-2d/src/pages/index/index.vue
真机调试发现点击 cancas 可以正常弹出 toast
--
哦哦,你是 iPhone,请你使用我提供的 demo 运行代码,看是否有问题。后续沟通请基于我提供的 demo 进行说明。
sq1bmfud2#
https://gitcode.net/xiurensha5731/uni-app-questions/-/blob/q/canvas-2d/src/pages/index/index.vue
在上面这个demo中,在ios环境下能正常运行的。
但是在上述代码的基础上给canvas标签增加 type=“2d”,在真机上会报错。报错信息与问题描述里一致。
--
猜测是 type 属性 与 touch事件 不兼容。
jm2pwxwz3#
我知道在微信小程序里加不加 type=2d 是两种渲染 canvas 的方式,我看看抖音文档是否和微信平台一样。
你的场景下可以不加 type=2d 吗?不加能解决你的问题吗?
update:
嗯,我看 抖音开发者文档 中提到也是区分两个版本,我看下微信的新版写法是否可以用在字节上
ykejflvf4#
这段代码我在小米 13 真机调试可以正常渲染和弹窗提示,你看是否有问题?这个是微信小程序的新版写法。你可以根据实际情况进行调整
mu0hgdu05#
在实际场景中 已经是使用上述的写法。遵守开发文档 使用 createSelectorQuery 获取实例。这个问题依然存在的。使用抖音文档提供的原生代码片段在真机上是没有问题的。抖音canvas实例代码。目前的解决方式只能是在字节小程序端 先屏蔽掉 touch事件。
--
期待后续版本更新修复。