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

Iitianci · 2022-07-25T13:53:49Z

你当前是什么框架(必填)：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>

// 代码结束

The text was updated successfully, but these errors were encountered:

Iitianci · 2022-07-25T13:54:16Z

报错原因:

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 · 2022-07-25T14:17:51Z

ts + vite编译环境

buuing · 2022-07-25T14:25:14Z

能拆个复现问题的小demo吗

Iitianci · 2022-07-25T15:02:41Z

能拆个复现问题的小demo吗

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

buuing · 2022-07-25T15:07:58Z

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

Iitianci · 2022-07-25T15:15:30Z

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

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

Iitianci · 2022-07-25T15:32:07Z

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

buuing · 2022-07-26T01:15:28Z

好的，一会我运行看看

讨论区没啥用，没建

Iitianci · 2022-07-26T07:32:01Z

结果如何

buuing · 2022-07-26T08:11:12Z

我看到这个奇怪的报错了

buuing · 2022-07-26T08:12:39Z

我的微信: ldq404

hdgao · 2022-07-26T13:49:34Z

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

buuing · 2022-07-26T15:43:49Z

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

别急, 刚洗完澡, 这就看

buuing · 2022-07-26T16:34:03Z

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

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

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

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

SonicAdvan · 2022-09-06T02:03:54Z

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

buuing · 2022-09-06T02:07:30Z

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

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

SonicAdvan · 2022-09-06T02:27:35Z

您好，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 · 2023-03-17T00:44:02Z

报错原因:

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 · 2023-03-22T02:34:13Z

使用的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 · 2023-03-22T02:48:31Z

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

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

xiaoyanrujiu · 2023-03-22T02:57:47Z

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

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

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

vatezj · 2023-04-17T13:42:53Z

转义下就行

antonySee · 2024-01-25T12:07:37Z

转义下就行

我是uniapp+vue3

buuing added the 🏷 UniApp label Jul 25, 2022

buuing added the 级别B：渲染 bug 💊 label Jul 26, 2022

buuing mentioned this issue Sep 8, 2022

Taro无法渲染网络图片 #322

Open

buuing added 级别D：灵异事件 👻 and removed 级别B：渲染 bug 💊 labels Sep 8, 2022

penjj mentioned this issue Oct 23, 2023

fix: Taro Vue小程序基础库大于2.24.1图片无法渲染问题 #435

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

Iitianci commented Jul 25, 2022

Iitianci commented Jul 25, 2022

Iitianci commented Jul 25, 2022

buuing commented Jul 25, 2022

Iitianci commented Jul 25, 2022

buuing commented Jul 25, 2022

Iitianci commented Jul 25, 2022

Iitianci commented Jul 25, 2022

buuing commented Jul 26, 2022

Iitianci commented Jul 26, 2022

buuing commented Jul 26, 2022

buuing commented Jul 26, 2022

hdgao commented Jul 26, 2022

buuing commented Jul 26, 2022

buuing commented Jul 26, 2022

SonicAdvan commented Sep 6, 2022

buuing commented Sep 6, 2022

SonicAdvan commented Sep 6, 2022 via email

Haoz03 commented Mar 17, 2023

xiaoyanrujiu commented Mar 22, 2023

buuing commented Mar 22, 2023

xiaoyanrujiu commented Mar 22, 2023

vatezj commented Apr 17, 2023

antonySee commented Jan 25, 2024

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

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

Comments

Iitianci commented Jul 25, 2022

Iitianci commented Jul 25, 2022

Iitianci commented Jul 25, 2022

buuing commented Jul 25, 2022

Iitianci commented Jul 25, 2022

buuing commented Jul 25, 2022

Iitianci commented Jul 25, 2022

Iitianci commented Jul 25, 2022

buuing commented Jul 26, 2022

Iitianci commented Jul 26, 2022

buuing commented Jul 26, 2022

buuing commented Jul 26, 2022

hdgao commented Jul 26, 2022

buuing commented Jul 26, 2022

buuing commented Jul 26, 2022

SonicAdvan commented Sep 6, 2022

buuing commented Sep 6, 2022

SonicAdvan commented Sep 6, 2022 via email

Haoz03 commented Mar 17, 2023

xiaoyanrujiu commented Mar 22, 2023

buuing commented Mar 22, 2023

xiaoyanrujiu commented Mar 22, 2023

vatezj commented Apr 17, 2023

antonySee commented Jan 25, 2024