微信小程序 小程序直播·接入說(shuō)明

小程序直播

小程序直播是微信官方提供的商家經(jīng)營(yíng)工具。通過(guò)調(diào)用該組件，商家可以在小程序中實(shí)現(xiàn)直播互動(dòng)與商品銷售閉環(huán)。

按照下面的使用說(shuō)明接入，在你的小程序中引入直播組件即可實(shí)現(xiàn)直播功能。使用過(guò)程中如遇到問(wèn)題，可在小程序直播社區(qū)發(fā)帖交流。

使用方法說(shuō)明

1. 【直播組件】如何引入

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

支持在主包或分包內(nèi)引入【直播組件】 live-player-plugin 代碼包（注：直播組件不計(jì)入代碼包體積），項(xiàng)目根目錄的 app.json 引用，示例代碼如下：

(1) 主包引入

"plugins": {
    "live-player-plugin": {
        "version": "1.1.4", // 注意填寫(xiě)該直播組件最新版本號(hào)，微信開(kāi)發(fā)者工具調(diào)試時(shí)可獲取最新版本號(hào)（復(fù)制時(shí)請(qǐng)去掉注釋）
        "provider": "wx2b03c6e691cd7370" // 必須填該直播組件appid，該示例值即為直播組件appid（復(fù)制時(shí)請(qǐng)去掉注釋）
    }
}

(2) 分包引入

"subpackages": [
    {
        "plugins": {
            "live-player-plugin": {
                "version": "1.1.4", // 注意該直播組件最新版本號(hào)，微信開(kāi)發(fā)者工具調(diào)試時(shí)可獲取最新版本號(hào)（復(fù)制時(shí)請(qǐng)去掉注釋）
                "provider": "wx2b03c6e691cd7370" // 必須填該直播組件appid，該示例值即為直播組件appid（復(fù)制時(shí)請(qǐng)去掉注釋）
            }
        }
    }
]

2. 【直播組件】如何使用

按第1步的方法把組件代碼包配置引入后，即可直接通過(guò)鏈接地址跳轉(zhuǎn)到直播組件頁(yè)面（即為進(jìn)直播間頁(yè)面）鏈接地址需要帶上直播房間 id；房間 id 可通過(guò)下面 獲取直播房間列表 API 獲取。

示例代碼如下：

(1) 使用 navigator 組件跳轉(zhuǎn)進(jìn)入直播間

index.js

let roomId = [直播房間id] // 填寫(xiě)具體的房間號(hào)，可通過(guò)下面【獲取直播房間列表】 API 獲取
let customParams = encodeURIComponent(JSON.stringify({ path: 'pages/index/index', pid: 1 })) // 開(kāi)發(fā)者在直播間頁(yè)面路徑上攜帶自定義參數(shù)（如示例中的path和pid參數(shù)），后續(xù)可以在分享卡片鏈接和跳轉(zhuǎn)至商詳頁(yè)時(shí)獲取，詳見(jiàn)【獲取自定義參數(shù)】、【直播間到商詳頁(yè)面攜帶參數(shù)】章節(jié)（上限600個(gè)字符，超過(guò)部分會(huì)被截?cái)啵?this.setData({
    roomId,
    customParams
})

index.wxml

<navigator url="plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id={{roomId}}&custom_params={{customParams}}"></navigator>
// 其中wx2b03c6e691cd7370是直播組件appid不能修改

(2) 使用 navigateTo 方法跳轉(zhuǎn)進(jìn)入直播間

index.js

let roomId = [直播房間id] // 填寫(xiě)具體的房間號(hào)，可通過(guò)下面【獲取直播房間列表】 API 獲取
let customParams = encodeURIComponent(JSON.stringify({ path: 'pages/index/index', pid: 1 })) // 開(kāi)發(fā)者在直播間頁(yè)面路徑上攜帶自定義參數(shù)（如示例中的path和pid參數(shù)），后續(xù)可以在分享卡片鏈接和跳轉(zhuǎn)至商詳頁(yè)時(shí)獲取，詳見(jiàn)【獲取自定義參數(shù)】、【直播間到商詳頁(yè)面攜帶參數(shù)】章節(jié)（上限600個(gè)字符，超過(guò)部分會(huì)被截?cái)啵?wx.navigateTo({
    url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${roomId}&custom_params=${customParams}`
})
// 其中wx2b03c6e691cd7370是直播組件appid不能修改

通過(guò)該鏈接可跳轉(zhuǎn)到直播組件頁(yè)面（當(dāng)前頁(yè)面入口僅開(kāi)放‘live-player-plugin’）。

示例效果圖如下：

直播組件和接口

【組件接口】

通過(guò)在主包/分包中引入直播組件，開(kāi)發(fā)者可以很方便的實(shí)現(xiàn)訂閱、獲取直播狀態(tài)、獲取用戶openid以及獲取分享卡片鏈接參數(shù)等功能。

【服務(wù)端接口】

服務(wù)端接口包含直播間接口和商品管理接口。

• 直播間管理接口是小程序直播提供給開(kāi)發(fā)者對(duì)直播間進(jìn)行批量操作的接口能力。開(kāi)發(fā)者可以批量創(chuàng)建直播間，獲取回放源視頻，獲取直播間列表等。
• 商品管理接口是小程序直播提供給開(kāi)發(fā)者對(duì)直播商品進(jìn)行批量操作的接口能力。開(kāi)發(fā)者可以對(duì)商品批量進(jìn)行添加、提審、刪除以及更新等操作。