Small program live

Small program live broadcast is WeChat officially provided business tools. By calling this component, merchants can close the loop of live interaction and merchandise sales in a small program.

Follow the instructions below to access live streaming by introducing live components into your small program. If you encounter problems during use, you can post an exchange in the community live on the small program.

Instructions for how to use it

1. How to introduce the Live Components

Version restrictions: WeChat client version 7.0.7 and above (base library version 2.9.x and above support the same layer rendering) can watch live and use the functions of the live broadcast room, the low version just entered the live broadcast room will prompt the user to upgrade the WeChat client version (the low version can only watch the live broadcast, can not use the function between the live broadcast).

Supports the introduction of live-player-plugin code packs within the main package or subcontracts (Note: live components do not count as code package volume), app.json references to the project root, as follows:

(1) The main package is introduced

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

(2) Subcontracted introduction

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

2. How to use the Live Components

Once the component code pack configuration is introduced in step 1, you can jump directly from the link address to the live component page (that is, to the live room page) and the link address needs to be brought with you a live room id, which can be obtained through the Live Room List API below.

The sample code is as follows:

(1) Use the Navigator component to jump into the live room

index.js

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

index.wxml

<navigator url="plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id={{roomId}}&custom_params={{customParams}}"></navigator>
// 其中wx2b03c6e691cd7370是直播组件appid不能修改

(2) Use the NavigateTo method to jump into the live room

index.js

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}`
})
// 其中wx2b03c6e691cd7370是直播组件appid不能修改

This link allows you to jump to the live component page (the current page portal is only open 'live-player-plugin').

The example effect diagram looks like this:

Live components and interfaces

Component Interface

By introducing live-streaming components into the main package/subcontract, developers can easily implement features such as subscriptions, get live status, get user openids, and get shared card link parameters.

Service-side interface

The service-side interface includes a live inter-stream interface and a commodity management interface.

• The live-streaming interface is the interface capability that a small program-live program provides to developers to perform bulk operations between live streams. Developers can create live streaming rooms in bulk, get playback source videos, get live-streaming room lists, and more.
• The commodity management interface is the interface capability that the small program live program provides to the developer to carry out bulk operation on the live product. Developers can add, adage, delete, and update items in bulk.