# Mini Program Live

Mini Program live is WeChat official business tools. By calling the component, businesses can realize live interaction and closed loop sales in Mini Programs.

Follow the instructions below to access, in your Mini Program in the introduction of live components to achieve live functionality. If you encounter any problems during use, you canMini Program Live CommunityPost communication.

# How to Use the Information

# 1. [Live Streaming Components] How to Introduce

Version restrictions: WeChat client version 7.0.7 And above (base version 2.9.x and above supports the same layer rendering) can watch live and use live room functions, When the low version enters the live studio, it will prompt users to upgrade the WeChat client version (low version can only watch the live broadcast, can not use the live function).

Support for the introduction of [live components] in the main package or subpackage live-player-plugin Code package (note: live components are not included in the code package size), the project root directory of the app.json Reference, the sample code is as follows:

(1) Main Package Introduction

"plugins": {
    "live-player-plugin": {
        "version": "1.3.0", // Pay attention to fill in the latest version of the live component number, WeChat developer tool debugging can get the newest version number (copy please remove the notes)
        "provider": "wx2b03c6e691cd7370" // The live component appid must be filled in and the sample value is the live assembly appid (uncomment when copying)
    }
}

(2) Subcontract introduction

"subpackages": [
    {
        "plugins": {
            "live-player-plugin": {
                "version": "1.3.0", // Pay attention to the latest version of the live component, WeChat developer tools debugging can get the latest revision (copy please remove the comment)
                "provider": "wx2b03c6e691cd7370" // The live component appid must be filled in and the sample value is the live assembly appid (uncomment when copying)
            }
        }
    }
]

# 2. How to use the Live Stream Components

After the component code package configuration is introduced in step 1, you can directly jump to the live component page through the link address (that is, into the live room page) idroom id Through the following Get a list of live rooms API Get.

# The sample code is as follows:

(1) Use navigator Component Jump into Live Room

# index.js

let roomId = [Live room id] // Fill in the specific room number, you can get the live room list below API Obtain
let customParams = EncodeURIComponent(JSON.stringify({ path: 'pages/index/index', pid: 1 })) // Developers carry custom parameters (such as path and pid parameters in the example) on the live room page path, which can be obtained later when sharing card links and jumping to the business details page, See [Get Custom Parameters], [Bring Parameters from Live Room to Business Page] (Upper limit of 600 characters, more than part will be truncated)
this.setData({
    roomId,
    customParams
})

# index.wxml

<navigator url="plugin-private://wx2b03c6e691cd7370/pages/live-player-pluginroom_id={{roomId}}&custom_params={{customParams}}"></navigator>
// Which wx2b03c6e691cd7370 is the live component appid can not be modified

(2) Use navigateTo Skip to main content

# index.js

let roomId = [Live room id] // Fill in the specific room number, you can get the live room list below API Obtain
let customParams = EncodeURIComponent(JSON.stringify({ path: 'pages/index/index', pid: 1 })) // Developers carry custom parameters (such as path and pid parameters in the example) on the live room page path, which can be obtained later when sharing card links and jumping to the business details page, See [Get Custom Parameters], [Bring Parameters from Live Room to Business Page] (Upper limit of 600 characters, more than part will be truncated)
wx.navigateTo({
    url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-pluginroom_id=${roomId}&custom_params=${customParams}`
})
// Which wx2b03c6e691cd7370 is the live component appid can not be modified

This link can be used to jump to the webcast component page.live-player-plugin）。

# The sample renderings are as follows:

# Live Streaming Components and Interfaces

# [Component interface]

Through the main package/With the introduction of live streaming component in sub-packageing, developers can easily subscribe, access live status, access user openid and access to share card link parameters and other functions.

# [Server Interface]

The server interface includes live room interface and product management interface.

• The management interface of the live studio is the interface capability that the Mini Program provides to the developers to operate the live room in batch. Developers can create a batch of live room, get playback source video, get live room list.
• The product management interface is the interface capability that the Mini Program provides to the developer for batch operation of the live product. Developers can add, interrogate, delete and update products in bulk.