微信小程式直播接入
阿新 • • 發佈:2020-09-20
申請開通小程式直播
1、申請小程式直播有以下幾個硬性指標:
1. 滿足小程式18個開放類目
2. 主體下小程式近半年沒有嚴重違規
3. 小程式近90天內有過支付行為
4. 主體下公眾號累計粉絲數大於100人
5. 主體下小程式連續7日日活躍使用者數大於100人
6. 主體在微信生態內近一年廣告投放實際消費金額大於1萬元
注:條件1、2、3為必須滿足,4、5、6為滿足其中一項即可
2、登入微信公眾平臺,提交申請
左側選單欄找到直播,即可申請。
小程式接入直播元件
1、引入直播元件
支援在主包或分包內引入【直播元件】 live-player-plugin 程式碼包(注:直播元件不計入程式碼包體積),專案根目錄的 app.json 引用
(1)主包引入
"plugins": {
"live-player-plugin": {
"version": "1.1.10", // 注意填寫該直播元件最新版本號,微信開發者工具除錯時可獲取最新版本號(複製時請去掉註釋)
"provider": "wx2b03c6e691cd7370" // 必須填該直播元件appid,該示例值即為直播元件appid(複製時請去掉註釋)
}
}
(2)分包引入
"subpackages": [ { "plugins": { "live-player-plugin": { "version": "1.1.10", // 注意該直播元件最新版本號,微信開發者工具除錯時可獲取最新版本號(複製時請去掉註釋) "provider": "wx2b03c6e691cd7370" // 必須填該直播元件appid,該示例值即為直播元件appid(複製時請去掉註釋) } } } ]
2、獲取直播列表
通過呼叫介面進行獲取,介面詳情
下面是使用C#請求此介面的示例
public string JsCode2Session() { string appid = XXX; string secret = XXX; string JsCode2SessionUrl = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid={0}&secret={1}"; var url = string.Format(JsCode2SessionUrl, appid, secret); var str = HttpHelper.HttpGet(url); try { var jo = JsonHelper.ToJObject(str); string access_token = jo["access_token"].ToString(); return access_token; } catch (Exception ex) { return ""; } } [HttpGet] public async Task<TData<List<RoomInfo>>> GetLivePlayer() { string url = "https://api.weixin.qq.com/wxa/business/getliveinfo?access_token={0}"; string token = JsCode2Session(); url = string.Format(url, token); var postData = new QueryArgs { start = 0, limit = Int32.MaxValue }; string result = HttpHelper.HttpPost(url, Newtonsoft.Json.JsonConvert.SerializeObject(postData)); List<RoomInfo> roomInfos = new List<RoomInfo>(); TData<List<RoomInfo>> obj = new TData<List<RoomInfo>>(); if (!string.IsNullOrEmpty(result)) { var json = JsonHelper.ToJObject(result); var error = json["errcode"].ToString(); if (error == "0") { roomInfos = JsonHelper.ToObject<List<RoomInfo>>(json["room_info"].ToString()); obj.Result = roomInfos; obj.TotalCount = roomInfos.Count; obj.Tag = 1; } else { obj.TotalCount = 0; obj.Message = json["errmsg"].ToString(); obj.Tag = 0; } } return obj; } //房間資訊 public class RoomInfo { public string name { get; set; } public string roomid { get; set; } public string cover_img { get; set; } public string share_img { get; set; } public LiveStatus live_status { get; set; } public string start_time { get; set; } public string end_time { get; set; } public string anchor_name { get; set; } public int total { get; set; } } //直播狀態 public enum LiveStatus { 直播中 = 101, 未開始, 已結束, 禁播, 暫停, 異常, 已過期 }
通過呼叫GetLivePlayer介面即可獲取直播間列表。
3、使用直播元件
(1)在wxml頁面遍歷所有直播
<block wx:for="{{liveList}}" wx:key="{{title}}">
<view style="width:350rpx" bindtap="tolive" data-roomid="{{item.roomid}}" class="recommend_sp_img">
<image class="image1" src="{{item.cover_img}}" mode="aspectFill"></image>
<text class="shiping">{{item.name}}</text>
</view>
</block>
(2)在js頁面進行跳轉
tolive:function(e){
console.log(e)
let roomId = e.currentTarget.dataset.roomid
wx.navigateTo({
url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${roomId}`
})
}
直播間建立
1、在微信公眾平臺中的直播間控制檯建立
2、通過介面建立
建立直播間的介面詳情