小程序进阶学习（视频完结）（核心，重点）

首先上面是一个视频播放器

 

把视频的宽度设置为100%即可铺满全屏

然后视频的标题和作者

最后就是一个视频播放列表 ，设置一个固定位置开始滚动即可

还有一个问题没有解决，大家出出主意。

 

 在播放页面在点击一个新的视频去播放，点进去的新视频获取不到自身的id,就导致后面的数据无法显示。

页面代码

<!--pages/video-info/video-info.wxml-->

<view>
  <video 
    src="{{mvUrl}}" 
    autoplay="true" 
    class="video" 
    danmu-list="{{danmuLists}}"
    referrer-policy="origin"
    >
  </video>
</view>

<scroll-view  class="content" scroll-y>
<view class="container">
  <image class="image" mode="widthFix" src="{{mvInfos.cover}}"></image>
  <view class="text-container">
     <text class="text">{{mvInfos.name}}-{{mvInfos.artistName}}</text>
 
  </view>
</view>
  <view class="videoList"> 
    <block wx:for="{{videoLists}}" wx:key="{{item.id}}">
    <video-item class="item" itemData="{{item}}" bindtap="onClickItem" data-item="{{itemData.id}}" />      
    </block>
  </view>
</scroll-view >

// pages/video-info/video-info.js
import {getMvUrlInfo,getMvInfos,getMvRelate,getTopMv} from "../../services/request/myvideorequest"
Page({

  /**
   * 页面的初始数据
   */
  data: {
    id : 0,
    videoid:0,
    mvUrl:"",
    mvInfos:{},
    mvRelate:{},
    videoLists:[],
    offset:0,
    hasMore:true,
    danmuLists:[
      { text:"好听",color:"#ff00000", time:5},
      { text:"真好",color:"#ff00000", time:6},
      { text:"完美",color:"#ff00000", time:7},
    ]
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.clearAllData()
    const id = options.id
   this.getvideo()
   this.feachgetMvInfo(id)
   this.feachgetMvInfos(id)
   this.feachgetMvRelate(id)
  },
  async feachgetMvInfo(id){
    const res = await getMvUrlInfo(id)
    this.setData({mvUrl:res.data.url})
  },
  async feachgetMvInfos(id){
    const res = await getMvInfos(id)
    this.setData({mvInfos : res.data})
    console.log(res.data)
  },
  async feachgetMvRelate(id){
    const res = await getMvRelate(id)
    this.setData({mvRelate : res.data})
    console.log("更多信息：",res.data)
  },
  async getvideo(){
    const videolist = await getTopMv(this.data.offset)
    const newVideoList = [...this.data.videoLists,...videolist.data]
    this.setData({videoLists: newVideoList})
    this.data.offset+=10
    this.data.hasMore = videolist.hasMore
    console.log("视频列表中的数据：",this.data.videoLists)
  },
  onClickItem(event){
    console.log(event)
    const videoid = event.currentTarget.dataset.item
    console.log("要播放视频id",event.currentTarget.dataset.item)
    this.data.videoid = videoid
    wx.navigateTo({
      
      url: `/pages/video-info/video-info?id=${videoid}`,
    })
    console.log("完成跳转")
  },
  clearAllData(){
    this.data.id=0,
    this.data.videoid=0,
    this.data.mvUrl=""
    this.data.mvInfos={},
    this.data.mvRelate={},
    this.data.videoLists=[],
    this.data. offset=0,
    this.data.hasMore=true
  },
  onReachBottom() {
    this.getvideo()
  }
})

/* pages/video-info/video-info.wxss */
page{
  height: 100vh;
}
.video{
  width: 100%;
} 
/* pages/main-video/main-video.wxss */
.videoList{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding:0 10rpx;
}
.item{
  width: 48%;
} 
.content {
  /* height: 325px; */
  height: calc(100% - 225px);
}

/* 在wxss文件中 */
.container {
  display: flex;
  flex-direction: row;
  align-items: center; /* 垂直居中对齐 */
  margin-left: 18px;
}

.image {
  width: 120px;
  height: 120px;
  margin-right: 20px;
  margin-top: 18px;
  margin-bottom: 24px;
}

.text-container {
  flex: 1;  
  margin-right: 20px;
}

.text {
  font-size: 18px;
  color: #333; 
 
}

{
  "usingComponents": {
    "video-item":"/components/video-items/video-item"

  },
  "enablePullDownRefresh": true
}