Taro+Vue3大转盘模拟器调试报错Error: MiniProgramError {"errMsg":"canvasToTempFilePath:fail Cannot read property 'width' of undefined"}

[ggggggggxl]

• 你当前是什么框架(必填)：Taro

• 你使用的是哪个包(必填)：@lucky-canvas/taro

• 你当前插件的版本(必填)："^0.0.14"

• 当前环境是小程序还是浏览器(选填)：小程序

• 详细描述你的bug：运行后，微信开发者工具模拟器控制台报错，但目前能正常运行

• 问题代码(重要)：官方LuckyWheel的Taro-vue3简略demo

// 代码开始, 别再放歪了行吗
<template>
  <view>
    <LuckyWheel
      ref="myLucky"
      width="600rpx"
      height="600rpx"
      :prizes="prizes"
      :blocks="blocks"
      :buttons="buttons"
      @start="startCallback"
      @end="endCallback"
    ></LuckyWheel>
  </view>
</template>

<script>
import { ref, reactive, toRefs } from 'vue'
import { LuckyWheel } from '@lucky-canvas/taro/vue'
export default {
  components: { LuckyWheel },
  setup () {
    const myLucky = ref(null)
    const state = reactive({
      blocks: [{ padding: '13px', background: '#617df2' }],
      prizes: [
        { fonts: [{ text: '0', top: '10%' }], background: '#e9e8fe' },
        { fonts: [{ text: '1', top: '10%' }], background: '#b8c5f2' },
        { fonts: [{ text: '2', top: '10%' }], background: '#e9e8fe' },
        { fonts: [{ text: '3', top: '10%' }], background: '#b8c5f2' },
        { fonts: [{ text: '4', top: '10%' }], background: '#e9e8fe' },
        { fonts: [{ text: '5', top: '10%' }], background: '#b8c5f2' },
      ],
      buttons: [
        { radius: '50px', background: '#617df2' },
        { radius: '45px', background: '#afc8ff' },
        {
          radius: '40px', background: '#869cfa',
          pointer: true,
          fonts: [{ text: '开始\n抽奖', top: '-20px' }]
        },
      ],
    })
    // 点击抽奖按钮会触发star回调
    function startCallback () {
      // 调用抽奖组件的play方法开始游戏
      myLucky.value.play()
      // 模拟调用接口异步抽奖
      setTimeout(() => {
        // 假设后端返回的中奖索引是0
        const index = 0
        // 调用stop停止旋转并传递中奖索引
        myLucky.value.stop(index)
      }, 3000)
    }
    // 抽奖结束会触发end回调
    function endCallback (prize) {
      console.log(prize)
    }
    return {
      ...toRefs(state),
      startCallback,
      endCallback,
      myLucky
    }
  }
}
</script>
// 代码结束

[shwzh]

什么时候能解决 有个结果 @buuing , 现有很多都用的小程序+vue3

[shaojiankui]

什么时候能解决 有个结果 @buuing , 现有很多都用的小程序+vue3

`我uniapp +vue3，options语法中，遇到了这个问题，最后的解决办法是直接在script里面

[GeniusJerry]

最后怎么解决的，我直接用微信小程序的canvas2d也报这个错误，网上搜到这里

[GeniusJerry]

已解决，不要用ref定义全局的canvas，解析会报错canvasToTempFilePath:fail Cannot read property 'width' of undefined，

直接 let canvas = null;

[GeniusJerry]

已解决，不要用ref定义全局的canvas，解析会报错canvasToTempFilePath:fail Cannot read property 'width' of undefined，

直接 let canvas = null;

[boxjohn]

已解决，不要用 ref 定义全局的 canvas，解析会报错 canvasToTempFilePath:fail Cannot read property 'width' of undefined

直接 let canvas = null;

天知道我从uniapp找到这有多不容易，这谁能猜到啊(┬＿┬)，感谢

[antonySee]

已解决，不要用ref定义全局的canvas，解析会报错canvasToTempFilePath:fail Cannot read property 'width' of undefined，

直接 let canvas = null;

@GeniusJerry 这个不是引用的插件吗?在哪里定义?改插件源码吗?

[dobesteveryday]

已解决，不要用ref定义全局的canvas，解析会报错canvasToTempFilePath:fail Cannot read property 'width' of undefined， 直接 let canvas = null;

@GeniusJerry 这个不是引用的插件吗?在哪里定义?改插件源码吗?

我没用这个插件，只是遇到这个问题搜到这个地方留了个言，提供一种解决方法