七，視頻播放頁面
1.app.json引入detail目錄
"pages": [
"pages/index/index",
"pages/detail/detail",
"components/MyTitle/MyTitle"
],
2.引入頭部
<MyTitle></MyTitle>
3.引入video
<view class="videoinfo">
<!--引入video具體文件-->
<video src="{{videoInfo.videoSrc}}" controls></video>
<view class="videotitle">
<text>{{videoInfo.videoTitle}}</text>
<text class="fa fa-angle-down"></text>
</view>
<!-- 視頻作者 -->
<view class="videodetail">
<!-- 作者 -->
<text class="author">{{videoInfo.author}}</text>
<!-- 播放量 -->
<text class="playcount">{{videoInfo.playCount}}</text>
<!-- 評論量 -->
<text class="commentcount">{{videoInfo.commentCount}}彈幕</text>
<!-- 時間 -->
<text class="date">{{videoInfo.date}}</text>
</view>
<!-- </view> -->
</view>
wxss修飾wxml的文件
.page{
padding: 10rpx;
color:#666;
}
.videoinfo{
margin-top: 10rpx;
}
.videoinfo video{
width:100%;
}
.videotitle{
display :flex;
justify-content: space-between;
font-size: 35rpx;
}
.videodetail{
margin-top: 5rpx;
font-size: 28rpx;
}
.videodetail text{
margin-left: 15rpx;
}
.videodetail .author{
color: #000;
}
js代碼，視頻播放，視頻列表，評論列表
// pages/detail/detail.js
Page({
/**
* 頁面的初始數據
*/
data: {
videoInfo:null,
othersList:[],
commentsList :null,
},
/**
* 生命週期函數--監聽頁面加載 option是傳輸過來的數據（點擊那個，options就是
* 那個的數據
*/
onLoad: function (options) {
console.log(1+options);
let videoId=options.id;
this.getVideoInfo(videoId);
this.getOtherList(videoId);
this.getCommentInfo(videoId);
},
/**
* 生命週期函數--監聽頁面初次渲染完成
*/
onReady: function () {
},
/**
* 生命週期函數--監聽頁面顯示
*/
onShow: function () {
},
/**
* 生命週期函數--監聽頁面隱藏
*/
onHide: function () {
},
/**
* 生命週期函數--監聽頁面卸載
*/
onUnload: function () {
},
/**
* 頁面相關事件處理函數--監聽用戶下拉動作
*/
onPullDownRefresh: function () {
},
/**
* 頁面上拉觸底事件的處理函數
*/
onReachBottom: function () {
},
/**
* 用戶點擊右上角分享
*/
onShareAppMessage: function () {
},
getVideoInfo(videoId){
let that=this;
wx.request({
url: 'https://easy-mock.com/mock/5ccc2cc89e5cbc7d96b29785/bili/videoDetail?id='+videoId,
data:{},
method:"GET",
success:function(res){
if(res.data.code===0){
that.setData({
videoInfo:res.data.data.videoInfo
})
}
}
})
},
//視頻列表
getOtherList(videoId){
let that=this;
wx.request({
url: 'https://easy-mock.com/mock/5c1dfd98e8bfa547414a5278/bili/othersList?id='+videoId,
data:{},
method:"GET",
success:function(res){
if(res.data.code===0){
that.setData({
othersList:res.data.data.othersList
})
}
}
})
},
// 獲取評論數據
getCommentInfo(videoId){
let that=this;
wx.request({
url: 'https://easy-mock.com/mock/5c1dfd98e8bfa547414a5278/bili/commentsList?id='+videoId,
data: {},
method: 'GET',
success: function(res){
console.log(res);
if(res.data.code===0){
that.setData({
commentList:res.data.data.commentData
})
}
},
})
},
})
視頻列表，評論列表wxml wxss
```j
<view class="videolist">
<navigator url="../detail/detail?id={{item.id}}" class="videoitem" wx:for="{{othersList}}" wx:key="{{index}}">
<view class="itemimg">
<image src="{{item.imgSrc}}" mode="widthFix"></image>
</view>
<view class="othersinfo">
<!-- 標題 -->
<view class="othertitle">{{item.title}}</view>
<!-- 播放量 -->
<view class="otherdetail">
<!-- 播放量 -->
<text class="playcount">{{item.playMsg}}</text>
<!-- 評論量 -->
<text class="commentcount">{{item.commentCount}}</text>
</view>
</view>
</navigator>
</view>
<view class="commentwrap">
<view class="commenttitle">
評論({{commentList.commentTotalCount}})
</view>
<view class="commentlist">
<view class="commentitem" wx:for="{{commentList.commentList}}" wx:key="{{index}}">
<!-- 左側 -->
<view class="commentuser">
<image src="{{item.userIconSrc}}" mode="widthFix"></image>
</view>
<!-- 右側 -->
<view class="commentinfo">
<view class="commentdetail">
<text class="author">{{item.username}}</text>
<text class="date">{{item.commentDate}}</text>
</view>
<view class="commentcontent">
{{item.commentInfo}}
</view>
</view>
</view>
</view>
</view>
</view>
.videolist{
margin-top: 10rpx;
}
.videoitem{
display: flex;
justify-content: space-between;
margin-bottom: 10rpx;
}
.itemimg{
width:40%;
display: flex;
justify-content:center;
align-items: center;
}
.itemimg image{
width: 90%;
border-radius: 15rpx;
}
.othersinfo{
width: 60%;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.othertitle{
font-size: 30rpx;
color: red;
}
.otherdetail{
font-size: 25rpx;
color: #666;
}
/* 評論列表 */
.commentwrap{
margin-top: 10rpx;
}
.commenttitle{
padding: 10rpx;
font-size: 28rpx;
}
.commentlist{}
.commentitem{
margin-bottom: 10rpx;
padding: 10rpx;
display: flex;
justify-content: space-between;
border-bottom: 1px solid #666
}
.commentuser{
flex: 1;
display: flex;
justify-content: center;
align-content: center;
}
.commentuser image{
width: 60%;
border-radius: 50%;
}
.commentinfo{
flex: 5;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.commentdetail{
display: flex;
justify-content: space-between;
}
.commentdetail .author{
font-size: 28rpx;
color: #000;
}
.commentdetail .date{
color: #666;
font-size: 24rpx;
}
.commentcontent{
font-size: 28rpx;
color: #000;
}