# 組件接口
| 名稱 | 功能說明 |
|---|---|
| 訂閱組件?subscribe | 訂閱組件可配置到小程序頁面上，可對一場未開播的直播進(jìn)行單次訂閱，開播時會自動下發(fā)開播提醒給用戶 |
| 掛件組件?pendant | 掛件可配置在小程序頁面上，用戶可通過掛件進(jìn)入當(dāng)前小程序?qū)?yīng)直播間 |
| 獲取單次訂閱狀態(tài)??getSubscribeStatus | 在直播組件版本 1.3.0 及以上版本通過該接口獲取直播間單次訂閱狀態(tài) |
| 獲取直播狀態(tài)??getLiveStatus | 首次獲取立馬返回直播狀態(tài)，往后間隔1分鐘或更慢的頻率去輪詢獲取直播狀態(tài) |
| 獲取用戶openid參數(shù)getOpenid | 在直播組件版本 1.3.0 及以上版本通過該接口獲取用戶openid參數(shù) |
| 獲取分享卡片鏈接參數(shù)getShareParams | 在直播組件版本 1.3.0 及以上版本通過該接口獲取以下參數(shù)，開發(fā)者可以根據(jù)這些參數(shù)建立用戶、直播間、商品之間的映射關(guān)系 |
| 直播小窗控制參數(shù)?close_picture_in_picture_mode | 通過參數(shù)設(shè)置是否關(guān)閉小窗 |
| 攜帶參數(shù)（?直播間到商詳頁面，?從群分享卡片返回直播間） | 直播組件版本 1.3.0 及以上支持?jǐn)y帶以下參數(shù)，可用這些參數(shù)建立用戶、直播間、商品之間的映射關(guān)系。 |
# 1. 【訂閱】組件（注：若要使用該組件，需在主包/分包先引入直播組件）
功能解釋：訂閱組件可配置到小程序頁面上，可對一場未開播的直播進(jìn)行單次訂閱，開播時會自動下發(fā)開播提醒給用戶，無需開發(fā)者額外開發(fā)
組件使用：如果需要在直播頁以外小程序其他頁面也有同樣的開播提醒的功能，可以引入【訂閱】組件 subscribe（開播前才會顯示，直播開始后自動消失該組件）；需在 page 頁面（如 home 頁面）的 home.json 引用訂閱組件，可通過 stopPropagation 屬性控制是否阻止事件冒泡（默認(rèn)不阻止事件冒泡，stopPropagation 為 false）。
# 示例代碼如下：
{
"usingComponents": {
"subscribe": "plugin-private://wx2b03c6e691cd7370/components/subscribe/subscribe"
}
}
然后便可在 home.wxml 里使用訂閱組件，其中直播房間 id 可通過下面 獲取直播房間列表 API 獲取。 同時，訂閱組件支持自定義顏色和大小以及攜帶自定義參數(shù)，參數(shù)說明如下：
- room-id：表示房間號，類型為 Number（默認(rèn)為0）
- width：表示寬度，類型為 Number（默認(rèn)為120）
- height：表示高度，類型為 Number（默認(rèn)為41）
- font-size：表示字號，類型為 Number（默認(rèn)為17）
- color：表示字體顏色，類型為 String（默認(rèn)為'FFFFFF'）
- background-color：表示背景色，類型為 String（默認(rèn)為'#6467F0'）
- custom-params：表示自定義參數(shù)，類型為 String（默認(rèn)為空）
- stop-propagation：表示阻止事件冒泡，類型為 Boolean（默認(rèn)為false，不阻止事件冒泡）
// 傳參
let roomId = 1
let width = 120
let height = 41
let fontSize = 17
let color = '#FFFFFF'
let backgroundColor = '#6467F0'
let customParams = encodeURIComponent(JSON.stringify({ path: 'pages/index/index', pid: 1 })) // 開發(fā)者在訂閱組件上攜帶自定義參數(shù)（如示例中的path和pid參數(shù)），后續(xù)可以在 App onShow 生命周期的 options 里獲?。ㄉ舷?00個字符，超過部分會被截斷）
this.setData({
width,
height,
fontSize,
color,
backgroundColor,
customParams
})
// 監(jiān)聽訂閱事件用于獲取訂閱狀態(tài)
onSubscribe(e) {
console.log('房間號：', e.detail.room_id)
console.log('訂閱用戶openid', e.detail.openid)
console.log('是否訂閱', e.detail.is_subscribe)
}
<subscribe
room-id="{{roomId}}"
width="{{width}}"
height="{{height}}"
font-size="{{fontSize}}"
color="{{color}}"
background-color="{{backgroundColor}}"
custom-params="{{customParams}}"
bindsubscribe="onSubscribe">
</subscribe>
# 2.【獲取單次訂閱狀態(tài)】接口（注：若要使用該接口，需在主包/分包先引入直播組件）
接口說明：獲取直播間單次訂閱狀態(tài)
調(diào)用方法：若要調(diào)用【獲取單次訂閱狀態(tài)】接口 getSubscribeStatus，需在小程序頁面頂部引用【直播組件】 live-player-plugin。
# 示例代碼如下：
let livePlayer = requirePlugin('live-player-plugin')
// 獲取直播間單次訂閱狀態(tài)
const roomId = xxx // 房間 id
livePlayer.getSubscribeStatus({ room_id: roomId })
.then(res => {
console.log('房間號：', res.room_id)
console.log('訂閱用戶openid', res.openid)
console.log('是否訂閱', res.is_subscribe)
}).catch(err => {
console.log('get subscribe status', err)
})
# 3. 【獲取直播狀態(tài)】接口（注：若要使用該接口，需在主包/分包先引入直播組件）
接口說明：首次獲取立馬返回直播狀態(tài)，往后間隔1分鐘或更慢的頻率去輪詢獲取直播狀態(tài)
# 直播狀態(tài)說明：
101 直播中：表示主播正常開播，直播正常的狀態(tài)
102 未開始：表示主播還未開播
103 已結(jié)束：表示在直播端點(diǎn)擊【結(jié)束】按鈕正常關(guān)閉的直播，或直播異常 15 分鐘后系統(tǒng)強(qiáng)制結(jié)束的直播
104 禁播：表示因違規(guī)受到運(yùn)營處罰被禁播
105 暫停中：表示在 MP 小程序后臺-控制臺內(nèi)操作暫停了直播
106 異常：表示主播離開、切后臺、斷網(wǎng)等情況，該直播被判定為異常狀態(tài)，15 分鐘內(nèi)恢復(fù)即可回到正常直播中的狀態(tài)；如果 15 分鐘后還未恢復(fù)，直播間會被系統(tǒng)強(qiáng)制結(jié)束直播
107 已過期：表示直播間一直未開播，且已達(dá)到在 MP 小程序后臺創(chuàng)建直播間時填寫的直播計劃結(jié)束時間，則該直播被判定為過期不能再開播
調(diào)用方法：若要調(diào)用【獲取直播狀態(tài)】接口 getLiveStatus，需在小程序頁面頂部引用【直播組件】 live-player-plugin。
# 示例代碼如下：
let livePlayer = requirePlugin('live-player-plugin')
// 首次獲取立馬返回直播狀態(tài)
const roomId = xxx // 房間 id
livePlayer.getLiveStatus({ room_id: roomId })
.then(res => {
// 101: 直播中, 102: 未開始, 103: 已結(jié)束, 104: 禁播, 105: 暫停中, 106: 異常，107：已過期
const liveStatus = res.liveStatus
console.log('get live status', liveStatus)
})
.catch(err => {
console.log('get live status', err)
})
// 往后間隔1分鐘或更慢的頻率去輪詢獲取直播狀態(tài)
setInterval(() => {
livePlayer.getLiveStatus({ room_id: roomId })
.then(res => {
// 101: 直播中, 102: 未開始, 103: 已結(jié)束, 104: 禁播, 105: 暫停中, 106: 異常，107：已過期
const liveStatus = res.liveStatus
console.log('get live status', liveStatus)
})
.catch(err => {
console.log('get live status', err)
})
}, 60000)
# 4. 【獲取用戶openid參數(shù)】接口（注：若要使用該接口，需在主包/分包先引入直播組件）
接口說明：在直播組件版本 1.3.0 及以上版本通過該接口獲取用戶openid參數(shù)。
調(diào)用方法：若要調(diào)用【獲取用戶openid參數(shù)】接口 getOpenid，需在小程序頁面頂部引用【直播組件】 live-player-plugin。
# 示例代碼如下：
let livePlayer = requirePlugin('live-player-plugin')
App({
onShow(options) {
livePlayer.getOpenid({ room_id: [直播房間id] }) // 該接口傳入?yún)?shù)為房間號
.then(res => {
console.log('get openid', res.openid) // 用戶openid
}).catch(err => {
console.log('get openid', err)
})
}
})
# 5. 【獲取分享卡片鏈接參數(shù)】接口（注：若要使用該接口，需在主包/分包先引入直播組件）
接口說明：由于基礎(chǔ)庫數(shù)據(jù)安全策略，通過 App onShow（需在主包引入直播組件）或者 Page onShow（需在分包引入直播組件）生命周期里的query無法獲取直播間分享卡片鏈接參數(shù)。在直播組件版本 1.3.0 及以上版本通過該接口獲取以下參數(shù)，開發(fā)者可以根據(jù)這些參數(shù)建立用戶、直播間、商品之間的映射關(guān)系。
- 分享卡片進(jìn)入直播間：房間號 room_id + 進(jìn)入者 openid + 分享者 share_openid + 開發(fā)者自定義參數(shù) custom_params
調(diào)用方法：若要調(diào)用【獲取分享卡片鏈接參數(shù)】接口 getShareParams，需在小程序頁面頂部引用【直播組件】 live-player-plugin。
# 示例代碼如下：
let livePlayer = requirePlugin('live-player-plugin')
App({
onShow(options) {
// 分享卡片/訂閱消息/掃碼二維碼/廣告/朋友圈等場景才能調(diào)用getShareParams接口獲取以下參數(shù)
const sceneList = [1007, 1008, 1014, 1044, 1045, 1046, 1047, 1048, 1049, 1073, 1154, 1155]
if (sceneList.includes(options.scene)) {
livePlayer.getShareParams()
.then(res => {
// 房間號
console.log('get room id', res.room_id)
// 用戶openid
console.log('get openid', res.openid)
// 分享者openid，分享卡片進(jìn)入場景才有
console.log('get share openid', res.share_openid)
// 開發(fā)者在跳轉(zhuǎn)進(jìn)入直播間頁面時，頁面路徑上攜帶的自定義參數(shù)，這里傳回給開發(fā)者
console.log('get custom params', res.custom_params)
}).catch(err => {
console.log('get share params', err)
})
}
}
})