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

需要下载可执行的源代码的，请点我：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

<wxs module="dateUtil" src="../../../utils/timeUtil.wxs"></wxs>

<view class="container">
  <van-tabs bind:change="switchCate" active="{{tabIndex}}">
    <van-tab title="直播">
      <view class="noContent" wx:if="{{rooms.length == 0}}">
        <van-icon name="bullhorn-o" size="120rpx" />
        <view>没有更多直播啦～～</view>
      </view>
      <view class="live-container">
        <view class="item" wx:for="{{rooms}}" wx:for-index="index" wx:for-item="item" wx:key="id">
          <navigator url="plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id={{item.roomid}}">
            <view class="img-container">
              <image class="img" src="{{item.anchorImg}}" mode="aspectFill"></image>
              <view class="label">{{liveStatus[item.liveStatus]}}</view>
            </view>
          </navigator>
            <view class="bottom">
              <view class="text">
                <navigator url="plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id={{item.roomid}}" class="header">
                  <text class="name">{{item.name}}</text>
                  <text wx:if="{{item.anchorName != ''}}" class="desc">主播：{{item.anchorName}}</text>
                  <text class="desc">直播时间：{{dateUtil.dateFormat(item.startTime)}} - {{dateUtil.dateFormat(item.endTime)}}</text>
                </navigator>
                <view class="subscribe" wx:if="{{item.liveStatus == 102}}">
                  <subscribe room-id="{{item.roomid}}"></subscribe>
                </view>
              </view>
            </view>
        </view>
      </view>
    </van-tab>
    <van-tab title="已结束">
      <view class="finished-live-container">
        <view class="item" wx:for="{{finishedRooms}}" wx:for-index="index" wx:for-item="item" wx:key="id">
            <image class="img" src="{{item.anchorImg}}" mode="aspectFit" background-size="cover"></image>
            <view class="right">
              <navigator url="plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id={{item.roomid}}">
                <view class="text">
                  <text class="name">{{item.name}}</text>
                  <text wx:if="{{item.anchorName != ''}}" class="desc">主播：{{item.anchorName}}</text>
                  <text class="desc">直播时间：{{dateUtil.dateFormat(item.startTime)}} - {{dateUtil.dateFormat(item.endTime)}}</text>
                </view>
              </navigator>
              <view class="opration" wx:if="{{item.liveRoomReplyList.length > 0}}">
                <van-button type="info" size="small" data-room="{{item}}" bind:click="showHistoryPopup">观看回放</van-button>
              </view>
            </view>
        </view>
      </view>
    </van-tab>
  </van-tabs>
  <van-popup show="{{ historyShow }}" bind:close="onClose">
    <video src="{{liveHistoryRoom.mediaUrl}}"></video>
  </van-popup>

  <!-- 联系客服 -->
  <view class="contact">
    <contact-button style="opacity:0;position:absolute;" type="default-dark" session-from="weapp" size="27">
    </contact-button>
  </view>
</view>

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;
}