uni-app 使用小程序原生组件时参数消失的问题

项目信息	详情
产品分类	uniapp/小程序/微信
PC开发环境操作系统	Windows
PC开发环境操作系统版本号	22H2
HBuilderX类型	正式
HBuilderX版本号	3.98
第三方开发者工具版本号	1.06.2308310
基础库版本号	3.2.5
项目创建方式	HBuilderX

示例代码：

uniapp  
<xr-vrtual v-show="par.type === 1" :width="par.renderWidth"  
height="par.renderHeight"
isVirtualCharacterT="par.transmit.isVirtualCharacter"
virtualCharacterSrcT="par.transmit.virtualCharacterSrc" :style="{'width':par.width+'px','height':par.height+'px'}"></xr-virtual>
开发者工具
<xr-vrtual wx:if="{{r0}}" class="data-v-81e3a6b3" data-c-h="{{!i}}" style="{{'width:' + j + ';' + ('height:' + k)}}" u-t="m" u-i="81e3a6b3-3" bind:<strong>l="</strong>l" u-p="{{l}}"></xr-virtual></view>

操作步骤：

使用wxcomponents目录下的组件，在组件上添加参数

预期结果：

编译后参数依旧存在，可以正常获取

实际结果：

参数不存在无法获取

bug描述：

Vue3语法糖模式，使用wxcomponents目录下的小程序原生组件，添加参数编译后在开发者工具里消失了导致参数接收不到

caililin 1楼•7 天前

这只是编译后的代码，props是会在运行时动态传递的，可以在组件内打印下看下。

phonegap100 2楼•7 天前

必须在编译后手动添加width和height不然程序打开摄像头就占屏幕下方很小的一块，上面全黑

vueper 3楼•7 天前

作者解决了吗，我也刚遇到了，编译后使用的小程序原生组件参数不存在

gougou168 4楼•7 天前

在 uni-app 中使用小程序原生组件时，可能会遇到参数消失的问题。这通常是由于 uni-app 的编译机制和小程序原生组件的使用方式不兼容所导致的。以下是一些可能的原因和解决方案：

1. 参数传递方式问题

问题描述：在 uni-app 中，通过 props 传递参数给小程序原生组件时，参数可能会丢失或无法正确传递。
解决方案：确保使用正确的参数传递方式。对于小程序原生组件，通常需要使用 data-* 属性来传递参数，而不是直接通过 props。
```
<custom-component data-myParam="value"></custom-component>
```
在原生组件的 js 文件中，可以通过 event.currentTarget.dataset.myParam 来获取传递的参数。

2. 组件生命周期问题

问题描述：在 uni-app 中，组件的生命周期可能与小程序原生组件的生命周期不一致，导致参数在组件初始化时还未准备好。

解决方案：确保在组件的 ready 或 attached 生命周期钩子中处理参数，而不是在 created 或 mounted 中。

Component({
  lifetimes: {
    attached() {
      // 在这里处理参数
      const myParam = this.data.myParam;
    }
  }
});

3. 编译时参数丢失

问题描述：在 uni-app 编译过程中，某些参数可能会被优化掉，导致在小程序端无法获取到。
解决方案：检查 uni-app 的编译配置，确保没有启用过于激进的优化选项。可以在 manifest.json 中调整编译配置。
```
{
  "mp-weixin": {
    "optimization": {
      "treeShaking": false
    }
  }
}
```

4. 事件绑定问题

问题描述：在 uni-app 中绑定事件时，事件处理函数可能无法正确获取到参数。

解决方案：确保事件处理函数中正确获取参数。可以使用 event.currentTarget.dataset 来获取传递的参数。

<custom-component data-myParam="value" bindtap="handleTap"></custom-component>

Page({
  handleTap(event) {
    const myParam = event.currentTarget.dataset.myParam;
  }
});

5. 组件库版本问题

问题描述：使用的 uni-app 或小程序原生组件库版本可能存在兼容性问题。
解决方案：确保使用的 uni-app 和小程序原生组件库是最新版本，或者回退到已知稳定的版本。

6. 自定义组件配置问题

问题描述：在自定义组件的配置文件中，可能没有正确声明需要接收的参数。

解决方案：在自定义组件的 js 文件中，确保正确声明了 properties。

Component({
  properties: {
    myParam: {
      type: String,
      value: ''
    }
  }
});