uniapp vue3编译到微信小程序报错

Iitianci commented 1 year ago

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

你使用的是哪个包(必填)：npm install @lucky-canvas/uni@latest

你当前插件的版本(必填)：0.0.10

当前环境是小程序还是浏览器(选填)： uni-app vue3编译到小程序
详细描述你的bug：编译到h5没问题,纯文字也没有问题,加上图片就报错了
问题代码(重要)：

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

    </tm-app>
</template>

<script lang="ts">
    import LuckyWheel from '@lucky-canvas/uni/lucky-wheel'
    export default {
        components: {
            LuckyWheel
        },
        data() {
            return {
                blocks: [{
                    padding: '0px',
                    background: '#ffe6e6',
                    imgs:[
                        {
                            src:'/static/lucky/bg.png',
                            width:'100%',
                            height:'100%'
                        }
                    ]
                }],
                prizes: [
                    {
                        fonts: [{
                            text: '',
                            top: '0',
                            fontColor:'red',
                            fontWeight:'700'
                        }],
                        background: '',
                        imgs:[
                            {
                                src:'/static/lucky/txjj.png',
                                top:'50%',
                                width:'80'
                            }
                        ]
                    },
                    {
                        fonts: [{
                            text: '',
                            top: '0%',
                            fontColor:'red',
                            fontWeight:'700'
                        }],
                        background: '',
                        imgs:[
                            {
                                src:'/static/lucky/hjvip.png',
                                top:'55%',
                                width:'80'
                            }
                        ]
                    },
                    {
                        fonts: [{
                            text: '',
                            top: '0%',
                            fontColor:'red',
                            fontWeight:'700'
                        }],
                        background: '',
                        imgs:[
                            {
                                src:'/static/lucky/iqy.png',
                                top:'55%',
                                width:'80'
                            }
                        ]
                    },
                    {
                        fonts: [{
                            text: '',
                            top: '0',
                            fontColor:'red',
                            fontWeight:'700'
                        }],
                        background: '',
                        imgs:[
                            {
                                src:'/static/lucky/jd.png',
                                top:'55%',
                                width:'80'
                            }
                        ]
                    },
                    {
                        fonts: [{
                            text: '',
                            top: '0',
                            fontColor:'red',
                            fontWeight:'700'
                        }],
                        background: '',
                        imgs:[
                            {
                                src:'/static/lucky/tmk.png',
                                top:'55%',
                                width:'80'
                            }
                        ]
                    },
                    {
                        fonts: [{
                            text: '',
                            top: '0',
                            fontColor:'red',
                            fontWeight:'700'
                        }],
                        background: '',
                        imgs:[
                            {
                                src:'/static/lucky/tyj.png',
                                top:'55%',
                                width:'80'
                            }
                        ]
                    },

                ],
                buttons: [{
                        radius: '100rpx',
                        background: ''
                    },
                    {
                        radius: '90rpx',
                        background: ''
                    },
                    {
                        radius: '80rpx',
                        background: '',
                        pointer: false,
                        fonts: [{
                            text: '',
                            top: ''
                        }],
                        imgs:[{
                            src:'/static/lucky/btn.png',
                            width:'200rpx',
                            top:'-100rpx'
                        }]
                    },
                ],
            }
        },
        methods: {
            // 点击抽奖按钮触发回调
            startCallBack() {
                // 先开始旋转
                this.$refs.myLucky.play()
                // 使用定时器来模拟请求接口
                setTimeout(() => {
                    // 假设后端返回的中奖索引是0
                    const index = 0
                    // 调用stop停止旋转并传递中奖索引
                    this.$refs.myLucky.stop(index)
                }, 3000)
            },
            // 抽奖结束触发回调
            endCallBack(prize) {
                // 奖品详情
                console.log(prize)
            }
        }
    }
</script>

<style lang="scss" scoped>

</style>

// 代码结束

Iitianci commented 1 year ago

报错原因:

promise rejection TypeError: Cannot read property 'nodeId' of undefined
    at VM298 WAService.js:2
    at HTMLImageElement.set src [as src] (<anonymous>:10:83820)
    at _callee35$ (vendor.js? [sm]:77)
    at L (regenerator.js:1)
    at Generator._invoke (regenerator.js:1)
    at Generator.t.<computed> [as next] (regenerator.js:1)
    at asyncGeneratorStep (asyncToGenerator.js:1)
    at c (asyncToGenerator.js:1)
    at asyncToGenerator.js:1
    at new V (VM298 WAService.js:2)(env: Windows,mp,1.06.2206090; lib: 2.24.5

Iitianci commented 1 year ago

ts + vite编译环境

buuing commented 1 year ago

能拆个复现问题的小demo吗

Iitianci commented 1 year ago

能拆个复现问题的小demo吗

最小的demo就是文档uniapp的demo代码直接复制下来,只是blocks添加上背景图片在vue3+vite编译到微信小程序就会提示Cannot read property 'nodeId' of undefined at HTMLImageElement.set src [as src] (:10:83820)

buuing commented 1 year ago

嗯，那你打包成zip压缩文件发我试试

Iitianci commented 1 year ago

不知道如何上传压缩包,直接给下载地址吧 https://vkceyugu.cdn.bspapp.com/VKCEYUGU-4052539d-ef26-4712-bab0-883670e873c5/2cef6610-43b2-4867-900f-b982b75f3dcb.zip

uniapp编译器:3.5.1 编译环境:vue3+vite

Iitianci commented 1 year ago

我好像上一年加过大佬的联系方式,忘记是qq还是微信了,方便透露一下qq的前五位数字吗,这么好的插件,应该有一个技术讨论区才对

buuing commented 1 year ago

好的，一会我运行看看

讨论区没啥用，没建

Iitianci commented 1 year ago

结果如何

buuing commented 1 year ago

我看到这个奇怪的报错了

buuing commented 1 year ago

我的微信: ldq404

hdgao commented 1 year ago

我也遇到了，请问解决了吗

buuing commented 1 year ago

我也遇到了，请问解决了吗

别急, 刚洗完澡, 这就看

buuing commented 1 year ago

我知道问题出在哪了, 是设置 img.src = xxx 的时候报错了

h5 端用的是原生的 Image 对象, 所以不受影响

但是很奇怪, 这是小程序提供的 api, 要么是微信出 bug 了, 要么是 uniapp 出 bug 了

明天我还得再试一下 原生微信小程序 / vue2版的 uniapp 这两种情况来排查一下问题

SonicAdvan commented 1 year ago

哈喽。taro-vue3也会有这个问题，现在有解决方案吗？

buuing commented 1 year ago

哈喽。taro-vue3也会有这个问题，现在有解决方案吗？

复现个小demo发给我, 要能跑起来的项目 (但是别把你司项目直接发给我, 太大了)

SonicAdvan commented 1 year ago

您好，demo已经发附件给您了。问题描述：我是用taro3+vue3开发微信小程序的，用您官网发布的demo引入是没问题的，但是当奖品参数的时候添加图片就会报错-WAServiceMainContext.js?t=wechat&s=1662431010125&v=2.26.0:1 TypeError: Cannot read property 'nodeId' of undefined,希望您能看一下，给提供一个解决方案。谢谢！

?? @.***

------------------ 原始邮件 ------------------ 发件人: "buuing/lucky-canvas" @.>; 发送时间: 2022年9月6日(星期二) 上午10:07 @.>; @.**@.>; 主题: Re: [buuing/lucky-canvas] uniapp vue3编译到微信小程序报错 (Issue #301)

哈喽。taro-vue3也会有这个问题，现在有解决方案吗？

复现个小demo发给我, 要能跑起来的项目 (但是别把你司项目直接发给我, 太大了)

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.Message ID: @.***>

Haoz03 commented 1 year ago

报错原因:

promise rejection TypeError: Cannot read property 'nodeId' of undefined
    at VM298 WAService.js:2
    at HTMLImageElement.set src [as src] (<anonymous>:10:83820)
    at _callee35$ (vendor.js? [sm]:77)
    at L (regenerator.js:1)
    at Generator._invoke (regenerator.js:1)
    at Generator.t.<computed> [as next] (regenerator.js:1)
    at asyncGeneratorStep (asyncToGenerator.js:1)
    at c (asyncToGenerator.js:1)
    at asyncToGenerator.js:1
    at new V (VM298 WAService.js:2)(env: Windows,mp,1.06.2206090; lib: 2.24.5

请问有解决方案吗？

xiaoyanrujiu commented 1 year ago

使用的vant4编译小程序环境报错，编译h5没问题

[vite]: Rollup failed to resolve import "@vant/use" from "C:/Users/hanjiahui/Desktop/uni-preset-vue-vite-ts/node_modules/vant/es/action-bar/ActionBar.mjs".This is most likely unintended because it can break your application at runtime.If you do want to externalize this module explicitly add it to build.rollupOptions.external``

buuing commented 1 year ago

使用的vant4编译小程序环境报错，编译h5没问题

看上去好像跟我没关系吧? 你这个报错说rollup加载"@vant/use"失败

xiaoyanrujiu commented 1 year ago

使用的vant4编译小程序环境报错，编译h5没问题

看上去好像跟我没关系吧? 你这个报错说rollup加载"@vant/use"失败

但是编辑h5没问题编译小程序就报错

vatezj commented 1 year ago

转义下就行

antonySee commented 5 months ago

转义下就行

转义下就行

我是uniapp+vue3

buuing / lucky-canvas

uniapp vue3编译到微信小程序报错 #301