一、導(dǎo)語

微信為小程式開發(fā)者提供了直播元件，透過呼叫該元件，商家可以在小程式中實(shí)現(xiàn)直播功能。

（學(xué)習(xí)影片分享：程式設(shè)計(jì)影片）

下面我們來介紹如何在小程式中引入直播元件。

二、使用方法說明

1.??【直播元件】如何介紹

版本限制：

微信用戶端版本7.0.7 以上（基礎(chǔ)庫版本2.9.x 以上支援同層渲染）可以觀看直播及使用直播間的功能，低版本剛進(jìn)入直播間時(shí)會(huì)提示用戶升級(jí)微信用戶端版本（低版本只能觀看直播，無法使用直播間的功能）。

在分包內(nèi)引入【直播元件】live-player-plugin程式碼包，專案根目錄的app.json 引用，範(fàn)例程式碼如下：

{

??"subpackages":?[

????{

??????"root":?"packageA",

??????"pages":?[

????????"pages/home/home"

??????],

??????"plugins":?{

????????"live-player-plugin":?{?????????

"version":?"1.0.0",?//?填寫該直播組件最新版本號(hào)，微信開發(fā)者工具調(diào)試時(shí)可獲取最新版本號(hào)

??????????"provider":?"wx2b03c6e691cd7370"?//?必須填該直播組件appid，該示例值即為直播組件appid

????????}

??????}

????}

??]

}

2.?? 【直播元件】如何使用

依照步驟1的方法把元件代碼包配置引入後，即可直接透過連結(jié)位址跳到直播元件頁面（即為進(jìn)直播間頁面）連結(jié)位址需要帶上直播房間id；房間id可透過下方【取得直播房間清單】API獲取，範(fàn)例程式碼如下：
?

<navigator url="plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=[直播房間id]">

??Go?to?Live?Player?page

</navigator>

透過此連結(jié)可跳到直播元件頁面（目前頁面入口僅開放'live-player-plugin '）。

範(fàn)例效果圖如下：

?

三、其他相關(guān)元件、介面與攜帶參數(shù)

●????訂閱組件：subscribe

●????取得直播狀態(tài)API：getLiveStatus

●????直播間到商詳頁攜帶參數(shù)：room_id

●????從群組分享卡返回直播間時(shí)攜帶參數(shù)卡返回直播間時(shí)攜帶參數(shù)：shareTicket

●????後臺(tái)取得直播房間清單API

●????後臺(tái)取得回放來源視訊API

#：以上2個(gè)後臺(tái)呼叫的介面總上限500次/天

1.?? 【訂閱】組件

功能解釋：

用戶進(jìn)入直播間內(nèi)，可對(duì)一場未開播的直播進(jìn)行單次訂閱，開播時(shí)直播組件會(huì)自動(dòng)下發(fā)開播提醒給用戶，無需開發(fā)者額外開發(fā)

元件使用：

如果需要在直播元件頁以外小程式其他頁面也有同樣的開播提醒的功能，可以引入【訂閱】元件subscribe；需在page頁面（如home頁面）的home.json 引用訂閱元件，範(fàn)例程式碼如下：

{

??"usingComponents":?{

????"subscribe":?"plugin-private://wx2b03c6e691cd7370/components/subscribe/subscribe"

??}

}

然後便可在home.wxml裡使用訂閱元件，其中直播房間id可通過；房間id可透過下方【取得直播房間清單】API取得

<subscribe room-id="[直播房間id]"></subscribe>

2.?? 【取得直播狀態(tài)】介面

介面說明：

首次取得立刻返回直播狀態(tài)，往後間隔1分鐘或更慢的頻率去輪詢獲取直播狀態(tài)；

直播狀態(tài)說明：

l? 101直播中：表示主播正常開播，直播正常的狀態(tài)；

l? 102未開始：表示主播尚未開播；

l? 103已結(jié)束：表示在直播端點(diǎn)擊【結(jié)束】按鈕正常關(guān)閉的直播，或直播異常15分鐘後系統(tǒng)強(qiáng)制結(jié)束的直播；

l? 104禁播：表示因違規(guī)受到營運(yùn)處罰被禁播；

l? 105暫停：表示在MP小程式後臺(tái)-控制臺(tái)內(nèi)操作暫停了直播；

l? 106異常：表示主播離開、切後臺(tái)、斷網(wǎng)等情況，該直播被判定為異常狀態(tài)，15分鐘內(nèi)恢復(fù)即可回到正常直播中的狀態(tài)；如果15分鐘後還未恢復(fù)，直播間會(huì)被系統(tǒng)強(qiáng)制結(jié)束直播；

l? 107已過期：表示直播間一直未開播，且已達(dá)到在MP小程序後臺(tái)創(chuàng)建直播間時(shí)填寫的直播計(jì)劃結(jié)束時(shí)間，則此直播被判定為過期不能再開播；

呼叫方法：

若要呼叫【取得直播狀態(tài)】介面getLiveStatus，需在小程式頁面頂端引用【直播元件】live-player -plugin，範(fàn)例程式碼如下：

let livePlayer = requirePlugin('live-player-plugin') // 引入獲取直播狀態(tài)介面

// 第一次取得立刻回到直播狀態(tài)，往後間隔1分鐘或更慢的頻率去輪詢獲取直播狀態(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

??})

??.catch(err?=>

{

????console.log(err)

??})

3.?? 攜帶參數(shù)

版本限制：

直播元件版本1.0.1以上支援?dāng)y帶以下參數(shù)

• shareTicket：分享直播間卡片到微信群，點(diǎn)擊此卡片後可以在ApponShow 裡取得該參數(shù)

• room_id：點(diǎn)擊直播組件頁面裡的貨架商品跳到商家小程式的商品詳情頁面時(shí)，會(huì)帶上房間號(hào)碼參數(shù)

4.?? 【取得直播房間清單】接口，僅供後臺(tái)呼叫

介面規(guī)則：

該接口僅供商家后臺(tái)調(diào)用，調(diào)用限額500次/天，建議開發(fā)者自己做緩存（此接口與下面【獲取回放視頻】接口共用500次/天限制，請合理分配調(diào)用頻次）。

請求URL：

http://api.weixin.qq.com/wxa/business/getliveinfo?access_token=?

請求方式：

POST

請求示例：

Request

{

?"start":?0,?//?起始拉取房間，start=0表示從第1個(gè)房間開始拉取

?"limit":?10?//?每次拉取的個(gè)數(shù)上限，不要設(shè)置過大，建議100以內(nèi)

}



Response

{

?"errcode":?0,?//?errcode=0代表成功；errcode=1代表未創(chuàng)建直播房間

?"errmsg":?"ok",

?"room_info":?[{

"name":?"直播房間名",?

"roomid":?1,

"cover_img":?"http:\/\/mmbiz.qpic.cn\/mmbiz_jpg\/Rl1RuuhdstSfZa8EEljedAYcbtX3Ejpdl2et1tPAQ37bdicnxoVialDLCKKDcPBy8Iic0kCiaiaalXg3EbpNKoicrweQ\/0?wx_fmt=jpeg",?

"live_satus":?101,

"start_time":?1568128900,

"end_time":?1568131200,

"anchor_name":?"李四",

"anchor_img":?"http:\/\/mmbiz.qpic.cn\/mmbiz_jpg\/Rl1RuuhdstSfZa8EEljedAYcbtX3Ejpdlp0sf9YTorOzUbGF9Eib6ic54k9fX0xreAIt35HCeiakO04yCwymoKTjw\/0?wx_fmt=jpeg",

"goods":[????????????

{????"cover_img":"http://mmbiz.qpic.cn/mmbiz_png/FVribAGdErI2PmyST9ZM0JLbNM48I7TH2FlrwYOlnYqGaej8qKubG1EvK0QIkkwqvicrYTzVtjKmSZSeY5ianc3mw/0?wx_fmt=png",

??????"url":"pages/index/index.html",

??????"price":1100,

??????"name":"fdgfgf"???

}??

],

?"total":1

}

返回字段：

• name 房間名

• roomid 房間id

注：需先在小程序MP后臺(tái)創(chuàng)建直播房間，否則會(huì)報(bào)錯(cuò)（錯(cuò)誤碼1）

• cover_img 封面圖片url

• start_time 直播計(jì)劃開始時(shí)間，列表按照 start_time 降序排列

• end_time 直播計(jì)劃結(jié)束時(shí)間

• anchor_name 主播名

• goods 商品列表

• live_status 直播狀態(tài)?? 101: 直播中, 102: 未開始, 103: 已結(jié)束, 104: 禁播, 105: 暫停中, 106: 異常,107:已過期（直播狀態(tài)解釋可參考【獲取直播狀態(tài)】接口）

5.?? 【獲取回放源視頻】接口，僅供后臺(tái)調(diào)用

接口規(guī)則：

該接口僅供商家后臺(tái)調(diào)用，調(diào)用限額500次/天，此接口與上面【獲取房間列表】接口共用500次/天限制，請合理分配調(diào)用頻次）。

?

接口說明：

• 該接口可在直播結(jié)束后拿到回放源視頻（直播結(jié)束后大約10分鐘會(huì)生成回放，源視頻無評(píng)論等內(nèi)容）

• 拿到源視頻后需要開發(fā)者自行開發(fā)、使用回放視頻

• 如果把源視頻直接放在小程序上使用，需要小程序具備視頻資質(zhì)（具體資質(zhì)要求請參考《小程序開發(fā)的類目服務(wù)》）

后續(xù)官方會(huì)直接提供無需開發(fā)的直播回放功能，敬請期待。

請求URL：

http://api.weixin.qq.com/wxa/business/getliveinfo?access_token=?

請求方式：

POST

請求示例：

Request

{

"action":?"get_replay",?//?獲取回放

"room_id":?354,?//?直播間id

"start":?0,?//?起始拉取視頻，start=0表示從第1個(gè)視頻片段開始拉取

"limit":?10?//?每次拉取的個(gè)數(shù)上限，不要設(shè)置過大，建議100以內(nèi)

}



Response

{

"live_replay":?[??

{

??????"expire_time":?"2020-11-11T03:49:55Z",?//?回放視頻url過期時(shí)間

??????"create_time":?"2019-11-12T03:49:55Z",?//?回放視頻創(chuàng)建時(shí)間

??????"media_url":?"http://xxxxx.vod2.myqcloud.com/xxxxx/xxxxx/f0.mp4"?//?回放視頻???

}?

],?

"errcode":?0,?

"total":?1,?

"errmsg":?"ok"

}?//?一場直播可能會(huì)產(chǎn)生多個(gè)視頻片段。

四、其他說明

1、直播間小程序碼

說明：

• 小程序引入直播組件后必須進(jìn)行一次小程序發(fā)布上線，否則小程序碼不生效

• 在MP小程序直播后臺(tái)創(chuàng)建好直播間后，可以直接拿到直播間分享小程序碼，無需額外開發(fā)

如果商家在后臺(tái)自己生成的直播間小程序碼，需要做以下配置（否則直播間左上角返回鍵將失效）：

在跳轉(zhuǎn)進(jìn)入直播間的路徑加上 type=9 標(biāo)識(shí)場景入口為小程序碼：

"plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=[直播房間id]&type=9"

2、商家公眾號(hào)文章添加小程序卡片

說明：

商家在公眾號(hào)文章中添加跳轉(zhuǎn)進(jìn)入直播間的小程序卡片時(shí)，需要做以下配置（否則直播間左上角返回鍵將失效）：

在跳轉(zhuǎn)進(jìn)入直播間的路徑加上 type=10 標(biāo)識(shí)場景入口為小程序卡片：

"plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=[直播房間id]&type=10"

3、商品詳情頁面需添加返回按鈕

點(diǎn)擊直播組件頁面里的貨架商品跳轉(zhuǎn)到商家小程序的商品詳情頁面后，為了避免用戶無法再返回直播間，商家需在小程序商品詳情頁面左上角加上返回按鈕，用于返回到直播組件頁面。

4、快速更新直播組件版本的方法

商家小程序?qū)?yīng)的管理員微信號(hào)收到【公眾平臺(tái)安全助手】下發(fā)的直播組件版本更新的服務(wù)通知后，可點(diǎn)擊通知進(jìn)行快速發(fā)布，移動(dòng)端即可快速更新小程序內(nèi)直播組件的新版本，無需修改代碼或重新提交審核。

服務(wù)通知如下圖所示：

相關(guān)推薦：小程序開發(fā)教程

以上是透過直播組件實(shí)現(xiàn)小程式直播功能的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！