微信小程序直播组件在uni-app中需通过custom-component桥接原生live-player,仅限mp-weixin平台使用,须配置usingcomponents、手动绑定小写短横线属性、用bind:事件语法、真机调试验证。

微信小程序直播组件在 uni-app 中不能直接用 live-player
uni-app 的跨平台编译机制决定了它不会把原生微信小程序的 live-player 组件直接透出到 Vue 模板中。你在 <template></template> 里写 <live-player></live-player>,H5 或 App 端会报错,微信小程序端也大概率不渲染——因为 uni-app 默认用的是自定义组件封装逻辑,而非原生标签映射。
真正能用上微信原生 live-player 的唯一路径是:通过 custom-component(自定义组件)方式,在微信小程序平台下“桥接”原生组件。
- 必须在
vue.config.js或manifest.json中开启「微信小程序自定义组件支持」("mp-weixin": { "usingComponents": true }) - 需要手动在
components目录下新建一个微信专用目录,例如components/mp-weixin/live-player/index.vue,并在其中用<live-player></live-player>原生标签 +props映射实现属性透传 - 该组件只能在
mp-weixin平台下注册和使用,其他平台需降级为video或占位提示
live-player 属性必须手动绑定,uni-app 不自动转换驼峰
微信原生 live-player 的属性如 src、autoplay、mode、object-fit 全部是小写短横线风格,而 Vue 模板中绑定时若写成 :src="url" 是可以的,但像 :object-fit="fit" 会因非法标识符报错——Vue 不允许在模板中使用带短横线的 prop 名。
正确做法是用方括号语法或 data 映射:
<live-player :src="liveUrl" :autoplay="true" :mode="mode" : :enable-danmu="true"></live-player>
-
mode推荐值为"RTC"(低延时)或"SDK"(兼容老版本),不是"live"(那是video的 mode) -
object-fit必须显式设为"contain"或"fillCrop",否则默认拉伸变形 -
bindstatechange、binderror等事件不能用@绑定,必须用bind:statechange写法,且需在methods中手动处理
真机调试才能看到 live-player 效果,开发者工具常假死或黑屏
微信开发者工具对 live-player 支持极不稳定:经常显示黑屏、卡在“加载中”、或直接抛 invalid src 错误,但同一份代码在真机上完全正常。这不是你的 URL 问题,是工具模拟层缺陷。
- 务必用 iOS 或安卓真机扫码预览,且确保微信版本 ≥ 8.0.33
- 测试前确认直播流地址是合法的
webrtc://或rtmp://(微信只认这两种协议,http://或https://会静默失败) - 如果真机也黑屏,检查
src是否含中文、空格或未 encode 的特殊字符;微信对 URL 格式极其敏感 - 首次进入页面时,
live-player可能延迟 1–2 秒才触发bindstatechange的connectSuccess,不要依赖 mounted 立即播放
用户授权与后台限制是隐藏雷区
微信对直播播放有运行时权限管控:即使你没调摄像头/麦克风,只要页面包含 live-player,iOS 真机就可能弹“是否允许使用麦克风”——这是微信 SDK 强制行为,无法绕过。而且,当用户切到后台再切回,live-player 会自动暂停,且不触发任何事件,resume 需手动调 this.$scope.selectComponent('#player').play()(前提是拿到原生 component 实例)。
- 必须在
onReady中用this.$scope.selectComponent获取组件实例,而不是ref——ref拿不到原生能力 - 安卓部分机型(尤其华为 EMUI)会因省电策略 kill 掉后台音视频解码,导致切回后花屏或无声,需引导用户关闭电池优化
- 微信要求直播页必须是独立 page,不能嵌在 tabbar 页面里,否则可能被拦截或白屏
实际跑通的关键不在写法多炫,而在每一步都踩准微信的隐性规则:协议、路径、生命周期时机、权限链路、真机验证。少一个环节,就是黑屏两小时。











