此片博客 大量使用cover-view、cover-image进行布局

覆盖在原生组件之上的文本视图；在收藏、留言、返回首页、个人中心功能上都可以看到。

https://developers.weixin.qq.com/miniprogram/dev/component/cover-view.html

https://developers.weixin.qq.com/miniprogram/dev/api/media/video/VideoContext.html

videoinfo.wxss

page {
    height: 100%;
    background-color: #141414;
}

.container {
    display: flex;
    margin-top: 20rpx;
    margin-left: 50rpx;
    margin-right: 50rpx;
    justify-content: space-between;
}

.container-me {
    margin-top: 360rpx;
    margin-left: 50rpx;
    width: 80rpx;
}

.container-words {
    /* display: flex;
    flex-direction: column; */
    margin-top: 60rpx;
    margin-left: 50rpx;
    width: 100%;
    color: white;
    font-size: 14px;
}

.inputText {
    background-color: gainsboro;
    height: 35px;
}

.video-desc {
    width: 600rpx;
    height: 100rpx;
    white-space: pre-wrap;
}

.container-bottom {
    /* bottom: 10px;  */
    display: flex;
    margin-top: 60rpx;
    margin-left: 50rpx;
    margin-right: 50rpx;
    /* margin-bottom: 10rpx; */
    justify-content: space-between;
    /* position: fixed;  */
}

.size-me {
    width: 70rpx;
    height: 70rpx;
}

.size-me-bgm {
    width: 40rpx;
    height: 40rpx;
}

.bgm-style {
    display: flex;
    flex-direction: row;
}

.size-bottom {
    width: 60rpx;
    height: 60rpx;
}

.face2 {
    width: 75rpx;
    height: 75rpx;
    border: 0 solid #f00;
    border-radius: 100rpx;
    background-color: #f10b2e;
}

.face {
    width: 75rpx;
    height: 75rpx;
    /* margin: 20rpx; */
    border-radius: 50%;
}

.icoBtn {
    flex: 1;
    width: 80rpx;
    height: 100%;
}


.comments-scoll {
    height: 1200rpx;
}


.comments-all {
    /* margin-top: 10px; */
      margin-bottom: 10px;  
      /* border-bottom: solid 1px gray;   */
    background-color: #141414;
    color: #e8e8e8;
}

.face-comments {
    width: 60rpx;
    height: 60rpx;
    border-radius: 50%;
    margin-left: 5px;
}

.container-comments{
    display: flex;
    
    /* margin-top: 20rpx;
    margin-left: 50rpx;
    margin-right: 50rpx;
    justify-content: space-between; */
    
}


.nickname-comments {
    margin-left: 10px;
}

.nickname-lbl{
    color: #a1a1a1;
}

.date-lbl{
    color: #a1a1a1;
}

.comments-content{
    margin-left: 5px;
    margin-right: 5px;
    /* margin-bottom: 10px; */
    border-bottom: solid 1px #232323;
    background-color: #141414;
}

.saySthView {
    padding: 10px;
    background-color: #141414;
    line-height: 45px;
    border-bottom: solid 1px #232323;
    color: white;
}

.saySth {
    margin-top: 10px;
    margin-left: 10px;
    font-size: 18px;
}

videoinfo.wxml

<view style='width:100%;height:100%;'>

<video  id="myVideo" src="{{src}}"
muted="{{false}}"
controls="{{false}}"
autoplay="{{true}}"
loop="{{true}}"
enable-progress-gesture="{{false}}"
style='width:100%;height:100%;'
objectFit='{{cover}}'
>

<cover-view class='container'>
            <!-- 上传视频 -->

            <cover-image src='../resource/images/camera.png' style='width:50rpx;height:50rpx;' bindtap='upload'></cover-image>


            <!-- 搜索按钮 -->
            <cover-image src='../resource/images/search.png' style='width:45rpx;height:45rpx;' bindtap='showSearch'></cover-image>

        </cover-view>


<cover-view class='container-me'>
            <!-- 头像 -->
            <cover-image class="face" src='{{serverUrl}}{{publisher.faceImage}}' bindtap='showPublisher'></cover-image>


            <!-- 喜欢收藏按钮 -->
            <block wx:if="{{userLikeVideo}}">
                <cover-image class="size-me" src='../resource/images/like.png' style='margin-top:30rpx;' bindtap='likeVideoOrNot'></cover-image>
            </block>
            <block wx:else>
                <cover-image class="size-me" src='../resource/images/unlike.png' style='margin-top:30rpx;' bindtap='likeVideoOrNot'></cover-image>
            </block>


            <!-- 评论按钮 -->
            <cover-image class="size-me" src='../resource/images/comments.png' style='margin-top:30rpx;' bindtap='leaveComment'></cover-image>

            <!-- 分享按钮 -->
            <cover-image class="size-me" src='../resource/images/share.png' style='margin-top:30rpx;' bindtap='shareMe'></cover-image>

        </cover-view>

      <cover-view class='container-words'>

            <cover-view>@{{publisher.nickname}}</cover-view>

            <cover-view class='video-desc'>{{videoInfo.videoDesc}}</cover-view>



        </cover-view>

        <cover-view class='container-bottom'>
            <!-- 首页按钮 -->
            <cover-image class='' src='../resource/images/index.png' class="size-bottom" bindtap='showIndex'></cover-image>

          

            <!-- 我的按钮 -->
            <cover-image class='' src='../resource/images/mine.png' class="size-bottom" bindtap='showMine'></cover-image>

        </cover-view>

</video>

</view>


<view>

<view class="saySthView">
<input name="commentContent" class="saySth" placeholder="{{placeholder}}" confirm-type="send" bindconfirm="saveComment" focus='{{commentFocus}}' value='{{contentValue}}'
data-replyFatherCommentId='{{replyFatherCommentId}}'
data-replyToUserId='{{replyToUserId}}'
/>
</view>

<block wx:for="{{commentsList}}">
  <view class='comments-all' bindtap='replyFocus' 
  data-fatherCommentId='{{item.id}}'  
  data-toUserId='{{item.fromUserId}}' 
  data-toNickname='{{item.nickname}}' 
  >
      <view class='container-comments'>
          <image class="face-comments" src='{{serverUrl}}{{item.faceImage}}' ></image>
          <view class='nickname-comments'>
              <label class='nickname-lbl'>@{{item.nickname}}</label>
              于 
              <label class='date-lbl'>{{item.timeAgoStr}}</label>
              <!-- 留言： -->
              <block wx:if="{{item.toNickname != null}}">
                回复
                <label class='nickname-lbl'>@{{item.toNickname}}</label>
              </block>
              <block wx:else>
                留言：
              </block>
          </view>
      </view>
      <view class='comments-content'>{{item.comment}}</view>
  </view>
</block> 

</view>

videoinfo.js

var videoUtil = require('../../utils/videoUtil.js')

const app = getApp()

Page({
data: {
cover: "cover",
videoId: "",
src: "",
videoInfo: {},

userLikeVideo: false,

commentsPage: 1,
commentsTotalPage: 1,
commentsList: [],

placeholder: "说点什么..."
},

videoCtx: {},

onLoad: function (params) {
var me = this;
me.videoCtx = wx.createVideoContext("myVideo", me);

// 获取上一个页面传入的参数
var videoInfo = JSON.parse(params.videoInfo);

var height = videoInfo.videoHeight;
var width = videoInfo.videoWidth;
var cover = "cover";
if (width >= height) {
cover = "";
}

me.setData({
videoId: videoInfo.id,
src: app.serverUrl + videoInfo.videoPath,
videoInfo: videoInfo,
cover: cover
});

var serverUrl = app.serverUrl;
var user = app.getGlobalUserInfo();
var loginUserId = "";
if (user != null && user != undefined && user != '') {
loginUserId = user.id;
}
wx.request({
url: serverUrl + '/user/queryPublisher?loginUserId=' + loginUserId + "&videoId=" + videoInfo.id + "&publishUserId=" + videoInfo.userId,
method: 'POST',
success: function (res) {
console.log(res.data);

var publisher = res.data.data.publisher;
var userLikeVideo = res.data.data.userLikeVideo;

me.setData({
serverUrl: serverUrl,
publisher: publisher,
userLikeVideo: userLikeVideo
});
}
})

me.getCommentsList(1);
},

onShow: function () {
var me = this;
me.videoCtx.play();
},

onHide: function () {
var me = this;
me.videoCtx.pause();
},

showSearch: function () {
wx.navigateTo({
url: '../searchVideo/searchVideo',
})
},

showPublisher: function () {
var me = this;

var user = app.getGlobalUserInfo();

var videoInfo = me.data.videoInfo;
var realUrl = '../mine/mine#publisherId@' + videoInfo.userId;

if (user == null || user == undefined || user == '') {
wx.navigateTo({
url: '../userLogin/login?redirectUrl=' + realUrl,
})
} else {
wx.navigateTo({
url: '../mine/mine?publisherId=' + videoInfo.userId,
})
}

},

upload: function () {
var me = this;

var user = app.getGlobalUserInfo();

var videoInfo = JSON.stringify(me.data.videoInfo);
var realUrl = '../videoinfo/videoinfo#videoInfo@' + videoInfo;

if (user == null || user == undefined || user == '') {
wx.navigateTo({
url: '../userLogin/login?redirectUrl=' + realUrl,
})
} else {
videoUtil.uploadVideo();
}

},

showIndex: function () {
wx.redirectTo({
url: '../index/index',
})
},

showMine: function () {
var user = app.getGlobalUserInfo();

if (user == null || user == undefined || user == '') {
wx.navigateTo({
url: '../userLogin/login',
})
} else {
wx.navigateTo({
url: '../mine/mine',
})
}
},

likeVideoOrNot: function () {
var me = this;
var videoInfo = me.data.videoInfo;
var user = app.getGlobalUserInfo();

if (user == null || user == undefined || user == '') {
wx.navigateTo({
url: '../userLogin/login',
})
} else {

var userLikeVideo = me.data.userLikeVideo;
var url = '/video/userLike?userId=' + user.id + '&videoId=' + videoInfo.id + '&videoCreaterId=' + videoInfo.userId;
if (userLikeVideo) {
url = '/video/userUnLike?userId=' + user.id + '&videoId=' + videoInfo.id + '&videoCreaterId=' + videoInfo.userId;
}

var serverUrl = app.serverUrl;
wx.showLoading({
title: '...',
})
wx.request({
url: serverUrl + url,
method: 'POST',
header: {
'content-type': 'application/json', // 默认值
'headerUserId': user.id,
'headerUserToken': user.userToken
},
success: function (res) {
wx.hideLoading();
me.setData({
userLikeVideo: !userLikeVideo
});
}
})

}
},

shareMe: function () {
var me = this;
var user = app.getGlobalUserInfo();

wx.showActionSheet({
itemList: ['下载到本地', '举报用户', '分享到朋友圈', '分享到QQ空间', '分享到微博'],
success: function (res) {
console.log(res.tapIndex);
if (res.tapIndex == 0) {
// 下载
wx.showLoading({
title: '下载中...',
})
wx.downloadFile({
url: app.serverUrl + me.data.videoInfo.videoPath,
success: function (res) {
// 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
if (res.statusCode === 200) {
console.log(res.tempFilePath);

wx.saveVideoToPhotosAlbum({
filePath: res.tempFilePath,
success: function (res) {
console.log(res.errMsg)
wx.hideLoading();
}
})
}
}
})
} else if (res.tapIndex == 1) {
// 举报
var videoInfo = JSON.stringify(me.data.videoInfo);
var realUrl = '../videoinfo/videoinfo#videoInfo@' + videoInfo;

if (user == null || user == undefined || user == '') {
wx.navigateTo({
url: '../userLogin/login?redirectUrl=' + realUrl,
})
} else {
var publishUserId = me.data.videoInfo.userId;
var videoId = me.data.videoInfo.id;
var currentUserId = user.id;
wx.navigateTo({
url: '../report/report?videoId=' + videoId + "&publishUserId=" + publishUserId
})
}
} else {
wx.showToast({
title: '官方暂未开放...',
})
}
}
})
},

onShareAppMessage: function (res) {

var me = this;
var videoInfo = me.data.videoInfo;

return {
title: '短视频内容分析',
path: "pages/videoinfo/videoinfo?videoInfo=" + JSON.stringify(videoInfo)
}
},

leaveComment: function () {
this.setData({
commentFocus: true
});
},

replyFocus: function (e) {
var fatherCommentId = e.currentTarget.dataset.fathercommentid;
var toUserId = e.currentTarget.dataset.touserid;
var toNickname = e.currentTarget.dataset.tonickname;

this.setData({
placeholder: "回复 " + toNickname,
replyFatherCommentId: fatherCommentId,
replyToUserId: toUserId,
commentFocus: true
});
},

saveComment: function (e) {
var me = this;
var content = e.detail.value;

// 获取评论回复的fatherCommentId和toUserId
var fatherCommentId = e.currentTarget.dataset.replyfathercommentid;
var toUserId = e.currentTarget.dataset.replytouserid;

var user = app.getGlobalUserInfo();
var videoInfo = JSON.stringify(me.data.videoInfo);
var realUrl = '../videoinfo/videoinfo#videoInfo@' + videoInfo;

if (user == null || user == undefined || user == '') {
wx.navigateTo({
url: '../userLogin/login?redirectUrl=' + realUrl,
})
} else {
wx.showLoading({
title: '请稍后...',
})
wx.request({
url: app.serverUrl + '/video/saveComment?fatherCommentId=' + fatherCommentId + "&toUserId=" + toUserId,
method: 'POST',
header: {
'content-type': 'application/json', // 默认值
'headerUserId': user.id,
'headerUserToken': user.userToken
},
data: {
fromUserId: user.id,
videoId: me.data.videoInfo.id,
comment: content
},
success: function (res) {
console.log(res.data)
wx.hideLoading();

me.setData({
contentValue: "",
commentsList: []
});

me.getCommentsList(1);
}
})
}
},

// commentsPage: 1,
// commentsTotalPage: 1,
// commentsList: []

getCommentsList: function (page) {
var me = this;

var videoId = me.data.videoInfo.id;

wx.request({
url: app.serverUrl + '/video/getVideoComments?videoId=' + videoId + "&page=" + page + "&pageSize=5",
method: "POST",
success: function (res) {
console.log(res.data);

var commentsList = res.data.data.rows;
var newCommentsList = me.data.commentsList;

me.setData({
commentsList: newCommentsList.concat(commentsList),
commentsPage: page,
commentsTotalPage: res.data.data.total
});
}
})
},

onReachBottom: function () {
var me = this;
var currentPage = me.data.commentsPage;
var totalPage = me.data.commentsTotalPage;
if (currentPage === totalPage) {
return;
}
var page = currentPage + 1;
me.getCommentsList(page);
}
})

over......