爱奇艺视频小程序系统功能开发

2022-04-21 管理员

各大视频网站也开始加入了小程序的暗战，在线视频小程序的无需下载，从微信端就可以进入观看视频。下面以爱奇艺视频小程序为大家解读视频小程序的开发案例。

项目功能

首页界面
任意点击视频缩略图即可跳转到相关页面
热点tab的下拉，上滑加载的基础功能
搜索匹配电影名

这是总的效果

详细介绍

1.首页的轮播图

这里使用的是小程序的滑块视图容器swiper组件，用来做轮播图那叫一个简单方便

使用过爱奇艺小程序的朋友会发现首页简单介绍视频信息的轮播图是布局在页面中间并且每一张图片都不相连的，滑动时很是简洁大方。一开始我是简单的使用，将swiper设置了宽高并使之居中，就产生了下面的结果：只有中间的内容在滑动，并不是想要的效果

那看来即使swiper组件看起来简单也要好好研究一番哪,看了文档之后我发现swiper组件其实是swiper-item在滑动，并且它仅可放置在swiper组件中，宽高自动设置为100%。既然这样，那就去设置swiper-item的宽度好了

swiper{
    width:100%;
}
swiper-item{
    width:80%;
}

emmm好像不太行，似乎每一个swiper-item总是那么分不开啊，那就去设置里面的内容的样式吧

.info-box{
    width: 100%;
    margin: 0 60rpx;
}

总算这样才做到了想要的效果。撒花~

2.宣传图跟着轮播图改变

在这里是使用了swiper的bindchange方法。只要滑动了就会触发，并且有一个current代表当时滑动到第几个。这样想来，swiper好像一个数组，里面包含着很多的swiper-item

所以我们可以在js部分通过获取到这个current值，在对应的图片资源数组中遍历并取出地址，换成宣传图的地址即可

//index.js
        moviepicChange(e) {
        const imgsUrlList = this.data.imgsUrlList; //图片资源
        let bigImg = this.data.bigImg;
        let video_id = this.data.video_id;

        for (let i = 0; i < imgsUrlList.length; i++) {
            if (i == e.detail.current) { //如果current值与图片数组索引值匹配到了，则
                bigImg = imgsUrlList[i].thumbnail; //换掉宣传图片地址
                video_id = imgsUrlList[i].video_id;
            }
        }
        this.setData({
            bigImg: bigImg,
            video_id
        })
    }

3.任意点击视频缩略图即可跳转到相关页面

在这个功能里头，数据处理是我碰到的一大难题了，因为没有后端，我就想试图模拟一下点击一个图片就发送视频id,并由后端返回响应数据的操作，大致思路就是就是通过了一个“中间站”去处理。emmm 可能有一点笨笨的= =。

首先准备好来自Easy-Mock的数据接口

然后在视频缩略图上绑定一下事件，用data-传递想要用于查询的参数

 <swiper-item data-vid="{{item.video_id}}" data-title="{{item.title}}" bindtap="openDetail"></swiper-item>

视频详情页面获取到传过来的id之后就可以发起请求，因为wx.request是个异步操作，需要一点时间，此处我对wx.request进行了封装，返回一个promise的办法就可以把异步操作变成了同步的啦ヾ(?°∇°?)??

 //video-detail.js
 requestVideo: function(num = 0) {
 util.request({ //封装的util.request方法
         url: `https://www.easy-mock.com/mock/5b0c37bed0e51c310ce24ab0/iqiyi/media#!method=get`,  //请求地址
         data: { // 请求参数
             id: this.data.video_id,
             tag: 'dramas',
             langs: 'en'
         }
     })
     .then(res => { //res是返回的数据
         //对数据进行处理，之后便可通过数据绑定在页面显示响应内容
     })
 }

创建一个util工具文件夹，用于提供工具方法。这里就是我模拟后端传回响应数据的地方，先在util.js内获取所有的数据，再根据视频详情页面发送过来的参数对已经获得的数据进行处理，通过返回promise，.then的操作在视频详情页面获得由util.js处理之后的数据。

//util.js    
let util = {
request(opt) {
    let options = Object.assign({},opt); //花括号是目标对象，后面的opt是源对象。进行对象合并：将源对象里面的属性添加到目标对象中去，若两者的属性名有冲突，后面的将会覆盖前面的
    let { url, data} = options; //结构成这两个变量

    return new Promise((resolve, reject) => { //向请求发起页面返回一个promise
        wx.request({ //发送请求
            url,
            data,
            success(res) { //请求到数据之后对数据进行处理
                let returnRes = [];
                if (data.hasOwnProperty('tag')) { 
                    let arr = res.data[data.tag];

                    if (data.hasOwnProperty('id')) { //如果请求参数中有tag，id则进行以下匹配
                        console.log(arr)
                        for (let i in arr) {
                            if (arr[i].video_id === data.id) { 
                                returnRes = arr[i]; //得到跟点击的缩略图相对应的视频资源
                            }
                        }
                        resolve(returnRes)
                        return;
                    }
                    returnRes = arr;
                }
                resolve(returnRes)
            },
            fail(err) {
                reject(err)
            }
        })
    })
}
}

4.关键字搜索

首先是在搜索页面获取到关键字，之后作为请求参数使用上述封装好util.request进行请求与数据处理

在util.js内获取到所有数据之后，在众多数据中通过RegExpObject.test(string)实现关键字的遍历匹配

 //util.js
 if (data.hasOwnProperty('key')) { //如果请求参数是key
 const media = res.data;
 for (let i in media) { //遍历匹配电影名
     for (let j in media[i]) {
         var re = new RegExp(data.key);
         if (re.test(media[i][j].title)) {
             returnRes.push(media[i][j]); //得到匹配好的电影
         }
     }
 }
 resolve(returnRes)
 return;
 }
 resolve(returnRes)

搜索页面使用util.request得到数据之后，搜索结果列表一项一项就可以显示出来。重点是(敲黑板),一般来说点击哪一项，在搜索结果页面那一项就会排在最上面，那我就想要不然再建一个由点击的的那一项作为第一项的查询结果数组，将它存在本地然后在下一个页面取出并显示！

 //search.js
 clickResult: function(e) {
 let index = e.currentTarget.dataset.num; //点击了第几项
 let searchVal = this.data.searchVal; //关键词
 let StorageResult = []; // 用于存在本地的数组

 let temp = [];
 const result = this.data.result;

 for (let i = 0; i < result.length; i++) {
     if (i == index) {
         temp = result.splice(i, 1); //取出点击的那一项
     }
 }
 StorageResult = temp;
 for (let i in result) {
     StorageResult = [...StorageResult, result[i]] //将点击的那一项作为数组首位，其他搜索结果再依次放入
 }
 wx.setStorage({ //在本地缓存搜索结果
     key: 'searchResult',
     data: StorageResult,
     success: function(res) {
         wx.navigateTo({
             url: `search-result/search-result?key=${searchVal}` //跳转到下一个页面
         })
     }
 })
 }

另外，搜索结果会顺带把集数罗列出来，那就需要实现点哪集就在视频详情页定位到哪集的功能

先在wxml里通过data-把id、集数、标题传到下一个页面，在onload里头获取集数

  //video-detail.js
  onl oad: function(option) {
  this.setData({
      video_id: option.id,
      mediaList: null,
  })
  wx.setNavigationBarTitle({ //设置导航条名称
      title: option.title
  })
  if (option.hasOwnProperty('num')) { //调用请求资源方法传入集数
      this.requestVideo(option.num);
  } else {
      this.requestVideo();
  }
  }

请求所有视频资源之后并遍历，把当前播放地址设为选中的那集

  requestVideo: function(num = 0) { //没有选择集数，则集数默认是0
  util.request({
         ...(略)
      })
      .then(res => {
          this.setData({
                  mediaList: res,
                  isLoading: false,
                  playerUrl: res.drama_num[num].video_url //修改播放地址
              })
          this.pickNum(num); //改变集数选择状态
      })
  }

用于改变集数选择状态

  pickNum: function(num) {
  for (let i of mediaList.drama_num) {
      i.selected = parseInt(i.drama_id) === parseInt(num) + 1 //如果选择的集数与视频资源的id一样就改变该集的选中状态
      if (i.selected) {
          playerUrl = i.video_url
      }
  }
  this.setData({
          mediaList,
          playerUrl
      })
  }