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
图片

| 产品分类 | 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在接收时可能无法正确解析参数格式。
解决方案:
- 修改组件源码,在触发事件时明确传递参数格式:
// 在组件中找到triggerEvent调用处
this.triggerEvent('imgOK', {detail: e})
- 或者在父页面接收时尝试从event.detail中获取:
imgOk(e) {
console.log(e.detail); // 尝试访问detail属性
}

