文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2023-08-20 18:05

关注

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;
相关文档 微信接入文档

进入直播间方式

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

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

使用 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}`})

服务端获取数据,提供给前端获取!
在这里插入图片描述
4、控制台创建直播

在这里插入图片描述
5、手机扫码打开

在这里插入图片描述

5、直播组将状态获取

小程序直播订阅组件能力

小程序端引入 live-player-pluginlet 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:已过期 

在这里插入图片描述




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


总结:

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

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




来源地址:https://blog.csdn.net/weixin_44873831/article/details/129706321

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     807人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     351人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     314人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     433人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     221人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯