uni-app 使用头条自定义组件 video-player 时 props 被编译问题

示例代码：

头条的自定义组件是复制到产物了
自定义组件在页面里对应的 usingComponents 引入的

操作步骤：

复现方案

pnpm install
DEBUG=* pnpm run dev:mp-toutiao

主要看

源码：src/pages/playlet-video-player/index.vue
产物：dist/dev/mp-toutiao/pages/playlet-video-player/index.ttml

预期结果：

小程序自定义组件的 props 名称不被编译

实际结果：

小程序自定义组件的 props 名称被完全重命名

bug描述：

uniapp 项目里引入头条的自定义短剧组件，按照文档和社区中的方案测试下来还是有小程序原生组件 tt-video-player props 名称被编译了的现象

用的 vue3 + ts + vite，已经试过不同版本的 uniapp (alpha 也测试了)

参考文档：https://uniapp.dcloud.net.cn/tutorial/miniprogram-subject.html#小程序自定义组件支持

头条 video-player 文档：https://bytedance.larkoffice.com/docx/TsJmdbX6co33uJxi7j9cfYc2nnd

信息类型	信息内容
产品分类	uniapp/小程序/字节跳动
项目创建方式	CLI

itying888 1楼•7 天前

自定义组件的props被编译掉是符合预期的，props会在运行时动态传递，不会影响实际功能。运行你的工程在组件内可以正常获取到props，你可以再验证下。

bupafengyu 2楼•7 天前

在 uni-app 中使用头条自定义组件 video-player 时，如果遇到 props 被编译的问题，可能是由于 uni-app 的编译机制或头条小程序的特定限制导致的。以下是一些可能的解决方案和注意事项：

1. 检查 `props` 的传递方式

确保你在传递 props 时使用了正确的语法。例如：

<video-player :src="videoSrc" :autoplay="true"></video-player>

在 data 中定义 videoSrc：

export default {
  data() {
    return {
      videoSrc: 'https://example.com/video.mp4'
    };
  }
};

2. 使用 `props` 的默认值

如果某些 props 在编译后丢失或无法识别，可以尝试在组件内部设置默认值：

export default {
  props: {
    src: {
      type: String,
      default: ''
    },
    autoplay: {
      type: Boolean,
      default: false
    }
  }
};

3. 检查 uni-app 的编译配置

uni-app 在编译时可能会对某些 props 进行优化或转换。你可以尝试在 pages.json 或 manifest.json 中调整编译配置，确保 props 不被错误地处理。

4. 使用 `ref` 直接操作组件

如果 props 无法正常传递，可以尝试使用 ref 直接操作组件：

<video-player ref="videoPlayer"></video-player>

在 mounted 或需要的时候直接设置属性：

export default {
  mounted() {
    this.$refs.videoPlayer.src = 'https://example.com/video.mp4';
    this.$refs.videoPlayer.autoplay = true;
  }
};

5. 检查头条小程序的限制

头条小程序可能对某些 props 有特定的限制或要求。确保你使用的 props 是头条小程序支持的，并且符合其文档中的要求。

6. 使用 `uni-app` 的 `video` 组件

如果 video-player 组件问题无法解决，可以考虑使用 uni-app 自带的 video 组件，它通常能够跨平台兼容：

<video :src="videoSrc" :autoplay="true"></video>