技術標籤：微信小程式浮動按鈕

小程式插入直播功能

我們的商城小程式被邀請開通了直播功能。直播功能還是很有吸引力的，可以在小程式內流暢完成購買交易閉環，提升轉化率；所以開發工作立馬安排上了。

小程式直播元件包括觀眾端、主播端及後臺管理端，其中觀眾端提供拉流、實時互動、訂閱提醒、商品購買等能力，主播端提供開播、推流、音視訊效果優化等能力，後臺管理端則負責直播房間、商品貨架以及營銷活動配置等。

所以，大部分的工作其實是管理和運營來做，小程式上只要做好直播入口的跳轉進入。

直播功能的接入，微信這次做的不錯。接入的開發工作按照文件很容易就完成了。這裡記錄下我接入的過程，對照微信官方的文件就更明白了。

image

元件引入

使用分包引入直播元件,在專案根目錄的 app.json 新增如下引用

{  "subpackages": [    {      "root": "zhibo",      "pages": [        "list/list"      ],      "plugins": {        "live-player-plugin": {          "version": "1.0.0",          "provider": "wx2b03c6e691cd7370"        }      }    }  ]}
 

直播室列表頁面

然後新建上面的zhibo/list/list頁面。作為直播室列表頁

直播室頁面直播1 

這裡的room_id是你自己的直播室id。獲取方式是呼叫你自己的後臺獲取。

你自己的後臺需要根據token得到直播室的列表資訊。方法如下：

請求URL：http://api.weixin.qq.com/wxa/business/getliveinfo?access_token=請求方式：POST

完成了

是不是很驚奇。這就完事了。測試一下：

image

image

這就進來了。坐等開播了。

注意事項

1. 直播功能對基礎庫版本有要求，必須是2.9以上。微信客戶端必須是7.0.7以上。低版本剛進入直播間時會提示使用者升級微信客戶端版本(低版本只能觀看直播，無法使用直播間的功能)。

image

除錯時注意選擇基礎庫版本。

2. 商品詳情頁面需新增返回按鈕點選直播元件頁面裡的貨架商品跳轉到商家小程式的商品詳情頁面後， 為了避免使用者無法再返回直播間，商家需在小程式商品詳情頁面左上角加上返回按鈕，用於返回到直播元件頁面。