uni-app 微信小程序组件触发父页面事件参数丢失

uni-app 微信小程序组件触发父页面事件参数丢失

示例代码:

<template>
<view>
<painter @imgOK="imgOk" @imgErr="imgErr" widthPixels="375" customStyle='width:750rpx;' :palette="template"/>
</view>
</template> 
<script>
import painter from '@/wxcomponents/Kujiale-Mobile-painter/painter';
export default {
components: {
painter
},
data() {
return {
template:{}
}
},
mounted() {
this._doctorBase()
},
methods:{
imgOk(e){
console.log(e);
},
imgErr(){
},
_doctorBase(){
let arr = {
background: '#ffffff',
width: '598rpx',
height: '841rpx',
borderRadius: '12rpx',
views: [
{
type: "rect",
css: {
left:'211rpx',
top:'171rpx',
width: '176rpx',
height: '36rpx',
borderRadius: '12rpx',
color: '#f75a53',
}
},
{
type: "text",
text:'wdctefvsdcx',
css: {
color:'#ffffff',
top:'174rpx', //设计图为177
fontSize:'26rpx',
lineHeight:'26rpx',
width:'598rpx',
textAlign:'center',
}
},
// ... (other view elements)
]
}
this.template = arr;
}
}
</script>

操作步骤:

引入组件,生成图片结束后会触发

预期结果:

图片生成后返回图片参数

实际结果:

图片生成后,组件内可以获取到图片参数,父页面也触发了对应方法,但是父页面接收不到参数

bug描述:

uni引入微信小程序组件,https://ext.dcloud.net.cn/plugin?id=1480,组件内触发了triggerEvent,页面也有触发对应方法,但是参数丢失,因为是在wxcomponents目录下,所以无法使用uni.$emit

图片

Image

产品分类 PC开发环境操作系统 PC开发环境操作系统版本号 HBuilderX类型 HBuilderX版本号 第三方开发者工具版本号 基础库版本号 项目创建方式
uniapp/小程序/微信 Windows win10 正式 3.1.4 1.05.2103190 2.16.0 HBuilderX

更多关于uni-app 微信小程序组件触发父页面事件参数丢失的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 微信小程序组件触发父页面事件参数丢失的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个微信小程序原生组件与uni-app事件传递的兼容性问题。由于组件位于wxcomponents目录,它使用的是微信小程序的triggerEvent机制,而uni-app在接收时可能无法正确解析参数格式。

解决方案:

  1. 修改组件源码,在触发事件时明确传递参数格式:
// 在组件中找到triggerEvent调用处
this.triggerEvent('imgOK', {detail: e})
  1. 或者在父页面接收时尝试从event.detail中获取:
imgOk(e) {
  console.log(e.detail); // 尝试访问detail属性
}
回到顶部