Mini Program Live [Live Widget] | 微信开放文档

# I. Pendant function background

In order to reduce the development and configuration costs of merchants, the Mini Program live provides live pendant components, So that businesses can easily live the pendant (live room entrance) hanging on the current Mini Program page, for live between the convergence of Mini Programs scattered in other pages of trafficIn particular, the product details page such a regular page, the component will automatically match the relevant product live room.

# Second, pendant function explaination

Functional explanationThe default priority of the system is: in the live stream > Notice > Wonderful piece > Playback, can also be a separate statement to take only part of the state, with the state from the current time between the nearest live priority. Open the official collection of the live room will be selected, can avoid selection to the business test live room.

Be carefulImplementation of the pendant capability requires live component updates to the 1.3.0 And above.

Component use: merchants only need to introduce [live pendant] component Pendant, declare the following:

{
    "usingComponents": {
        "during": "plugin-private://wx2b03c6e691cd7370/components/during/during"
    }
}

Types of Mini Program pages that can be hung:

# 1. Single page

For a single page to hang live pendant (such as the Mini Program home page), without specifying parameters, the default hang the latest room.

The optional parameters are described below:

typeIndicates the type of live pendant displayed, type Number (default is 0, optional)
customParamsRepresents a custom parameter of type String (default empty, optional)
closePictureInPictureModeMeans to close the window switch, type Number (default is 0, optional)

let type = 0 // 0. Display one of the pendants for live broadcasts, previews, product explanations and playback1. Show only live widgets2. Widgets that show only previews3. The pendant that only shows the product explanation4. Show playback only widgets
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)
let closePictureInPictureMode = 0 // Whether to close the window
this.setData({
    type, // available 
    customParams, // available
    closePictureInPictureMode, // available
})

<during type="{{type}}" custom-params="{{customParams}}" close-picture-in-picture-mode="{{closePictureInPictureMode}}"></during>

# 2. Pages of the same type

For regular pages of the same type (such as the Mini Program product details page), you need to declare the page path url and the item key list parameters (here we will index the items configured by normal merchants in the live broadcast room, Hang the latest live room match for this product to the business details page.

The required and optional parameters are as follows:

urlRepresents the page path of type String, required
goodsKeyRepresents a list of product keys of type Array, required
typeIndicates the type of live pendant displayed, type Number (default is 0, optional)
customParamsRepresents a custom parameter of type String (default empty, optional)
closePictureInPictureModeMeans to close the window switch, type Number (default is 0, optional)

let url = 'pages/detail/detailgoods_id=1&pid=1', // Small Programmer Detail Path
let goodsKey = ['pid', 'sid'] // List of product keys (multiple keys supported), need to use our supplied api when adding commodities see section 4 The widget api interface passes in a list of product keys such as the example 'pid', 'sid'）
let type = 0 // 0. Display one of the pendants for live broadcasts, previews, product explanations and playback1. Show only live widgets2. Widgets that show only previews3. The pendant that only shows the product explanation4. Show playback only widgets
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)
let closePictureInPictureMode = 0 // Whether to close the window
this.setData({
    url, // Required
    goodsKey, // Required
    type, // available 
    customParams, // available
    closePictureInPictureMode, // available
})

<during url="{{url}}" goods-key="{{goodsKey}}" type="{{type}}" custom-params="{{customParams}}" close-picture-in-picture-mode="{{closePictureInPictureMode}}"></during>

# 3. Specify Room Type Page

For the page where you want to hang the specified room type, simply declare the room number parameter.

The required and optional parameters are as follows:

roomIdIndicates the live room number, type Number, required
typeIndicates the type of live pendant displayed, type Number (default is 0, optional)
customParamsRepresents a custom parameter of type String (default empty, optional)
closePictureInPictureModeMeans to close the window switch, type Number (default is 0, optional)

let roomId = 1, // Live room number
let type = 0 // 0. Display one of the pendants for live broadcasts, previews, product explanations and playback1. Show only live widgets2. Widgets that show only previews3. The pendant that only shows the product explanation4. Show playback only widgets
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)
let closePictureInPictureMode = 0 // Whether to close the window
this.setData({
    roomId, // Required
    type, // available 
    customParams, // available
    closePictureInPictureMode, // available
})

<during room-id="{{roomId}}" type="{{type}}" custom-params="{{customParams}}" close-picture-in-picture-mode="{{closePictureInPictureMode}}"></during>

# Three, pendant style

The current style only supports the specific location on the page defined by the business, style and color temporarily does not support modification, as below:

Live pendant

# Pendant api interface

# 1. Goods added and submitted for review New field: goodsKey

# Interface Dxplaination:

Since it is not necessary to specify the product ID corresponding to the page when quoting the live pendant on the business details page, And live show pendant search live show between the need to know the page corresponding to the goods, so reference live pendant need to have a unique mapping of goods methods. The business details page will have a unique url, so businesses in the addition of goods need to specify the url can only map this product.

GoodsKey is a json array whose contents are the url's parameter key. We will use the value of the url corresponding to the goodsKkey to uniquely map the product%path%_%value1%_%value2%_... ==> This page is for sale
for example"url":"pages/index/indexpid=111&sid=222","goodsKey": ["pid", "sid"]Then%path%_%value1%_%value2%_...forpages/index/index_111_222Wherepages/index/index_111_222The uniqueness of the business must be guaranteed.

# Call frequency

Call quota: 500/One day.

# Request method

POST

# Requested URL:

https://api.weixin.qq.com/wxaapi/broadcast/goods/addaccess_token=

# Example request parameter: json

{    
    "goodsInfo": {              
        "coverImgUrl": "ZuYVNKk9sMP1X4m7FXdcDCKra251KDZTjS502UTV7gwalgLZXcrOhG6oNYX6c7AR",        
        "name": "TIT cup,"      
        "priceType":1,   
        "price":99.5,
        // "price2": 150.5, Required if price Type is 2 or 3
        "url":"pages/index/indexpid=111&sid=222",
        "goodsKey": ["pid", "sid"]
    }
}

# 2. Live Pendant Settings Global Key

# Interface Dxplaination

If this global key is set and the goodsKey field is not specified when adding an item, we will use this global keys as the goods.Key for that item. Note that if the global key is set and an item with no goodsKey field specified is added, resetting a different global key will invalidate the previous mapping. To avoid mapping invalidation, it is recommended that the global key be set only once.

Be careful: key must be an array of strings

# Call frequency

Call quota: 500/One day.

# Request method

POST

# Requested URL:

https://api.weixin.qq.com/wxaapi/broadcast/goods/setkeyaccess_token=

# Example request parameter: json

{    
    "goodsKey": ["productId"， "sid"]
}

# Return field: json

{    
    "errcode": 0
}

# 3. Live Pendant Get Global Key

# Interface Dxplaination

View the current set of global keys.

# Call frequency

Call quota: 500/One day.

# Request method

GET

# Requested URL:

https://api.weixin.qq.com/wxaapi/broadcast/goods/Getaccess_token=

# Return field: json

{    
    "errcode": 0,
    "vendorGoodsKey": [
        "productId"，
        "sid"
    ]
}

# Mini Program Live [Live Widget]

# I. Pendant function background

# Second, pendant function explaination

# 1. Single page

# 2. Pages of the same type

# 3. Specify Room Type Page

# Three, pendant style

# Pendant api interface

# 1. Goods added and submitted for review New field: goodsKey

# Interface Dxplaination:

# Call frequency

# Request method

# Requested URL:

# Example request parameter: json

# 2. Live Pendant Settings Global Key

# Interface Dxplaination

# Call frequency

# Request method

# Requested URL:

# Example request parameter: json

# Return field: json

# 3. Live Pendant Get Global Key

# Interface Dxplaination

# Call frequency

# Request method

# Requested URL:

# Return field: json