Mini Program Live Development Tutorial

Live broadcasting is a hot trend recently, and many Internet experts have also achieved their first pot of gold through live broadcasting. The applet also provides live broadcasting capabilities for this purpose, which is convenient for developers to quickly access. Let's see how to implement a live broadcast Mini program live broadcast function.

First of all, you need to have a small program account. If you have not registered, you can go to the WeChat public platform (mp.weixin.qq.com) to register a small program. After the registration is completed, you can apply for the activation of the live broadcast function. It is worth noting that the activation of the live broadcast function There are some restrictions:

① Belongs to the open category of Mini Programs. For details, see "WeChat Mini Programs Live Function Access Category Requirements"

② There has been no serious violation of regulations in the mini-program under the main body in the past six months;

③The Mini Program has made payment within the past 90 days;

Note: If the conditions are not met, please continue to operate the Mini Program to meet the opening conditions. The public beta will be covered T+2 days after the conditions are met.

After meeting the conditions, you can apply for opening

After activation, the client applet needs to introduce the live plug-in in app.json:

"plugins": {
    "live-player-plugin": {
        "version": "1.3.0", 
        "provider": "wx2b03c6e691cd7370" 
    }
}

After the introduction is complete, the applet can enter the live broadcast room only by jumping the page

Navigator component jump method:

index.js

let roomId = [直播房间id] 
let customParams = encodeURIComponent(JSON.stringify({ path: 'pages/index/index', pid: 1 })) 
this.setData({
    roomId,
    customParams
})


index.wxml

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

The navigateTo method jumps:

let roomId = [直播房间id]
let customParams = encodeURIComponent(JSON.stringify({ path: 'pages/index/index', pid: 1 })) 
wx.navigateTo({
    url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${roomId}&custom_params=${customParams}`
})

In this way, the front end can complete the development

From the front-end code, you can see that the corresponding roomId is required to jump to the corresponding live broadcast room, so how to obtain the roomId, which needs to be operated through the server interface provided by the applet or cloud development

The Mini Program officially provides several API interfaces for developers to call ( [Mini Program Live] Live Room Management Interface | WeChat Open Documentation (qq.com) ), covering interfaces such as live room creation, editing and deletion, and product editing. To meet the basic needs of live broadcast, we only need to carry out interface docking and business development according to the documentation to complete the development of the small program live broadcast.

Finally, how does the anchor live broadcast? In this way, a small program on the anchor side developed by WeChat is required. You only need to search for the small program in WeChat: the small program can be used for live broadcasting. The program is broadcast live.

The above is the whole process of the live broadcast of the mini program. If there is anything you don’t understand, please consult me.

Mini Program Live Development Tutorial

Guess you like