This article teaches you how to develop the live broadcast function of the mini program in uni-app and easily create an exclusive live broadcast room!

1. WeChat background application plug-in activation

WeChat backendLog in to WeChat backend
Click on the third-party settings in the settings—> Add plug-in—> Click on the mini program live broadcast component ( Get AppID)

fae32202311281014252851.png

64dd4202311281015057557.png

7b058202311281015413723.png

2. Activate the live broadcast function in the WeChat backend

Click to enter the live broadcast background system

ff636202311281016392015.png

This is the live broadcast function area we created

be72d202311281017211255.png

3. Access the live broadcast plug-in AppID in the code

Supports the introduction of [live broadcast component] live-player-plugin code package in the main package or sub-package
(Note: Live broadcast components are not included in the code package volume), project root directory The app.json reference, the sample code is as follows:
Introduced in pages.json during uni-app development

(1) The main package is introduced at the same level as "pages"

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

Copy

(2) Subcontracting introduction

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

Copy

4. How to use [Live Streaming Component]

Create the live broadcast room directly in the live broadcast console and get the room ID;
Related documents WeChat access document

Enter the live broadcast room method

1. Use the navigator component to jump into the live broadcast room

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

Copy

2. Use the navigateTo method to jump to the live broadcast room

// 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}`
})

Copy

3. The server obtains data and provides it to the front end for acquisition!

644ae202311281019345395.png

4. Create live broadcast on the console

709c6202311281020039672.png

5. Scan the QR code with your mobile phone to open

e5773202311281020377955.png

5. The live broadcast group will obtain the status

Mini program live streaming subscription component capabilities

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

Copy

a654f202311281021316475.png

Guess you like

Origin blog.csdn.net/hudie765/article/details/134807725