微信小程序直播

6,002 阅读1分钟

1.添加直播组件

官方开发文档

以mpvue为例

//app.json
"plugins": {
  "live-player-plugin": {
    "version": "1.0.11",
    "provider": "wx2b03c6e691cd7370"
  }
}

直播组件版本号可以在 微信开发者工具-详情-基本信息-插件信息 查看当前版本号以及最新版本号

2.直播间跳转

以navigateTo为例

let roomId = [直播房间id] // 填写具体的房间号
let customParams = encodeURIComponent(JSON.stringify({
  path: 'pages/index/index',
  pid: 1 
})) // 开发者在直播间页面路径上携带自定义参数
let livePath = 'plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin'
wx.navigateTo({// 其中wx2b03c6e691cd7370是直播组件appid不能修改
    url: `${livePath}?room_id=${roomId}&custom_params=${customParams}`
})

3.获取直播间列表以及获取直播状态

直播间列表调用限额 500 次/天,建议开发者自己做缓存,交给后端处理了!

let livePlayer = requirePlugin('live-player-plugin')
// 首次获取立马返回直播状态,往后间隔1分钟或更慢的频率去轮询获取直播状态
const roomId = xxx // 房间 id
livePlayer.getLiveStatus({ 
    room_id: roomId
}).then(res => {
    // 101: 直播中, 102: 未开始, 103: 已结束, 104: 禁播, 105: 暂停中, 106: 异常,107:已过期 
    const liveStatus = res.liveStatus
    console.log('get live status', liveStatus)
}).catch(err => {
    console.log('get live status', err)
})

4.直播订阅

对于未开播场次进行订阅

//页面json文件添加subscribe组件
usingComponents: {
    subscribe: 'plugin-private://wx2b03c6e691cd7370/components/subscribe/subscribe'
}
//写入直播房间id即可
<subscribe room-id="[直播房间id]"></subscribe>

5.mpvue-config-loader大坑

插件简化了页面config配置,但在 usingComponents 遍历的时候为所有属性值添加了一个 / ,就导致获取不到 subscribe 组件,暂时先对 mpvue-config-loader 插件做一下更改。

//node_modules/mpvue-config-loader/index.js 46-48行
//可将其3行注释掉,或者去掉47行 /
if (parentKey === 'usingComponents' && !path.isAbsolute(node.value)) {
  return `/${node.value}`
}

6.获取分享卡片链接参数

以mpvue为例,在 ./src/App.vue 文件中添加以下代码

onShow(options) {
  // 分享卡片入口场景才调用getShareParams接口获取以下参数
  if (options.scene == 1007 || options.scene == 1008 || options.scene == 1044) {
      livePlayer.getShareParams().then(res => {
          console.log('get room id', res.room_id) // 房间号
          console.log('get openid', res.openid) // 用户openid
          console.log('get share openid', res.share_openid) // 分享者openid
          console.log('get custom params', res.custom_params) // 自定义参数
      }).catch(err => {
          console.log('get share params', err)
      })
  }
}

可以收集进入直播间的用户以及分享者的信息

7.其它途径进入直播间

直播间小程序码

// type=9 小程序码
"plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=[直播房间id]&type=9"

// 添加自定义参数 custom_params
"...&custom_params=encodeURIComponent(JSON.stringify(custom_params))"

公众号小卡片

// type=10 小卡片
"plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=[直播房间id]&type=10"

// 添加自定义参数 custom_params
"...&custom_params=encodeURIComponent(JSON.stringify(custom_params))"