基于java的微信小程序的实现（十二）视频详情页小程序端实现

1.详情页的显示

1.需求分析

当用户在视频详情页点击某个视频后，会跳转到视频详情页的页面，并把该视频的videoVo对象以参数的形式传递过去，在该页面进行加载的时候调用查询视频发布者的接口，将返回的参数值赋值给对应部分，显示出视频发布者的头像信息，是否点赞，调用查询评论的接口。

2.代码实现（相关的流程和步骤都在注释中标明了）

js

Page({
  data: {
    cover: "cover",
    videoId: "",
    src: "",
    //定义视频信息
    video:null,
    //用户是否对该视频点赞
    userLikeVideo:false,
    //视频发布者信息
    publishUser:null,
    serverUrl:app.serverUrl,
    //默认评论页数
    commentsPage:1,
    //默认没页展示的条数
    commentsSize:1,
    //总页数
    totalPage:1,
    //评论列表集合
    commentsList:[],
    placeholder:"说点什么...",
    toUserId:""
  },
  onLoad:function(param){
    var me=this;
    var serverUrl = app.serverUrl;
    //获取当前登陆者信息
    var user=app.getGlobalUserInfo("userInfo");
    //将从index页面传过来的string类型的video对象转换成json对象
    var video = JSON.parse(param.video);
    //获得该视频的路径
    var src = video.videoPath;
    //获取当前评论的页数
    var page = me.data.commentsPage;
   
    //调用查询视频发布者信息接口（需要身份认证）
    wx.request({
      url: serverUrl + '/user/findPublish?id=' + user.id + '&videoId=' + video.id + '&publishId=' + video.userId,
      method:'POST',
      header: {
        'content-type': 'application/json',
        'userId': user.id,
        'userToken': user.token
      },
      success:function(res){
        console.log(res.data)
     //定义一个用来回跳的路径，若用户没用登录在登录之后可以直接跳转到原理的路径
    //因为在参数在传递的时候如果作为参数的值在添加参数的话不会被识别，所以这里使用#代替？使用@代替=，在登录页面在进行转义即可
        var realUrl = "../videoinfo/videoinfo#video@" + JSON.stringify(video) ;
        if (res.data.status==502){
          //如果用户没登录，会重定向到登录界面，并将realUrl传递过去
          wx.showToast({
            title: res.data.msg,
            icon:"none",
            success:function(){
              wx.redirectTo({
                url: '../userLogin/login?realUrl=' + realUrl,
              })
            }
          })
        }
        me.setData({
          //将后端获取到的值赋过来
          userLikeVideo: res.data.data.isLike,
          //将查询到的发布者信息赋值给users
          publishUser:res.data.data.users
        })
      }
    })
    me.setData({
      //将视频路径进行赋值
      src:serverUrl+src,
      video:video
    })

    //调用查询评论的函数
    me.getCommentsList(page);
  }

在login.js中会对传来的参数进行解析，并且让页面的realUrl不为空的时候，页面会直接跳转到realUrl

 onLoad:function(params){
    var me =this;
    var realUrl = params.realUrl;
    if(realUrl!=null||realUrl!=undefined||realUrl!=""){
      realUrl = realUrl.replace(/#/g, "?");
      realUrl = realUrl.replace(/@/g, "="); 
    }
     
    me.realUrl=realUrl;  
    me.setData({
      realUrl:realUrl
    })
  }
  
  doLogin:function(e){
    var me =this;
    var formObject=e.detail.value;
    var username = formObject.username;
    var password = formObject.password;
    var serverUrl=app.serverUrl;
    if (username.length == 0 || password.length == 0) {
      wx.showToast({
        title: '用户名或密码不能为空',
        icon: "none",
        duration: 3000
      })
      }else{
        // wx.showToast({
        //   title: '登录ing..',
        //   icon:"none"
        // })
        wx.showLoading({
          title: '登陆ing',
        })
        wx.request({
          url: serverUrl+'/login',
          method:'POST',
          data: {
            username: username,
            password: password
          },
          header: {
            'content-type': 'application/json'
          },
          success:function(res){
          
            if(res.data.status==200){
              wx.showToast({
                title: '登陆成功',
                icon: "success"
              })
              // app.userInfo=res.data.data;
              //将后端返回的用户信息存入缓存中
              app.setGlobalUserInfo(res.data.data);
              var realUrl = me.data.realUrl;
              
              if(realUrl==null||realUrl==undefined||realUrl==""){
                wx.redirectTo({
                  url: '../mine/mine'
                })
              }else{
                wx.redirectTo({
                  url: realUrl,
                })
              }
              
            }else{
              wx.showToast({
                title: '登陆失败',
                icon: "none"
              })
            }
            console.log(res.data);
          }
        })
      }
  }

2.点赞与取消

1.需求分析

当用户点击到点赞按钮后，会在对应的事件中去调用点赞/取消点赞的接口，这里我们可以通过userLikeVideo 的值来判断掉哪个接口，如果为true就调用取消点赞接口，如果为false就调用点赞接口，而且在每次调用玩该方法后要对userLikeVideo 的值进行一个取反的操作

2.代码实现

 //用户点赞和取消点赞的函数
  likeVideoOrNot:function(){
    var me =this;
    var user = app.getGlobalUserInfo("userInfo");
    //判断用于是否登录，如果没登录重定向到登录页面
    if (user == null || user == undefined || user == "") {
      wx.navigateTo({
        url: '../userLogin/login',
      })
    } else {
      var serverUrl=app.serverUrl;
      //获取当前的点赞状态
      var flag = me.data.userLikeVideo;
      //获取当前的视频信息
      var video=me.data.video;
      //设置调用接口的路径，默认为点赞接口
      var url = serverUrl + '/user/like?id=' + user.id + '&videoId=' + video.id +'&videoCreatedId='+video.userId;
      //如果flag为true，说明视频已经被点过赞，就将路径地址设置为取消点赞的接口
      if (flag) {
      var url = serverUrl + '/user/unlike?id=' + user.id + '&videoId=' + video.id +'&videoCreatedId='+video.userId;
      }
      //调用接口，同样需要进行认证
      wx.request({
        url: url,
        method:'POST',
        header: {
          'content-type': 'application/json',
          'userId': user.id,
          'userToken': user.token
        },
        success:function(res){
          console.log(res)
          //根据flag值给出对应的消息提醒
          if (!flag){
              wx.showToast({
                title: '点赞成功',
                icon:"none",
                duration:1500
              })
          }else{
            wx.showToast({
              title: '取消点赞',
              icon: "none",
              duration: 1500
            })
          }
          //对flag值进行取反
          me.setData({
            userLikeVideo: !flag
          })
        },
        
      })
    }
  }

3.视频的搜索操作

1.需求分析

关于视频的搜索模块，我使用的是GitHub的开源的搜索框架，地址https://github.com/mindawei/wsSearchView

里面也有相关的入门操作，这里也不多介绍了，要说的是，显示视频搜索结果的页面我们直接复用之前的index页面，就不新建新的页面了。

2代码实现

将框架源码拉取下来，然后导入到项目中，当点击搜索按钮后会跳转到对应的搜索页面

var WxSearch = require('../../wxSearchView/wxSearchView.js');
const app = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;
    var serverUrl=app.serverUrl;
    //调用查找热搜词的列表
    wx.request({
      url:serverUrl+ '/video/hot',
      method:"POST",
      success:function(res){
        var hotList=res.data.data;
        WxSearch.init(
          that,  // 本页面一个引用
          hotList, // 热点搜索推荐，[]表示不使用
          hotList,// 搜索匹配，[]表示不使用
          that.mySearchFunction, // 提供一个搜索回调函数
          that.myGobackFunction //提供一个返回回调函数
        );
      }
    })
  
  },
  wxSearchInput: WxSearch.wxSearchInput,  // 输入变化时的操作
  wxSearchKeyTap: WxSearch.wxSearchKeyTap,  // 点击提示或者关键字、历史记录时的操作
  wxSearchDeleteAll: WxSearch.wxSearchDeleteAll, // 删除所有的历史记录
  wxSearchConfirm: WxSearch.wxSearchConfirm,  // 搜索函数
  wxSearchClear: WxSearch.wxSearchClear,
  // 4 搜索回调函数  
  mySearchFunction: function (value) {
    // do your job here
    // 示例：跳转
    //当点击搜索后会跳转到主页面并将searchValue传递过去
    wx.redirectTo({
      url: '../index/index?searchValue=' + value
    })
  },

  // 5 返回回调函数
  myGobackFunction: function () {
    // do your job here
    // 示例：返回
    wx.redirectTo({
      url: '../index/index?searchValue=返回'
    })
  }
})

在index页面我们需要在onLoad函数中进行判断，如果searchValue的值不为空，就会把该值赋值给data中的searchValue，作为参数传入给查询视频列表的接口

 //判断用户是否在进行查询操作，如果不为空则说明，用户是在做搜索操作
    if (searchValue != null || searchValue != undefined || searchValue!=""){
      me.setData({
        searchValue: searchValue
      })
    }
    me.setData({
      screenWidth: screenWidth
      
    })
    wx.showLoading({
      title: '加载中',
    })
    me.findAllVideos(page);
  }

4.查看视频发布者信息功能

1.需求分析

当用户在界面上点击视频发布者头像的时候，页面会跳转到个人信息的页面，在这里我们需要对登录者以及视频发布者进行判断，看视频发布者是否为当前的登录用户，如果相同，会在个人信息页面显示上传视频和注销的按钮，如果不相同则会显示关注和已关注的按钮，同时在登陆者和用户信息不相同的时候，需要调用查询视频发布者是否被登录者关注的接口，该部分的实现和用户是否对视频点赞是相同的。

2.代码实现

//查看视频发布者信息（需要进行登录状态验证，和前面的一样）
  showPublisher:function(){
    var me=this;
    var video = me.data.video;
    var realUrl = "../mine/mine#publish@" + video.userId;
    var user = app.getGlobalUserInfo("userInfo");
    if (user == null || user == undefined || user == "") {
      wx.navigateTo({
        url: '../userLogin/login?realUrl=' + realUrl,
      })
    }else{
    //将视频发布者的id传递到下个页面
      wx.navigateTo({
        url: '../mine/mine?publishId='+video.userId,
      })
    }
  }

在mine页面需要接收传递过来的参数，如果参数为空，则说明用户是在对自己的个人信息进行查看，执行原来的逻辑，如果不为空则需要将传递过来的id赋值给原来调用找个人信息接口的参数，然后需要从缓存中取出用户的个人信息，判断登陆者的id和视频发布者的id是否相同，如果相同会将data里面的isMe参数设置为true，并会隐藏关注/已关注的按钮，显示上传作品和注销按钮，反正则需要显示关注/已关注按钮，并且在用户头像的位置也应该做相应的处理，如果isMe为false的话，应该去掉修改头像的事件。

 onLoad:function(params){
    var me=this;
    // var userInfo=app.userInfo;
    //从缓存中获取到用户对象
    var userInfo = app.getGlobalUserInfo("userInfo");
    var serverUrl = app.serverUrl;
    //获取当前登陆者的id
    var userId=userInfo.id;
    var publishId = params.publishId;
    if(publishId!=null&&publishId!=undefined&&publishId!=""){
        me.setData({
          publishId: publishId
        })
        if(userId==publishId){
          me.setData({
            isMe: true
          })
        }else{
          userId = publishId;
          me.setData({
            isMe: false
          })
        }
       
    }
   //userInfo.id为当前登录者的id
   //请求后端接口查找个人信息
    wx.request({
      url: serverUrl + '/user/findUserInfo?id=' + userId + '&fansId='+userInfo.id,
      method:'POST',
      header: {
        'content-type': 'application/json',
        //因为需要做认证处理，所以要传入当前对象的id和token
        'userId': userInfo.id,
        'userToken':userInfo.token

      },
      success:function(res){
        var user = res.data.data;
        console.log(res.data);
        if(res.data.status==200){
          if (user.faceImage == null && user.faceImage == '' && user.faceImage == undefined) {
            me.setData({
              //如果用户为第一次登陆，该用户没有头像信息，将系统默认的头像路径赋值给faceUrl
              faceUrl: "../resource/images/noneface.png"
            })
          }
          me.setData({
            //分别获取返回信息并赋值给对应变量
            faceUrl: serverUrl + user.faceImage,
            fansCounts: user.fansCounts,
            followCounts: user.followCounts,
            receiveLikeCounts: user.receiveLikeCounts,
            nickname: user.nickname,
            isFollow:user.followed
          })
        }else if(res.data.status==502){
          //502状态码为我们自定义返回的状态码，当token认证出现问题是就会返回该值，会将页面重定向到登录页
          wx.showToast({
            title: res.data.msg,
            icon:"none",
            duration:3000,
            success:function(){
              wx.redirectTo({
                url: '../userLogin/login',
              })
            }
          })
        }
        
      
      }
    })
  },

  logout:function(){
    var serverUrl = app.serverUrl;
    // var userInfo=app.userInfo;
    var userInfo=app.getGlobalUserInfo("userInfo");
    //调用注销接口
    wx.request({
      url:serverUrl+ '/logout?id='+userInfo.id,
      method:'POST',
      header: {
        'content-type': 'application/json'
      },
      success:function(res){
        console.log(res.data);
        wx.showToast({
          title: '注销成功',
        })
        //调用该方法清除用户的本地缓存
        wx.removeStorageSync("userInfo");
        //并重定向到登录页面
        wx.redirectTo({
          url: '../userLogin/login'
        })
      }
    })
  }

wxml代码

<view>

  <view class='container'>

    <block wx:if="{{isMe}}">
      <image src="{{faceUrl}}" class="face" bindtap='changeFace'></image>
    </block>
    <block wx:if="{{!isMe}}">
      <image src="{{faceUrl}}" class="face"></image>
    </block>
    <label class='nickname'>{{nickname}}</label>

    <block wx:if="{{isMe}}">
      <button size='mini' class='primary' bindtap='uploadVideo'> 上传作品</button>
      <button size='mini' type='' class='logout' bindtap='logout'>注销</button>
    </block>
     <block wx:if="{{!isMe}}">
        <block wx:if="{{!isFollow}}">
          <button size='mini' type='primary' class='follow' bindtap='follow'>关注</button>
        </block>
        <block wx:if="{{isFollow}}">
          <button size='mini' type='' class='follow' bindtap='follow'>已关注</button>
        </block>
    </block>
 

   

    <view class='container-row'>
      <label class='info-items'>{{fansCounts}} 粉丝</label>
      <label class='info-items'>{{followCounts}} 关注</label>
      <label class='info-items'>{{receiveLikeCounts}} 获赞</label>
    </view>
  </view>

</view>

<view class="line"></view>



<view class='container-video-list'>

<view hidden='{{myWorkFalg}}'>
    <block wx:for="{{myVideoList}}" >
        <image src='{{serverUrl}}{{item.coverPath}}' class='videoImage' mode="aspectFill" bindtap='showVideo' data-arrindex='{{index}}'></image>
    </block>
</view>

<view hidden='{{myLikesFalg}}'>
    <block wx:for="{{likeVideoList}}" >
        <image src='{{serverUrl}}{{item.coverPath}}' class='videoImage' mode="aspectFill" bindtap='showVideo' data-arrindex='{{index}}'></image>
    </block>
</view>

<view hidden='{{myFollowFalg}}'>
    <block wx:for="{{followVideoList}}" >
        <image src='{{serverUrl}}{{item.coverPath}}' class='videoImage' mode="aspectFill" bindtap='showVideo' data-arrindex='{{index}}'></image>
    </block>
</view>

</view>

5.评论回复功能实现

1.需求分析

用户在视频详情页下方点击输入栏会让用户留言评价，当点击留言后留言列表会进行刷新，并将新评论的内容显示出来，留言内容是分页的，当用户进行下拉操作时会查询下一页的留言内容，并和原来的内容进行拼接，和视频首页的分页原理是相同的，用户也可以对别人的评论内容进行回复，如果是回复他人则需要在调用接口的时候多传入两个参数

2代码实现

 //留言函数
  leaveComment:function(){
    var me =this;
    //当点击留言按钮的时候，会将焦点设为true，用户就可直接输入评论了
    this.setData({
      commentFocus:true
    })
  },
  /**
   * 发送评论
   */
  saveComment:function(e){
    var me =this;
    //获取到用户输入的内容
    var commentValue= e.detail.value;
    var user=app.getGlobalUserInfo("userInfo");
    var video=me.data.video;
    var realUrl = "../videoinfo/videoinfo#video@" + video;
    var serverUrl =app.serverUrl;
    var toUserId = me.data.toUserId
    wx.showLoading({
      title: '评论中',
    })
    wx.request({
      url: serverUrl +'/video/saveComments',
      method: 'POST',
      data:{
        videoId:me.data.video.id,
        comment: commentValue,
        fromUserId:user.id,
        toUserId: toUserId,
        fatherCommentId: user.id
      },
      header: {
        'content-type': 'application/json',
        'userId': user.id,
        'userToken': user.token
      },
      success: function (res) {
        console.log(res.data)
        wx.hideLoading();
        if (res.data.status == 502) {
          wx.showToast({
            title: res.data.msg,
            icon: "none",
            success: function () {
              wx.redirectTo({
                url: '../userLogin/login?realUrl=' + realUrl,
              })
            }
          })
          return;
        }
        
        me.setData({
          contentValue:"",
          commentsList:[]
        })
        me.getCommentsList(1);
      }
    })
  },
  /**
   * 查询全部评论列表
   */
  getCommentsList:function(page){
      var me =this;
      var serverUrl=app.serverUrl;
      //获取到当前的视频对象
      var video=me.data.video;
      wx.showLoading({
        title: '加载中',
      })
      //调用查询视频留言的接口
      wx.request({
        url: serverUrl + '/video/findComments?videoId=' + video.id+'&page='+page,
        method:"POST",
        success:function(res){
          wx.hideLoading();
          console.log(res.data.data)
          var commentsList=res.data.data.rows;
          var oldcommentsList = me.data.commentsList
          me.setData({
            commentsList: oldcommentsList.concat(commentsList),
            totalPage: res.data.data.totalPage,
            page:res.data.data.page,
            placeholder:"说点什么..."
          })
        }
      })
  },
  onReachBottom:function(){
    var me=this;
    var page= me.data.page;
    var totalPage=me.data.totalPage;
    if(page==totalPage){
      wx.showToast({
        title: '没有更多评论了QAQ',
        icon:"none",
        duration:2000
      })
      return;
    }
    var page=page+1;
    me.getCommentsList(page);
  },
  //回复用户评论的函数
  replyFocus:function(e){
    var me =this;
    //获取到要回复的用户的昵称
    var toNickname = e.currentTarget.dataset.tonickname;
    //获取到要回复的用户的id
    var toUserId = e.currentTarget.dataset.touserid;
 
 
    me.setData({
      commentFocus:true,
      //在点击回复后，输入框会显示回复xxx的信息
      placeholder: "回复:" + toNickname,
      //将要回复的用户id赋值到data中
      toUserId: toUserId

    })
  }