微信直播小程序端集成源代码

需要下载可执行的源代码的，请点我：https://github.com/firefac/p-media-livePlayer

废话不多说，上代码。

liveplayer.json

{
  "navigationBarTitleText": "直播演示",
  "usingComponents": {
    "van-tab": "../../lib/tab/index",
    "van-tabs": "../../lib/tabs/index",
    "van-card": "../../lib/card/index",
    "van-button": "../../lib/button/index",
    "subscribe": "plugin-private://wx2b03c6e691cd7370/components/subscribe/subscribe",
    "van-icon": "../../lib/icon/index",
    "van-popup": "../../lib/popup/index"
  }
}

livePlayer.wml

  
    
      
        
        没有更多直播啦～～
      
      
        
          
            
              
              {{liveStatus[item.liveStatus]}}
            
          
            
              
                
                  {{item.name}}
                  主播：{{item.anchorName}}
                  直播时间：{{dateUtil.dateFormat(item.startTime)}} - {{dateUtil.dateFormat(item.endTime)}}
                
                
                  
                
              
            
        
      
    
    
      
        
            
            
              
                
                  {{item.name}}
                  主播：{{item.anchorName}}
                  直播时间：{{dateUtil.dateFormat(item.startTime)}} - {{dateUtil.dateFormat(item.endTime)}}
                
              
              
                观看回放
              
            
        
      
    
  
  
    
  

  
  
    
    
  

livePlayer.js

var util = require('../../../utils/util.js');
var api = require('../../../config/api.js');

Page({
  data: {
    rooms:[],
    historyShow: false,
    tabIndex: 0,
    pageNum: 1,
    pageSize: 5,
    lastPage: false,
    finishedRooms:[],
    finishedPageNum: 1,
    finishedPageSize: 5,
    finishedLastPage: false,
    liveHistoryRoom: {},
    liveStatus: {
      101: "直播中",
      102: "未开始",
      103: "已结束",
      104: "禁播",
      105: "暂停中",
      106: "异常",
      107: "已过期"
    }
  },
  onLoad: function () {    
    this.getRoomsList();    
    this.getFinishedRoomsList();    
  },
  // 页面分享
  onShareAppMessage: function() {
    let that = this;
    return {
      title: "快来费尔工坊一起玩直播吧",
      path: 'pages/tools/livePlayer/livePlayer'
    }
  },
  onPullDownRefresh() {
    wx.showNavigationBarLoading() //在标题栏中显示加载
    this.resetData();
    this.getRoomsList();
    this.getFinishedRoomsList();    
    wx.hideNavigationBarLoading() //完成停止加载
    wx.stopPullDownRefresh() //停止下拉刷新
  },
  resetData: function() {
    this.setData({
      rooms:[],
      pageNum: 1,
      lastPage: false,
      finishedRooms:[],
      finishedPageNum: 1,
      finishedLastPage: false
    })
  },
  getRoomsList: function() {
    let that = this;
    util.request(api.LiveRoomList, {
        statusList: [101, 102, 105, 106],
        sort: "asc",
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }, "POST")
      .then(function(res) {
        if (res.errcode === '0') {

          that.setData({
            rooms: that.data.rooms.concat(res.data.list)
          })

          if(that.data.pageNum == 1){
            that.syncLiveStatus(that.data.rooms[0])
          }

          if(res.data.list.length < that.data.pageSize){
            that.data.lastPage = true
          }
        }
      });
  },
  syncLiveStatus: function(room) {
    if(room == null){
      return
    }
    let that = this

    let livePlayer = requirePlugin('live-player-plugin') // 引入获取直播状态接口
    // 首次获取立马返回直播状态，往后间隔1分钟或更慢的频率去轮询获取直播状态
    livePlayer.getLiveStatus({ room_id: room.roomid })
    .then(res => {
      // 101: 直播中, 102: 未开始, 103: 已结束, 104: 禁播, 105: 暂停中, 106: 异常, 107：已过期 
      const liveStatus = res.liveStatus
      if(room.liveStatus != liveStatus){
        let rooms = that.data.rooms
        rooms[0].liveStatus = liveStatus
        that.setData({
          rooms: rooms
        })

        util.request(api.LiveRoomStatusUpdate, {
          id: room.id,
          roomid: room.roomid,
          liveStatus: liveStatus
        }, "POST")
        .then(function(res) {
        });

      }
    })
    .catch(err => {
      console.log(err)
    })
  },
  getFinishedRoomsList: function() {
    let that = this;
    util.request(api.LiveRoomList, {
        statusList: [103, 104, 107],
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }, "POST")
      .then(function(res) {
        if (res.errcode === '0') {

          that.setData({
            finishedRooms: that.data.finishedRooms.concat(res.data.list)
          })

          if(res.data.list.length < that.data.finishedRoomsPageSize){
            that.data.finishedRoomsLastPage = true
          }
        }
      });
  },
  showHistoryPopup: function(e){
    var room = e.currentTarget.dataset.room

    this.setData({
      historyShow: true,
      liveHistoryRoom: room.liveRoomReplyList[0]
    });
  },
  onClose() {
    this.setData({
      historyShow: false,
      liveHistoryRoom: {}
    });
  },
  onReachBottom() {
    if(this.data.tabIndex == 0){
      if(this.data.lastPage){
        wx.showToast({
          title: '没有更多直播了',
          icon: 'none',
          duration: 2000
        });
        return false;
      }else{
        this.data.pageNum = this.data.pageNum + 1
        this.getRoomsList();
      }
    }else if(this.data.tabIndex == 0){
      if(this.data.finishedLastPage){
        wx.showToast({
          title: '没有更多内容了',
          icon: 'none',
          duration: 2000
        });
        return false;
      }else{
        this.data.finishedPageNum = this.data.finishedageNum + 1
        this.getFinishedRoomsList();
      }
    }
  },
  switchCate: function(event) {
    this.setData({
      tabIndex: event.detail.name
    })
  },
  onReady: function() {
    // 页面渲染完成
  },
  onShow: function() {
    // 页面显示
  },
  onHide: function() {
    // 页面隐藏
  },
  onUnload: function() {
    // 页面关闭
  }
})

livePlayer.wxss

.container {
  background: #fff;
}

view, text {
  font-family: PingFangSC-Light, helvetica, 'Heiti SC';
  font-size: 29rpx;
}

.finished-live-container{
  justify-content: space-between;  
  flex-wrap:wrap;
  box-sizing: content-box;
  background: #fff;
  width: 100%;
}
.finished-live-container .item {
  border-bottom: 1px solid #d9d9d9;
  margin: 0 20rpx;
  height: 264rpx;
}

.finished-live-container .img {
  margin-top: 12rpx;
  margin-right: 12rpx;
  float: left;
  width: 32%;
  height: 240rpx;
}

.finished-live-container .right {
  float: left;
  height: 264rpx;
  width: 65%;
  flex-flow: row nowrap;
}

.finished-live-container .text {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  height: 180rpx;
}

.finished-live-container .name {
  display: block;
  color: #333;
  line-height: 40rpx;
  font-size: 32rpx;
}

.finished-live-container .desc {
  display: block;
  color: #666;
  line-height: 32rpx;
  font-size: 25rpx;
}

.finished-live-container .price {
  display: block;
  color: #ab956d;
  line-height: 50rpx;
  font-size: 33rpx;
}


.live-container {
  width: 750rpx;
  height: 100%;
  overflow: hidden;
  padding: 20rpx;
}

.live-container .item {
  width: 100%;
  background: #fff;
  margin-bottom: 25rpx;
}

.live-container .img-container{
  height: 420rpx;
  position: relative;
}

.live-container .img {
  width: 100%;
  height: 420rpx;
  background: #fff;
  border-radius: 20rpx 20rpx 0rpx 0rpx;
  position: absolute;
}

.live-container .label {
  height: 100%;
  width: 100%;
  background-color: rgba(0,0,0,0.3);
  text-align: center;
  color: #fff;
  position: absolute;
  font-size: 40px;
  background-size: 55rpx auto;
  padding: 160rpx 0rpx;
  border-radius: 20rpx 20rpx 0rpx 0rpx;
}

.live-container .bottom {
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  box-shadow: 0px 2px  4px 1px #DDD;
  border-radius: 0rpx 0rpx 20rpx 20rpx;
}

.live-container .text {
  padding: 20rpx;
  width: 100%;
}

.live-container .name {
  width: 100%;
  display: block;
  color: #333;
  line-height: 50rpx;
  font-size: 32rpx;
  overflow: hidden;
}

.live-container .capsule-tag {
  float: right;
  padding-right: 0rpx;
  padding-top: 8rpx;
}

.live-container .zan-capsule + .zan-capsule {
  margin-left: 10px;
}

.live-container .desc {
  width: 100%;
  display: block;
  color: #666;
  line-height: 40rpx;
  font-size: 28rpx;
  overflow: hidden;
}

.live-container .subscribe {
  padding-top: 30rpx;
}

.noContent{
  display: block;
  line-height: 80rpx;
  text-align: center;
  margin-top: 100rpx;
  font-size: 30rpx;
  color: #666666;
}

.contact {
  height: 100rpx;
  width: 100rpx;
  border-radius: 100%;
  position: fixed;
  bottom: 96rpx;
  right: 20rpx;
  font-size: 20rpx;
  box-sizing: border-box;
  background: url("https://firefac-1259431066.picsh.myqcloud.com/5ufjlp0rw68jen3pctjha6kk6jl6v4x9.png") no-repeat center 21rpx;
  background-size: 55rpx auto;
}