你想了解「小程序直播」的细节，都在这里

Love The Way You Lie 2023-07-11 05:33 45阅读 0赞

[查看源代码请点我][Link 1]

微信直播，他真的来了！！

在2月24号左右的时候，大家的小程序都收到这么一条通知消息，小程序直播真的来了

![format_png][]

今天的主题主要几个方面：

1. 给大家尝尝鲜，扫码下面的小程序，看看这微信直播是啥样子。

2. 直播的大概功能说明

3. 直播后台的数据同步和逻辑设计

4. 直播前台逻辑设计

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvdmViaXJkMzIx_size_16_color_FFFFFF_t_70][]

直播功能概述

直播功能如下：

1.  普通直播功能
2.  点赞、评论
3.  抽奖：按照点赞、评论随机抽奖
4.  商品带货：发布小程序中商品的链接到直播中，点解后可以直接跳转小程序购买

小程序的直播是通过插件的形式插入小程序中的，插件的意义在于在没有相关资质（如直播、商品售卖）或者技术能力的情况下，可以通过集成对应插件，快速给小程序赋能。

![format_png 1][]

1、提供前端接口

*  订阅组件：subscribe。不用开发提醒功能，直接使用订阅组件可以订阅直播
 *  获取直播状态API：getLiveStatus。在前端循环抓取直播的状态，可以动态看到直播状态的变化
 *  直播间链接到商详页面携带参数：room\_id。
 *  从群分享卡片返回直播间时携带参数：shareTicket。最后两个参数，主要是在小程序与页面间的跳转使用到。

2、提供后端接口

*  后台获取直播房间列表API
 *  后台获取回放源视频API

开发设计

有人说直播开发设计起来很简单嘛，按说通过前端直接调用微信的直播房间列表接口就ok。那这样想的话，就忽略了一个比较重要的地方，后台两个接口微信比较小心眼，只提供了500次/日的调用频率。所以所有的直播房间和回放数据都需要同步缓存到自己的服务器。

好了，废话不多说，给出我这里的一个解决方案：

**后端数据同步**（通过定时器自动获取 + 手动刷新）

1. 同步直播房间：定时器间隔时间不要小于半小时一次，否则每日次数不够用。因为直播接口数据是按照开始时间正排的，所以同步最近1-2天的数据即可，超过两天的数据不做同步。

2. 同步回放数据：这里比较简单，查询未同步过，而且状态为已结束的直播间数据同步即可。

**前端逻辑**

1. 可以仅展示直播列表。如果没有特别的必要，不用为直播单独设置一个详情页

2. 列表分为待直播（状态为101, 102, 105, 106）与已结束（状态为103, 104, 107）。待直播可以通过订阅控件订阅，已结束的直播如果已同步了回看可以显示回看。

3. 因为后台同步数据半小时一次，所以直播状态没法做到很强的实时性。这里用一个方法，通过前端微信提供的直播状态api，当直播的状态发生变化后，直接更新后台数据。

样式什么的，我先贴一些简单的图，大家赶紧到自己的小程序后台捣鼓捣鼓

![format_png 2][]

![format_png 3][]

[Link 1]: https://blog.csdn.net/lovebird321/article/details/104641157
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9ZRGFEaWJWYUg0R0ZLNGo0UWFrZUp1ZnhJaFBGSWlheXp5VmM2YnF0VkdNUkF4Y2VaN0dSam93UFg2aWJCclFXQUtrdEhVNEpUbWljTXNnSmljeDE4VGg2SWF3LzY0MA?x-oss-process=image/format,png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvdmViaXJkMzIx_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200303215007130.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvdmViaXJkMzIx,size_16,color_FFFFFF,t_70
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9ZRGFEaWJWYUg0R0ZLNGo0UWFrZUp1ZnhJaFBGSWlheXp5a0xQU2liZndaem9pYWhpYWljczlocnpBS2licWR1cDBZd3BYRmdZZUVscDhVaWJPSVYxYmF5MVNONVRnLzY0MA?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9ZRGFEaWJWYUg0R0ZLNGo0UWFrZUp1ZnhJaFBGSWlheXp5dkFxb2M3Y1NZbjByN1JDaWFLQktXNWp6T24ydENTdXRpYWljMmtQWHNJbWMxak5pYlNia1BrYmdxQS82NDA?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9ZRGFEaWJWYUg0R0ZLNGo0UWFrZUp1ZnhJaFBGSWlheXp5cUxPejM2bWZIaWF3alJUcE83NnlwTEg2aWJ1RUg5V1o3M3Y1TUx2UmVoamljblk5bWQ4UGJxWVl3LzY0MA?x-oss-process=image/format,png