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

墨蓝 2023-07-10 15:58 1阅读 0赞

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

废话不多说，上代码。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvdmViaXJkMzIx_size_16_color_FFFFFF_t_70][]

## 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 ##

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

[https_github.com_firefac_p-media-livePlayer]: https://github.com/firefac/p-media-livePlayer
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvdmViaXJkMzIx_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2020030320561043.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvdmViaXJkMzIx,size_16,color_FFFFFF,t_70