第7章 ：视频展示页开发（7-18 上传视频功能复用与测试 — 7-22 页面重定向）

学习目标：

7-18 上传视频功能复用与测试
7-19 首页进入视频展示页
7-20 横向视频的展示
7-21 小程序的页面拦截
7-22 页面重定向

---

学习内容：

7-18 上传视频功能复用与测试

相当于java的封装函数：即将下面的一段代码复用到不同的地方：

  uploadVideo:function(){
     
    // videoUtil.uploadVideo();
    var me=this;
    
    wx.chooseVideo({
     
      sourceType: ['album'],
      success(res) {
     
        console.log(res);

       var duration=res.duration;
       var tmpheight=res.height;
       var tmpwidth=res.width;
       var tmpVideoUrl=res.tempFilePath;
       var tmpCoverUrl=res.thumbTempFilePath;

       if(duration>11){
     
         wx.showToast({
     
           title: '视频长度不能超过10秒...',
           icon:"none",
           duration:2500
         })
       }else if(duration<1){
     
        wx.showToast({
     
          title: '视频长度不能小于1秒...',
          icon:"none",
          duration:2500
        })
       }else{
     
        //打开选择BGM的页面
        wx.navigateTo({
     
          url: '../chooseBgm/chooseBgm?duration='+duration
          +"&tmpheight="+tmpheight
          +"&tmpwidth="+tmpwidth
          +"&tmpVideoUrl="+tmpVideoUrl
          +"&tmpCoverUrl="+tmpCoverUrl
        })
        }
      }
    })
  }

1、首先在pages的文件的同一目录下新建utils文件夹：

videoUtil.js的代码如下：

function uploadVideo(){
     
    var me=this;
    
    wx.chooseVideo({
     
      sourceType: ['album'],
      success(res) {
     
        console.log(res);

       var duration=res.duration;
       var tmpheight=res.height;
       var tmpwidth=res.width;
       var tmpVideoUrl=res.tempFilePath;
       var tmpCoverUrl=res.thumbTempFilePath;

       if(duration>11){
     
         wx.showToast({
     
           title: '视频长度不能超过10秒...',
           icon:"none",
           duration:2500
         })
       }else if(duration<1){
     
        wx.showToast({
     
          title: '视频长度不能小于1秒...',
          icon:"none",
          duration:2500
        })
       }else{
     
        //打开选择BGM的页面
        wx.navigateTo({
     
          url: '../chooseBgm/chooseBgm?duration='+duration
          +"&tmpheight="+tmpheight
          +"&tmpwidth="+tmpwidth
          +"&tmpVideoUrl="+tmpVideoUrl
          +"&tmpCoverUrl="+tmpCoverUrl
        })
        }
      }
    })
  }

  module.exports={
     
    uploadVideo:uploadVideo

  }

2、需要点击这个按钮来进行上传视频：

在videoInfo.js里面编写代码：
使用var videoUtil=require('../../utils/videoUtil.js')先进行引用，然后在upload函数里面调用即可videoUtil.uploadVideo();

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

Page({
     

  data: {
     
    cover:"cover"

  },

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

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

  showSearch:function(){
     
    wx.navigateTo({
     
      url: '../searchVideo/searchVideo',
    })
  },
  upload:function(){
     
    videoUtil.uploadVideo();
  }

})

7-19 首页进入视频展示页

1、修改前端代码：将之前写死的src变成需要数据绑定的src：

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

2、编写跳转到主页的代码：

前端代码：data-arrindex='{ {index}}'是视频下标，不同的视频下标不一样，是和查询视频的下标一样，只要将下标获取出来，就知道用户所点击的是哪个视频信息页面了，然后将这个视频的信息传到下一个页面即可。

<view style='width:{
     {screenWidth}}px;height:210px;' class='back-img'> 
   <image src="{
     {serverUrl}}{
     {item.coverPath}}" style='width:{
     {screenWidth}}px;height:210px;' mode="aspectFit" bindtap='showVideoInfo' data-arrindex='{
     {index}}'></image>
</view> 

需要在后端的js里面写showVideoInfo函数：

 showVideoInfo:function(e){
     
    var me=this;
    var videoList=me.data.videoList;
    var arrindex=e.target.dataset.arrindex;//拿到視頻的专属下标
    var videoInfo=JSON.stringify(videoList[arrindex]);//返回字符串

    wx.redirectTo({
     
      url: '../videoinfo/videoinfo?videoInfo='+videoInfo,
    })

最后在videoInfo.js里面获取params对象和获取上一个页面传入的参数，并将信息（videoId、src、videoInfo）显示出来，代码如下：

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

    //获取上一个页面传入的参数
    var videoInfo=JSON.parse(params.videoInfo);//將字符串轉化為JSON對象
    me.setData({
     
      videoId:videoInfo.id,
      src:app.serverUrl+videoInfo.videoPath,
      videoInfo:videoInfo
    });

  },

7-20 横向视频的展示

在videoInfo.js里面获取视频的长宽，如果宽》=长，说明视频是横向的，无需参数cover

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

7-21 小程序的页面拦截

前端相应的代码如下：

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

后端代码如下：

  showMine:function(){
     
    wx.navigateTo({
     
      url: '../mine/mine',
    })
  }

增添页面拦截后代码如下：

  showMine:function(){
     

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

    }

7-22 页面重定向

用户无论是从哪个页面跳转过来的，都需要返回到之前，上一个页面：

在login.js里面添加重定向代码：

 onLoad:function(params){
     
      var me=this;
      var redirectUrl=params.redirectUrl;
      redirectUrl=redirectUrl.replace(/#/g,"?");
      redirectUrl=redirectUrl.replace(/@/g,"=");
      me.redirectUrl=redirectUrl;
    },

重定向这里有些许复杂，我也没咋整明白，就先放一放。。。赶后面的进度去了。。。