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

项目功效

• 首页界面
• 恣意点击视频缩略图即可跳转到相关页面
• 热门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 可能有一点笨笨的= =。。。。

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

2. 然后在视频缩略图上绑定一下事务，，用data-转达想要用于盘问的参数

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

3. 视频详情页面获取到传过来的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.要害字搜索

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

2. 在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)
   

3. 搜索页面使用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}` //跳转到下一个页面
            })
        }
    })
    }
   

4. 另外，，搜索效果会顺带把集数枚举出来，，那就需要实现点哪集就在视频详情页定位到哪集的功效

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

    //video-detail.js
    onLoad: 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
        })
    }