摘要：只要滑動了就會觸發(fā)，并且有一個代表當(dāng)時滑動到第幾個。可能有一點(diǎn)笨笨的。

在炎熱的夏天里最美滋滋的事情是什么呢，我覺得當(dāng)然是宅在家里，吹著空調(diào)，吃著零食看電視劇電影里的帥氣小哥哥、漂亮小姐姐了！在閑暇時光我會經(jīng)常用愛奇藝小程序看視頻，加上現(xiàn)在已經(jīng)學(xué)習(xí)了一段時間小程序了，“啪”，動手模仿一個愛奇藝視頻小程序的念頭就產(chǎn)生了。雖然現(xiàn)在還是個小白，但是希望在這趟“愛奇藝小程序之旅”上為各位乘客朋友好好開車（劃掉，好好介紹我的問題與經(jīng)驗hhh

微信開發(fā)者工具

小程序開發(fā)文檔

easy-mock：是一個前端接口模擬神器！此處放的是我的數(shù)據(jù)接口

項目圖片資源：如果想要get一下源碼和圖片，可以借鑒一下這篇文章哦 兩步快速獲取微信小程序源碼

滴滴 開始發(fā)車?yán)?/p> 項目功能

首頁界面

任意點(diǎn)擊視頻縮略圖即可跳轉(zhuǎn)到相關(guān)頁面

熱點(diǎn)tab的下拉，上滑加載的基礎(chǔ)功能

搜索匹配電影名

這是總的效果

這里使用的是小程序的滑塊視圖容器swiper組件，用來做輪播圖那叫一個簡單方便

使用過愛奇藝小程序的朋友會發(fā)現(xiàn)首頁簡單介紹視頻信息的輪播圖是布局在頁面中間并且每一張圖片都不相連的，滑動時很是簡潔大方。一開始我是簡單的使用，將swiper設(shè)置了寬高并使之居中，就產(chǎn)生了下面的結(jié)果：只有中間的內(nèi)容在滑動，并不是想要的效果

那看來即使swiper組件看起來簡單也要好好研究一番哪,看了文檔之后我發(fā)現(xiàn)swiper組件其實是swiper-item在滑動，并且它僅可放置在swiper組件中，寬高自動設(shè)置為100%。既然這樣，那就去設(shè)置swiper-item的寬度好了

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

結(jié)果就成了這個樣子:

emmm好像不太行，似乎每一個swiper-item總是那么分不開啊，那就去設(shè)置里面的內(nèi)容的樣式吧

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

總算這樣才做到了想要的效果。撒花~

在這里是使用了swiper的bindchange方法。只要滑動了就會觸發(fā)，并且有一個current代表當(dāng)時滑動到第幾個。這樣想來，swiper好像一個數(shù)組，里面包含著很多的swiper-item

所以我們可以在js部分通過獲取到這個current值，在對應(yīng)的圖片資源數(shù)組中遍歷并取出地址，換成宣傳圖的地址即可

//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值與圖片數(shù)組索引值匹配到了，則
                bigImg = imgsUrlList[i].thumbnail; //換掉宣傳圖片地址
                video_id = imgsUrlList[i].video_id;
            }
        }
        this.setData({
            bigImg: bigImg,
            video_id
        })
    }

效果是這樣子滴

在這個功能里頭，數(shù)據(jù)處理是我碰到的一大難題了，因為沒有后端，我就想試圖模擬一下點(diǎn)擊一個圖片就發(fā)送視頻id,并由后端返回響應(yīng)數(shù)據(jù)的操作，大致思路就是就是通過了一個“中間站”去處理。emmm 可能有一點(diǎn)笨笨的= =。

首先準(zhǔn)備好來自Easy-Mock的數(shù)據(jù)接口

然后在視頻縮略圖上綁定一下事件，用data-傳遞想要用于查詢的參數(shù)

視頻詳情頁面獲取到傳過來的id之后就可以發(fā)起請求，因為wx.request是個異步操作，需要一點(diǎn)時間，此處我對wx.request進(jìn)行了封裝，返回一個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: { // 請求參數(shù)
            id: this.data.video_id,
            tag: "dramas",
            langs: "en"
        }
    })
    .then(res => { //res是返回的數(shù)據(jù)
        //對數(shù)據(jù)進(jìn)行處理，之后便可通過數(shù)據(jù)綁定在頁面顯示響應(yīng)內(nèi)容
    })
}

創(chuàng)建一個util工具文件夾，用于提供工具方法。這里就是我模擬后端傳回響應(yīng)數(shù)據(jù)的地方，先在util.js內(nèi)獲取所有的數(shù)據(jù)，再根據(jù)視頻詳情頁面發(fā)送過來的參數(shù)對已經(jīng)獲得的數(shù)據(jù)進(jìn)行處理，通過返回promise，.then的操作在視頻詳情頁面獲得由util.js處理之后的數(shù)據(jù)。

//util.js    
let util = {
request(opt) {
    let options = Object.assign({},opt); //花括號是目標(biāo)對象，后面的opt是源對象。進(jìn)行對象合并：將源對象里面的屬性添加到目標(biāo)對象中去，若兩者的屬性名有沖突，后面的將會覆蓋前面的
    let { url, data} = options; //結(jié)構(gòu)成這兩個變量

    return new Promise((resolve, reject) => { //向請求發(fā)起頁面返回一個promise
        wx.request({ //發(fā)送請求
            url,
            data,
            success(res) { //請求到數(shù)據(jù)之后對數(shù)據(jù)進(jìn)行處理
                let returnRes = [];
                if (data.hasOwnProperty("tag")) { 
                    let arr = res.data[data.tag];

                    if (data.hasOwnProperty("id")) { //如果請求參數(shù)中有tag，id則進(jìn)行以下匹配
                        console.log(arr)
                        for (let i in arr) {
                            if (arr[i].video_id === data.id) { 
                                returnRes = arr[i]; //得到跟點(diǎn)擊的縮略圖相對應(yīng)的視頻資源
                            }
                        }
                        resolve(returnRes)
                        return;
                    }
                    returnRes = arr;
                }
                resolve(returnRes)
            },
            fail(err) {
                reject(err)
            }
        })
    })
}
}

首先是在搜索頁面獲取到關(guān)鍵字，之后作為請求參數(shù)使用上述封裝好util.request進(jìn)行請求與數(shù)據(jù)處理

在util.js內(nèi)獲取到所有數(shù)據(jù)之后，在眾多數(shù)據(jù)中通過RegExpObject.test(string)實現(xiàn)關(guān)鍵字的遍歷匹配

//util.js
if (data.hasOwnProperty("key")) { //如果請求參數(shù)是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得到數(shù)據(jù)之后，搜索結(jié)果列表一項一項就可以顯示出來。重點(diǎn)是(敲黑板),一般來說點(diǎn)擊哪一項，在搜索結(jié)果頁面那一項就會排在最上面，那我就想要不然再建一個由點(diǎn)擊的的那一項作為第一項的查詢結(jié)果數(shù)組，將它存在本地然后在下一個頁面取出并顯示！

//search.js
clickResult: function(e) {
let index = e.currentTarget.dataset.num; //點(diǎn)擊了第幾項
let searchVal = this.data.searchVal; //關(guān)鍵詞
let StorageResult = []; // 用于存在本地的數(shù)組

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

for (let i = 0; i < result.length; i++) {
    if (i == index) {
        temp = result.splice(i, 1); //取出點(diǎn)擊的那一項
    }
}
StorageResult = temp;
for (let i in result) {
    StorageResult = [...StorageResult, result[i]] //將點(diǎn)擊的那一項作為數(shù)組首位，其他搜索結(jié)果再依次放入
}
wx.setStorage({ //在本地緩存搜索結(jié)果
    key: "searchResult",
    data: StorageResult,
    success: function(res) {
        wx.navigateTo({
            url: `search-result/search-result?key=${searchVal}` //跳轉(zhuǎn)到下一個頁面
        })
    }
})
}

另外，搜索結(jié)果會順帶把集數(shù)羅列出來，那就需要實現(xiàn)點(diǎn)哪集就在視頻詳情頁定位到哪集的功能

先在wxml里通過data-把id、集數(shù)、標(biāo)題傳到下一個頁面，在onload里頭獲取集數(shù)

//video-detail.js
onLoad: function(option) {
this.setData({
    video_id: option.id,
    mediaList: null,
})
wx.setNavigationBarTitle({ //設(shè)置導(dǎo)航條名稱
    title: option.title
})
if (option.hasOwnProperty("num")) { //調(diào)用請求資源方法傳入集數(shù)
    this.requestVideo(option.num);
} else {
    this.requestVideo();
}
}

請求所有視頻資源之后并遍歷，把當(dāng)前播放地址設(shè)為選中的那集

requestVideo: function(num = 0) { //沒有選擇集數(shù)，則集數(shù)默認(rèn)是0
util.request({
       ...(略)
    })
    .then(res => {
        this.setData({
                mediaList: res,
                isLoading: false,
                playerUrl: res.drama_num[num].video_url //修改播放地址
            })
        this.pickNum(num); //改變集數(shù)選擇狀態(tài)
    })
}

用于改變集數(shù)選擇狀態(tài)

pickNum: function(num) {
for (let i of mediaList.drama_num) {
    i.selected = parseInt(i.drama_id) === parseInt(num) + 1 //如果選擇的集數(shù)與視頻資源的id一樣就改變該集的選中狀態(tài)
    if (i.selected) {
        playerUrl = i.video_url
    }
}
this.setData({
        mediaList,
        playerUrl
    })
}

學(xué)習(xí)的時間比較短，做的項目還有超多不完善的，也很多沒有學(xué)習(xí)到的！但是要我認(rèn)為要勇于分享 ，才能更好進(jìn)步(?′?`?)，希望能幫助一些人，也希望有人能多多指點(diǎn)我。

如果說萬事開頭難，現(xiàn)在我邁出了第一步，寫了第一個小程序，第一篇分享文章，就希望自己對技術(shù)能一直充滿熱情，多學(xué)習(xí)多鉆研(握拳！

最后厚臉皮的說喜歡這篇文章的可以點(diǎn)個贊嗎！瘋狂比心！還有這里是 我的源碼地址