2025年小程序直播功能开发

大家好，我是讯享网，很高兴认识大家。

近期为一家企业开发小程序，用户提出了在小程序中增加直播功能。所幸小程序本身就提供了直播组件。具体开发文档可见官方说明。

小程序直播是微信官方提供的商家经营工具。通过调用该组件，商家可以在小程序中实现直播互动与商品销售闭环。其开发部分主要参考官方文档，使用更多是在微信小程序后台的直播控制台中进行操作，具体参考官方的操作手册。

一、接入小程序组件

在小程序某个中间页面的json文件中加入组件引用：

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

讯享网

你的plugins可能不止一个，因此，主要是在json文档的plugins部分加入"live-player-plugin"，代码中的注释部分需要删除。其中的版本部分需要根据直播组件版本更新记录中查询（如下图黄色部分）。至此就在小程序中引入了直播组件。

讯享网

二、直播间列表

微信小程序直播间开发api主要参考下面的内容进行开发。

官方的文档地址为：获取直播间列表和回放 | 微信开放文档

该接口支持https调用和云调用，调用额度：次/一天。

因为我们开发的小程序主要是云开发方式，且为了减少鉴权的要求，因而使用云调用方式。

设计云函数：getLiveRooms:

讯享网exports.main = async (event, context) => { let start=event.start; let limit=event.limit; let result='' try { result= await cloud.openapi.liveBroadcast.getLiveInfo({ start: start, limit: limit }) } catch (error) { result=error } return result }

在小程序页面端调用该云函数：

 async LoadRooms() { var that = this; wx.cloud.callFunction({ name: 'getLiveRooms', data: { start: this.data.pageSize * this.data.pageIndex, limit: this.data.pageSize }, success(res) { let result=res.result; console.log(result) if (result.errCode == 0) { that.setData({ roomList: that.data.roomList.concat(result.roomInfo) }); } else { if (that.data.pageIndex == 0) { that.setData({ isEmpty: true }); } else { that.setData({ isNoData: true }); } } } }); },

wxml页面展示直播间列表：

讯享网<view wx:else="{ 
  
    
  {isEmpty}}"> <view wx:for="{ 
  
    
  {roomList}}" wx:key="index"> <navigator url="plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id={ 
  
    
  {item.roomid}}" class="room"> <view style="font-weight: 800;opacity: 0.8;display: flex;justify-content: space-between;align-items: center;">{ 
  
    
  {item.name}} <subscribe room-id="{ 
  
    
  {item.roomid}}" width="80" height="20" font-size="12" color="#eee" background-color="#f88616" bindsubscribe="onSubscribe"> </subscribe> </view> <image class="room_img" src="{ 
  
    
  {item.coverImg}}" mode="aspectFill"></image> <view class="romm_desc"> <text>主播：{ 
  
    
  {item.anchorName}}</text> <text>{ 
  
    
  {tools.formatTime(item.startTime*1000)}}</text> </view> </navigator> </view> </view>

三、直播订阅组件使用

在wxml页面直接加入订阅组件：

<subscribe room-id="{ 
  
    
  {item.roomid}}" width="80" height="20" font-size="12" color="#eee" background-color="#f88616" bindsubscribe="onSubscribe"> </subscribe>

组件的宽度、高度、背景颜色、文字颜色等都可以自定义，只要传入每个房间的roomid即可。组件监听的时间为：onSubscribe，可以在其中进行其他操作。

四、一点说明

官方文档中可能由于更新不及时，或者多个文档会存在冲突，因此对如roomid，coverImg等等返回值对象的字段写法要进行调整。

2025年小程序直播功能开发

一、接入小程序组件

二、直播间列表

三、直播订阅组件使用

四、一点说明

相关推荐