微信小程序插入直播功能

原文链接：
https://mp.weixin.qq.com/s?__biz=Mzg2NTAyNTc5NQ==&mid=2247483819&idx=1&sn=7edd3f8537c85a4e8431adc135dcf4d0&chksm=ce612bc7f916a2d194a85628761a37adb727ce01ba4924b93c14643682a2c6b06cd953c6e213&token=308674433&lang=zh_CN#rd

小程序插入直播功能

我们的商城小程序被邀请开通了直播功能。直播功能还是很有吸引力的，可以在小程序内流畅完成购买交易闭环，提升转化率；所以开发工作立马安排上了。

小程序直播组件包括观众端、主播端及后台管理端，其中观众端提供拉流、实时互动、订阅提醒、商品购买等能力，主播端提供开播、推流、音视频效果优化等能力，后台管理端则负责直播房间、商品货架以及营销活动配置等。

所以，大部分的工作其实是管理和运营来做，小程序上只要做好直播入口的跳转进入。

直播功能的接入，微信这次做的不错。接入的开发工作按照文档很容易就完成了。这里记录下我接入的过程，对照微信官方的文档就更明白了。

image

组件引入

使用分包引入直播组件,在项目根目录的 app.json 添加如下引用

{
  "subpackages": [
    {
      "root": "zhibo",
      "pages": [
        "list/list"
      ],
      "plugins": {
        "live-player-plugin": {
          "version": "1.0.0",
          "provider": "wx2b03c6e691cd7370"
        }
      }
    }
  ]
}

直播室列表页面

然后新建上面的zhibo/list/list页面。作为直播室列表页

直播室页面
直播1 

这里的room_id是你自己的直播室id。获取方式是调用你自己的后台获取。

你自己的后台需要根据token得到直播室的列表信息。方法如下：

请求URL：http://api.weixin.qq.com/wxa/business/getliveinfo?access_token=
请求方式：POST

完成了

是不是很惊奇。这就完事了。测试一下：

image

image

这就进来了。坐等开播了。

注意事项

1. 直播功能对基础库版本有要求，必须是2.9以上。微信客户端必须是7.0.7以上。低版本刚进入直播间时会提示用户升级微信客户端版本（低版本只能观看直播，无法使用直播间的功能）。

image

调试时注意选择基础库版本。

2. 商品详情页面需添加返回按钮

   点击直播组件页面里的货架商品跳转到商家小程序的商品详情页面后， 为了避免用户无法再返回直播间，商家需在小程序商品详情页面左上角加上返回按钮，用于返回到直播组件页面。