愛奇藝小程式陪你嗨一夏

前言

在炎熱的夏天裡最美滋滋的事情是什麼呢，我覺得當然是宅在家裡，吹著空調，吃著零食看電視劇電影裡的帥氣小哥哥、漂亮小姐姐了！在閒暇時光我會經常用愛奇藝小程式看視訊，加上現在已經學習了一段時間小程式了，“啪”，動手模仿一個愛奇藝視訊小程式的念頭就產生了。雖然現在還是個小白，但是希望在這趟“愛奇藝小程式之旅”上為各位乘客朋友好好開車（劃掉，好好介紹我的問題與經驗hhh

前期準備

• 微信開發者工具
• 小程式開發文件
• easy-mock：是一個前端介面模擬神器！此處放的是我的資料介面
• 專案圖片資源：如果想要get一下原始碼和圖片，可以借鑑一下這篇文章哦 兩步快速獲取微信小程式原始碼

滴滴 開始發車啦

專案功能

• 首頁介面
• 任意點選視訊縮圖即可跳轉到相關頁面
• 熱點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
        })
    }
  複製程式碼

結束語

學習的時間比較短，做的專案還有超多不完善的，也很多沒有學習到的！但是要我認為要勇於分享 ，才能更好進步(๑´ㅂ`๑)，希望能幫助一些人，也希望有人能多多指點我。

如果說萬事開頭難，現在我邁出了第一步，寫了第一個小程式，第一篇分享文章，就希望自己對技術能一直充滿熱情，多學習多鑽研(握拳！

最後厚臉皮的說喜歡這篇文章的可以點個贊嗎！瘋狂比心！還有這裡是 我的原始碼地址