uni-app开发小程序直播功能

1、微信后台申请插件开通
2、微信后台开通直播功能
3、代码中接入直播插件AppID
4、【直播组件】如何使用
5、直播组将状态获取

微信开发直播功能,需要企业账号;
需要申请直播功能和插件

1、微信后台申请插件开通

微信后台 登录微信后台
点击设置中的第三方设置 —> 添加插件 --> 点击小程序直播组件(获取AppID)


2、微信后台开通直播功能

点击进入直播后台系统

这里就是我们创建的直播功能区域

3、代码中接入直播插件AppID

支持在主包或分包内引入【直播组件】 live-player-plugin 代码包
(注:直播组件不计入代码包体积),项目根目录的 app.json 引用,示例代码如下:
uni-app开发中在pages.json引入

(1) 主包引入和"pages"同级

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

(2) 分包引入

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

4、【直播组件】如何使用

直接在直播控制台创建好直播间,拿到房间id;
相关文档 微信接入文档

进入直播间方式

1、使用 navigator 组件跳转进入直播间

// 1、使用 navigator 组件跳转进入直播间
<navigator url="plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id={{roomId}}&custom_params={{customParams}}"></navigator>

2、使用 navigateTo 方法跳转进入直播间

// 2、使用 navigateTo 方法跳转进入直播间
let roomId = [直播房间id] // 填写具体的房间号,可通过下面【获取直播房间列表】 API 获取
let customParams = encodeURIComponent(JSON.stringify({ path: 'pages/index/index', pid: 1 })) // 开发者在直播间页面路径上携带自定义参数(如示例中的path和pid参数),后续可以在分享卡片链接和跳转至商详页时获取,详见【获取自定义参数】、【直播间到商详页面携带参数】章节(上限600个字符,超过部分会被截断)
wx.navigateTo({url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${roomId}&custom_params=${customParams}`
})

3、服务端获取数据,提供给前端获取!

4、控制台创建直播


5、手机扫码打开

5、直播组将状态获取

小程序直播订阅组件能力

小程序端引入 live-player-plugin
let livePlayer = requirePlugin('live-player-plugin')
console.log(livePlayer,'livePlayer====事件')livePlayer.getOpenid(e) // 获取用户openid参数
livePlayer.getShareParams(e) // 获取分享卡片链接参数
livePlayer.getSubscribeStatus(e) // 获取单次订阅状态
livePlayer.getLiveStatus(e) // 获取直播状态
// 往后间隔1分钟或更慢的频率去轮询获取直播状态
// 101: 直播中, 102: 未开始, 103: 已结束, 104:禁播, 105: 暂停中, 106: 异常,107:已过期

到这里已经完成的小程序直播功能,是不是很简单!
如需更深入的了解小程序相关问题,欢迎留言一起探讨!

总结:

前端路上 | 所知甚少,唯善学。
各位小伙伴有什么疑问,欢迎留言探讨。

— 关注我:前端路上不迷路 —

uni-app开发 小程序直播功能相关推荐

  1. 最详细的【微信小程序+阿里云Web服务】开发部署指引(十一):开发小程序设置功能

    文章目录 前言 一.功能说明 二.设置界面代码实现 1.创建界面Page 2.WXML 3.JS 4.WXSS 三.参数控制逻辑代码实现 1.自动跳转卡片 2.自动播放声音 专题文章链接 前言 案例的 ...

  2. 微信小程序直播功能来了,然后呢?

    这是小胖的第129篇文章. 也是小胖2020年100文章的第04篇. « 腾讯小程序直播功能,弄啥来? » 很荣幸2月14日自家的小程序收到了腾讯小程序直播功能的内测邀请,今天闲下来把这个功能的前后端 ...

  3. 如何开通微信小程序直播功能?

    CRMEB商城系统 v3.2小程序商城已经上线直播功能! 1:我要怎样才能接入小程序直播? 首先,你必须要有一个自己的小程序:其次,你的小程序接收到了微信的公测邀请. 2:我在哪里可以查看是否接受到公 ...

  4. 便利店小程序需要服务器吗,便利店开发小程序的功能

    随着小程序的不断优化和完善,小程序的场景也越来越细分化,使用范围非常广泛.现在不论是出行.餐饮.企业.购物等都开始入驻小程序,特别是对于一些便利店来说,开发小程序是会有不少功能的,那么便利店开发小程序 ...

  5. (精华)2020年8月7日 微信小程序 直播功能的实现

    一:小程序代码端 小程序直播使用小程序组件 live-pusher 组件和live-player组件 首先开通直播权限 小程序开发工具内进行推流拉流都不会成功,所以需要使用两个手机进行推拉流测试: 1 ...

  6. 三步教你开通微信小程序直播功能

    3月8日,微信官方举办了 "女神节"微信小程序直播的活动,联合近千品牌小程序直播首秀,当天,每个用户平均观看直播时间超过了8分钟,人均点赞数达到了280次,分享次数最高的直播间达到 ...

  7. 求职兼职招聘类APP开发小程序开发的一些创新功能

    企业的发展需要人才,求职者也是需要施展才华的平台,为实现两者之间更好的沟通交流需求,类似智能招聘APP软件这些平台就出现在现在移动互联网时代中.智能招聘APP开发可以更好地促进就业信息需求畅通,为就业 ...

  8. 腾讯升级视频号小程序直播功能,腾讯持续推广直播的底气是这项叫视立方(MLVB)的技术

    微信作为腾讯集团中两大私域流量池的其中一个,近期又再一次升级,或者说完善了视频号的功能,让直播功能渗透进更多的观众中.这项更新的具体内容就是允许主播在直播间中直接向观众推送5类链接气泡,包括:直播预告 ...

  9. 打车app开发小程序软件定制需要这6个流程

    说起打车APP开发的兴起,不得不谈最近的滴滴事件,也让这个昔日打车霸主逐渐没落,令人唏嘘不已.随即而来的是各个打车app之间的无烟战场,希望能抢占滴滴所空出的市场份额.在我们的日常生活中,网约车似乎已 ...

最新文章

  1. HTML5 本地文件操作之FileSystemAPI整理(二)
  2. Tomcat-上传文件路径填坑
  3. linux 下 `dirname $0` 脚本文件放置的目录
  4. java中为什么需要常量和变量的区别_Java中的变量和常量
  5. andriod sdk哪些是必须下载安装的包
  6. java 泛型去重_泛型,list集合去重
  7. python-set
  8. 猎头是怎么找到合适候选人的?
  9. [转]汽车ARM攒机指南
  10. Pathon基础篇数据类型之——数值、字符串与列表内容
  11. python知识图谱实战_知识图谱实战
  12. 溶剂可及性(一):基本概念
  13. android 局部tab页,安卓TabLayout+ViewPager实现切页
  14. 基于单片机的计算器系统设计(#0404)
  15. HTML期末大作业: 学生个人网页设计作品 学生个人网页模板 简单个人主页成品 个人网页制作 HTML学生个人网站作业设计代做
  16. java线程切换消耗时间_cpu性能消耗分析
  17. Symbian 进行最后一次系统升级,塞班时代结束
  18. 检测字符串是否包含特殊字符
  19. js操作表格数据,DOM实现数据动态增删查改
  20. IntelliJ IDEA 没有Tomcat 也没有Application Servers的解决办法

热门文章

  1. 2022-2028年中国美容仪行业发展战略规划及投资机会预测报告
  2. 关于session保存和提交事务commit
  3. squid代理服务器笔记
  4. 非ipad/安卓协议的微信开发sdk接口
  5. 实现矩阵连乘积(动态规划)
  6. 解决惠普电脑WLAN消失
  7. 爬取今日头条街拍图的一次教训
  8. 【TA-霜狼_may-《百人计划》】图形3.6 纹理压缩——包体瘦身术
  9. 【计算机毕业设计】040社区医院信息平台
  10. 您了解这些人工智能独角兽公司吗