0

0

通过直播组件实现小程序直播功能

王林

王林

发布时间:2021-01-01 12:35:42

|

6262人浏览过

|

来源于csdn

转载

通过直播组件实现小程序直播功能

一、导语

微信为小程序开发者提供了直播组件,通过调用该组件,商家可以小程序中实现直播功能。

(学习视频分享:编程视频

下面我们来介绍如何在小程序中引入直播组件。

二、使用方法说明

1.  【直播组件】如何引入

版本限制:

微信客户端版本 7.0.7 及以上(基础库版本2.9.x 及以上支持同层渲染)可以观看直播及使用直播间的功能,低版本刚进入直播间时会提示用户升级微信客户端版本(低版本只能观看直播,无法使用直播间的功能)。

在分包内引入【直播组件】live-player-plugin代码包,项目根目录的 app.json 引用,示例代码如下:

{

  "subpackages": [

    {

      "root": "packageA",

      "pages": [

        "pages/home/home"

      ],

      "plugins": {

        "live-player-plugin": {         

"version": "1.0.0", // 填写该直播组件最新版本号,微信开发者工具调试时可获取最新版本号

          "provider": "wx2b03c6e691cd7370" // 必须填该直播组件appid,该示例值即为直播组件appid

        }

      }

    }

  ]

}

2.   【直播组件】如何使用

按第1步的方法把组件代码包配置引入后,即可直接通过链接地址跳转到直播组件页面(即为进直播间页面)链接地址需要带上直播房间id;房间id可通过下面【获取直播房间列表】API获取,示例代码如下:
 

<navigator url="plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=[直播房间id]">

  Go to Live Player page

</navigator>

通过该链接可跳转到直播组件页面(当前页面入口仅开放‘live-player-plugin’)。

示例效果图如下:

 

三、其他相关组件、接口和携带参数

●    订阅组件:subscribe

●    获取直播状态API:getLiveStatus

●    直播间到商详页面携带参数:room_id

●    从群分享卡片返回直播间时携带参数:shareTicket

●    后台获取直播房间列表API

●    后台获取回放源视频API

注:以上2个后台调用的接口总上限500次/天

1.   【订阅】组件

功能解释:

用户进入直播间内,可对一场未开播的直播进行单次订阅,开播时直播组件会自动下发开播提醒给用户,无需开发者额外开发

组件使用:

如果需要在直播组件页以外小程序其他页面也有同样的开播提醒的功能,可以引入【订阅】组件subscribe;需在page页面(如home页面)的 home.json 引用订阅组件,示例代码如下:

{

  "usingComponents": {

    "subscribe": "plugin-private://wx2b03c6e691cd7370/components/subscribe/subscribe"

  }

}

然后便可在home.wxml里使用订阅组件,其中直播房间id可通过;房间id可通过下面【获取直播房间列表】API获取

<subscribe room-id="[直播房间id]"></subscribe>

2.   【获取直播状态】接口

接口说明:

首次获取立马返回直播状态,往后间隔1分钟或更慢的频率去轮询获取直播状态;

直播状态说明:

l  101直播中:表示主播正常开播,直播正常的状态;

l  102未开始:表示主播还未开播;

l  103已结束:表示在直播端点击【结束】按钮正常关闭的直播,或直播异常15分钟后系统强制结束的直播;

l  104禁播:表示因违规受到运营处罚被禁播;

l  105暂停中:表示在MP小程序后台-控制台内操作暂停了直播;

l  106异常:表示主播离开、切后台、断网等情况,该直播被判定为异常状态,15分钟内恢复即可回到正常直播中的状态;如果15分钟后还未恢复,直播间会被系统强制结束直播;

l  107已过期:表示直播间一直未开播,且已达到在MP小程序后台创建直播间时填写的直播计划结束时间,则该直播被判定为过期不能再开播;

调用方法:

若要调用【获取直播状态】接口getLiveStatus,需在小程序页面顶部引用【直播组件】live-player-plugin,示例代码如下:

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

  })

  .catch(err =>

{

    console.log(err)

  })

3.   携带参数

版本限制:

直播组件版本1.0.1及以上支持携带以下参数

  • shareTicket:分享直播间卡片到微信群,点击此卡片后可以在 ApponShow 里获取该参数

  • room_id:点击直播组件页面里的货架商品跳转到商家小程序的商品详情页面时,会带上房间号参数

4.   【获取直播房间列表】接口,仅供后台调用

接口规则:

该接口仅供商家后台调用,调用限额500次/天,建议开发者自己做缓存(此接口与下面【获取回放视频】接口共用500次/天限制,请合理分配调用频次)。

小邮包 包月订购包年程序
小邮包 包月订购包年程序

小邮包-包月订购包年服务网,该程序由好买卖商城开发,程序采用PHP+MYSQL架设,程序商业模式为目前最为火爆的包月订制包年服务模式,这种包年订购在国外网站已经热火很多年了,并且已经发展到一定规模,像英国的男士用品网站BlackSocks,一年的袜子购买量更是达到了1000万双。功能:1、实现多产品上线,2、不用注册也可以直接下单购买,3、集成目前主流支付接口,4、下单发货均有邮件提醒。

下载

请求URL:

http://api.weixin.qq.com/wxa/business/getliveinfo?access_token= 

请求方式:

POST

请求示例:

Request

{

 "start": 0, // 起始拉取房间,start=0表示从第1个房间开始拉取

 "limit": 10 // 每次拉取的个数上限,不要设置过大,建议100以内

}



Response

{

 "errcode": 0, // errcode=0代表成功;errcode=1代表未创建直播房间

 "errmsg": "ok",

 "room_info": [{

"name": "直播房间名", 

"roomid": 1,

"cover_img": "http:\/\/mmbiz.qpic.cn\/mmbiz_jpg\/Rl1RuuhdstSfZa8EEljedAYcbtX3Ejpdl2et1tPAQ37bdicnxoVialDLCKKDcPBy8Iic0kCiaiaalXg3EbpNKoicrweQ\/0?wx_fmt=jpeg", 

"live_satus": 101,

"start_time": 1568128900,

"end_time": 1568131200,

"anchor_name": "李四",

"anchor_img": "http:\/\/mmbiz.qpic.cn\/mmbiz_jpg\/Rl1RuuhdstSfZa8EEljedAYcbtX3Ejpdlp0sf9YTorOzUbGF9Eib6ic54k9fX0xreAIt35HCeiakO04yCwymoKTjw\/0?wx_fmt=jpeg",

"goods":[            

{    "cover_img":"http://mmbiz.qpic.cn/mmbiz_png/FVribAGdErI2PmyST9ZM0JLbNM48I7TH2FlrwYOlnYqGaej8qKubG1EvK0QIkkwqvicrYTzVtjKmSZSeY5ianc3mw/0?wx_fmt=png",

      "url":"pages/index/index.html",

      "price":1100,

      "name":"fdgfgf"   

}  

],

 "total":1

}

返回字段:

  • name 房间名

  • roomid 房间id

注:需先在小程序MP后台创建直播房间,否则会报错(错误码1)

  • cover_img 封面图片url

  • start_time 直播计划开始时间,列表按照 start_time 降序排列

  • end_time 直播计划结束时间

  • anchor_name 主播名

  • goods 商品列表

  • live_status 直播状态   101: 直播中, 102: 未开始, 103: 已结束, 104: 禁播, 105: 暂停中, 106: 异常,107:已过期(直播状态解释可参考【获取直播状态】接口)

5.   【获取回放源视频】接口,仅供后台调用

接口规则:

该接口仅供商家后台调用,调用限额500次/天,此接口与上面【获取房间列表】接口共用500次/天限制,请合理分配调用频次)。

 

接口说明:

  • 该接口可在直播结束后拿到回放源视频(直播结束后大约10分钟会生成回放,源视频无评论等内容)

  • 拿到源视频后需要开发者自行开发、使用回放视频

  • 如果把源视频直接放在小程序上使用,需要小程序具备视频资质(具体资质要求请参考《小程序开发的类目服务》)

后续官方会直接提供无需开发的直播回放功能,敬请期待。

请求URL:

http://api.weixin.qq.com/wxa/business/getliveinfo?access_token= 

请求方式:

POST

请求示例:

Request

{

"action": "get_replay", // 获取回放

"room_id": 354, // 直播间id

"start": 0, // 起始拉取视频,start=0表示从第1个视频片段开始拉取

"limit": 10 // 每次拉取的个数上限,不要设置过大,建议100以内

}



Response

{

"live_replay": [  

{

      "expire_time": "2020-11-11T03:49:55Z", // 回放视频url过期时间

      "create_time": "2019-11-12T03:49:55Z", // 回放视频创建时间

      "media_url": "http://xxxxx.vod2.myqcloud.com/xxxxx/xxxxx/f0.mp4" // 回放视频   

} 

], 

"errcode": 0, 

"total": 1, 

"errmsg": "ok"

} // 一场直播可能会产生多个视频片段。

四、其他说明

1、直播间小程序码

说明:

  • 小程序引入直播组件后必须进行一次小程序发布上线,否则小程序码不生效

  • 在MP小程序直播后台创建好直播间后,可以直接拿到直播间分享小程序码,无需额外开发

如果商家在后台自己生成的直播间小程序码,需要做以下配置(否则直播间左上角返回键将失效):

在跳转进入直播间的路径加上 type=9 标识场景入口为小程序码:

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

2、商家公众号文章添加小程序卡片

说明:

商家在公众号文章中添加跳转进入直播间的小程序卡片时,需要做以下配置(否则直播间左上角返回键将失效):

在跳转进入直播间的路径加上 type=10 标识场景入口为小程序卡片:

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

3、商品详情页面需添加返回按钮

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

4、快速更新直播组件版本的方法

商家小程序对应的管理员微信号收到【公众平台安全助手】下发的直播组件版本更新的服务通知后,可点击通知进行快速发布,移动端即可快速更新小程序内直播组件的新版本,无需修改代码或重新提交审核。

服务通知如下图所示:

相关推荐:小程序开发教程

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
pixiv网页版官网登录与阅读指南_pixiv官网直达入口与在线访问方法
pixiv网页版官网登录与阅读指南_pixiv官网直达入口与在线访问方法

本专题系统整理pixiv网页版官网入口及登录访问方式,涵盖官网登录页面直达路径、在线阅读入口及快速进入方法说明,帮助用户高效找到pixiv官方网站,实现便捷、安全的网页端浏览与账号登录体验。

616

2026.02.13

微博网页版主页入口与登录指南_官方网页端快速访问方法
微博网页版主页入口与登录指南_官方网页端快速访问方法

本专题系统整理微博网页版官方入口及网页端登录方式,涵盖首页直达地址、账号登录流程与常见访问问题说明,帮助用户快速找到微博官网主页,实现便捷、安全的网页端登录与内容浏览体验。

194

2026.02.13

Flutter跨平台开发与状态管理实战
Flutter跨平台开发与状态管理实战

本专题围绕Flutter框架展开,系统讲解跨平台UI构建原理与状态管理方案。内容涵盖Widget生命周期、路由管理、Provider与Bloc状态管理模式、网络请求封装及性能优化技巧。通过实战项目演示,帮助开发者构建流畅、可维护的跨平台移动应用。

91

2026.02.13

TypeScript工程化开发与Vite构建优化实践
TypeScript工程化开发与Vite构建优化实践

本专题面向前端开发者,深入讲解 TypeScript 类型系统与大型项目结构设计方法,并结合 Vite 构建工具优化前端工程化流程。内容包括模块化设计、类型声明管理、代码分割、热更新原理以及构建性能调优。通过完整项目示例,帮助开发者提升代码可维护性与开发效率。

20

2026.02.13

Redis高可用架构与分布式缓存实战
Redis高可用架构与分布式缓存实战

本专题围绕 Redis 在高并发系统中的应用展开,系统讲解主从复制、哨兵机制、Cluster 集群模式及数据分片原理。内容涵盖缓存穿透与雪崩解决方案、分布式锁实现、热点数据优化及持久化策略。通过真实业务场景演示,帮助开发者构建高可用、可扩展的分布式缓存系统。

54

2026.02.13

c语言 数据类型
c语言 数据类型

本专题整合了c语言数据类型相关内容,阅读专题下面的文章了解更多详细内容。

29

2026.02.12

雨课堂网页版登录入口与使用指南_官方在线教学平台访问方法
雨课堂网页版登录入口与使用指南_官方在线教学平台访问方法

本专题系统整理雨课堂网页版官方入口及在线登录方式,涵盖账号登录流程、官方直连入口及平台访问方法说明,帮助师生用户快速进入雨课堂在线教学平台,实现便捷、高效的课程学习与教学管理体验。

15

2026.02.12

豆包AI网页版入口与智能创作指南_官方在线写作与图片生成使用方法
豆包AI网页版入口与智能创作指南_官方在线写作与图片生成使用方法

本专题汇总豆包AI官方网页版入口及在线使用方式,涵盖智能写作工具、图片生成体验入口和官网登录方法,帮助用户快速直达豆包AI平台,高效完成文本创作与AI生图任务,实现便捷智能创作体验。

598

2026.02.12

PostgreSQL性能优化与索引调优实战
PostgreSQL性能优化与索引调优实战

本专题面向后端开发与数据库工程师,深入讲解 PostgreSQL 查询优化原理与索引机制。内容包括执行计划分析、常见索引类型对比、慢查询优化策略、事务隔离级别以及高并发场景下的性能调优技巧。通过实战案例解析,帮助开发者提升数据库响应速度与系统稳定性。

56

2026.02.12

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

相关下载

更多

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Django 教程
Django 教程

共28课时 | 4.4万人学习

Excel 教程
Excel 教程

共162课时 | 17.9万人学习

Kotlin 教程
Kotlin 教程

共23课时 | 3.7万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号