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)
2. Activate the live broadcast function in the WeChat backend
Click to enter the live broadcast background system
This is the live broadcast function area we created
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!
4. Create live broadcast on the console
5. Scan the QR code with your mobile phone to open
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