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

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

Open
ggggggggxl opened this issue May 30, 2024 · 2 comments

Comments

@ggggggggxl
Copy link

  • 你当前是什么框架(必填):Taro
  • 你使用的是哪个包(必填):@lucky-canvas/taro
  • 你当前插件的版本(必填):"^0.0.14"
  • 当前环境是小程序还是浏览器(选填):小程序
  • 详细描述你的bug:运行后,微信开发者工具模拟器控制台报错,但目前能正常运行

image

  • 问题代码(重要):官方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
Copy link

shwzh commented May 31, 2024

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

@shaojiankui
Copy link

shaojiankui commented Jun 17, 2024

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

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

<script> //不使用代理变量 var currentCanvas = null; export default { // 获取canvas实例 const queryCanvas = uni.createSelectorQuery(); queryCanvas .select('#canvas') .fields({ node: true, size: true }) .exec((res) => { currentCanvas = res[0].node; // 截图 uni.canvasToTempFilePath({ width: cav.width, height: cav.height, canvas: currentCanvas, //2d用这个 fileType: "png", quality: 1, success(res) {`

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants