最新微信小程序端直播功能开发流程,小程序直播组件接入指引

本文介绍了如何在微信小程序中引入和使用直播组件live-player-plugin,包括主包和分包的引入方式,以及通过navigator和navigateTo方法跳转进入直播间,同时强调了需要指定正确的appid和房间ID,以及携带自定义参数的功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

官方文档链接小程序直播开发文档

【直播组件】如何引入

版本限制:微信客户端版本 7.0.7 及以上(基础库版本2.9.x及以上支持同层渲染)可以观看直播及使用直播间的功能,低版本刚进入直播间时会提示用户升级微信客户端版本(低版本只能观看直播,无法使用直播间的功能)。

支持在主包或分包内引入【直播组件】 live-player-plugin 代码包(注:直播组件不计入代码包体积),项目根目录的 app.json 引用,示例代码如下:

(1) 主包引入

  "plugins": {
    "live-player-plugin": {
        "version": "1.3.5", 
        "provider": "wx2b03c6e691cd7370" 
    }
  },

其中wx2b03c6e691cd7370是直播组件appid不能修改,版本号可以按具体的使用时间查看

(2)分包引入

"subpackages": [
    {
        "plugins": {
            "live-player-plugin": {
                "version": "1.3.0", // 注意该直播组件最新版本号,微信开发者工具调试时可获取最新版本号(复制时请去掉注释)
                "provider": "wx2b03c6e691cd7370" // 必须填该直播组件appid,该示例值即为直播组件appid(复制时请去掉注释)
            }
        }
    }
]

我这边用的是主包引入
最新微信小程序端直播功能开发流程,小程序直播组件接入指引

【直播组件】如何使用

按第1步的方法把组件代码包配置引入后,即可直接通过链接地址跳转到直播组件页面(即为进直播间页面)链接地址需要带上直播房间 id;房间 id 可通过下面 获取直播房间列表 API 获取。

(1) 使用 navigator 组件跳转进入直播间

index.js

let roomId = [直播房间id] // 填写具体的房间号,可通过下面【获取直播房间列表】 API 获取
let customParams = encodeURIComponent(JSON.stringify({ path: 'pages/index/index', pid: 1 })) // 开发者在直播间页面路径上携带自定义参数(如示例中的path和pid参数),后续可以在分享卡片链接和跳转至商详页时获取,详见【获取自定义参数】、【直播间到商详页面携带参数】章节(上限600个字符,超过部分会被截断)
this.setData({
    roomId,
    customParams
})

index.wxml

<navigator url="plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id={{roomId}}&custom_params={{customParams}}"></navigator>
// 其中wx2b03c6e691cd7370是直播组件appid不能修改

(2) 使用 navigateTo 方法跳转进入直播间

index.js

let roomId = [直播房间id] // 填写具体的房间号,可通过下面【获取直播房间列表】 API 获取
let customParams = encodeURIComponent(JSON.stringify({ path: 'pages/index/index', pid: 1 })) // 开发者在直播间页面路径上携带自定义参数(如示例中的path和pid参数),后续可以在分享卡片链接和跳转至商详页时获取,详见【获取自定义参数】、【直播间到商详页面携带参数】章节(上限600个字符,超过部分会被截断)
wx.navigateTo({
    url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${roomId}&custom_params=${customParams}`
})
// 其中wx2b03c6e691cd7370是直播组件appid不能修改
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

G佳伟

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值