效果圖
3個模塊(圖片來自微信平臺)
主播端 - 在小程序中創(chuàng)建直播間
觀眾端
開通小程序直播的條件
1.屬于小程序直播開放類目埠忘,具體見《微信小程序直播功能準入要求》
2.主體下小程序近半年沒有嚴重違規(guī);
3.小程序近90天內,有過支付行為杖刷;
一、登錄微信小程序后臺開啟直播功能
申請開通
創(chuàng)建直播間
二荷逞、在項目中引入直播組件
1.引入
在pages.json中引入
支持在主包或分包內引入【直播組件】 live-player-plugin 代碼包,不要改變provider的appId
(1) 主包引入
"plugins": {
"live-player-plugin": {
"version": "1.2.4", // 注意填寫該直播組件最新版本號葫松,微信開發(fā)者工具調試時可獲取最新版本號(復制時請去掉注釋)
"provider": "wx2b03c6e691cd7370" // 必須填該直播組件appid,該示例值即為直播組件appid(復制時請去掉注釋)
}
}
(2) or分包引入
"subpackages": [
{
"plugins": {
"live-player-plugin": {
"version": "1.2.4", // 注意該直播組件最新版本號底洗,微信開發(fā)者工具調試時可獲取最新版本號(復制時請去掉注釋)
"provider": "wx2b03c6e691cd7370" // 必須填該直播組件appid腋么,該示例值即為直播組件appid(復制時請去掉注釋)
}
}
}
]
2.觀眾端使用
在需要進入直播間的頁面寫個入口
不要改變鏈接地址:plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin;
不要改變provider的appId(是直播組件appid)
(1) 使用 navigator 組件跳轉進入直播間
<navigator url="plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id={{roomId}}&custom_params={{customParams}}"></navigator>
(2) or使用 navigateTo 方法跳轉進入直播間
let roomId = [直播房間id] // 填寫具體的房間號,可通過下面【獲取直播房間列表】 API 獲取
let customParams = encodeURIComponent(JSON.stringify({ path: 'pages/index/index', pid: 1 })) // 開發(fā)者在直播間頁面路徑上攜帶自定義參數(如示例中的path和pid參數)亥揖,后續(xù)可以在分享卡片鏈接和跳轉至商詳頁時獲取珊擂,詳見【獲取自定義參數】、【直播間到商詳頁面攜帶參數】章節(jié)(上限600個字符费变,超過部分會被截斷)
uni.navigateTo({
url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${roomId}&custom_params=${customParams}`
})
3.主播端使用
(1) 在直播控制臺中可掃碼進入
直播控制臺
(2) 創(chuàng)建直播間
有兩種方法:在小程序創(chuàng)建摧扇,在控制臺創(chuàng)建
在小程序中創(chuàng)建
在控制臺中創(chuàng)建
相關官方地址:
小程序后臺:https://mp.weixin.qq.com/
小程序直播組件使用:https://developers.weixin.qq.com/miniprogram/dev/framework/liveplayer/live-player-plugin.html
創(chuàng)建一個小程序:https://developers.weixin.qq.com/miniprogram/introduction
小程序直播產品使用指南(必看)https://docs.qq.com/slide/DSkN3dXRoam5ycGFV