美文网首页
【uni-app】引入微信小程序直播组件(live-player

【uni-app】引入微信小程序直播组件(live-player

作者: 胖胖爱吃鱼啊 | 来源:发表于2020-12-01 11:15 被阅读0次

效果图

3个模块(图片来自微信平台) 主播端 - 在小程序中创建直播间 观众端

开通小程序直播的条件

1.属于小程序直播开放类目,具体见《微信小程序直播功能准入要求》
2.主体下小程序近半年没有严重违规;
3.小程序近90天内,有过支付行为;


一、登录微信小程序后台开启直播功能

申请开通

\color{red}{* 注:开通成功后再点进去就是创建直播间(成员管理)}

创建直播间

二、在项目中引入直播组件

1.引入
 在pages.json中引入
 支持在主包或分包内引入【直播组件】 live-player-plugin 代码包,不要改变provider的appId

(1) 主包引入

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

(2) or分包引入

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

2.观众端使用
 在需要进入直播间的页面写个入口
 不要改变链接地址:plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin;
 不要改变provider的appId(是直播组件appid)

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

<navigator url="plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id={{roomId}}&custom_params={{customParams}}"></navigator>

(2) or使用 navigateTo 方法跳转进入直播间

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

3.主播端使用
(1) 在直播控制台中可扫码进入

直播控制台

(2) 创建直播间
 有两种方法:在小程序创建,在控制台创建


在小程序中创建
在控制台中创建

相关官方地址:

小程序后台:https://mp.weixin.qq.com/
小程序直播组件使用:https://developers.weixin.qq.com/miniprogram/dev/framework/liveplayer/live-player-plugin.html
创建一个小程序:https://developers.weixin.qq.com/miniprogram/introduction
小程序直播产品使用指南(必看)https://docs.qq.com/slide/DSkN3dXRoam5ycGFV

相关文章

网友评论

      本文标题:【uni-app】引入微信小程序直播组件(live-player

      本文链接:https://www.haomeiwen.com/subject/jlhdwktx.html