小程序直播功能开发

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

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

一、接入小程序组件

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

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

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

 二、直播间列表

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

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

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

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

设计云函数：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等等返回值对象的字段写法要进行调整。