愛奇藝小程序陪你嗨一夏

前言

在炎熱的夏天裏最美滋滋的事情是什麼呢，我以爲固然是宅在家裏，吹着空調，吃着零食看電視劇電影裏的帥氣小哥哥、漂亮小姐姐了！在閒暇時光我會常常用愛奇藝小程序看視頻，加上如今已經學習了一段時間小程序了，「啪」，動手模仿一個愛奇藝視頻小程序的念頭就產生了。雖然如今仍是個小白，可是但願在這趟「愛奇藝小程序之旅」上爲各位乘客朋友好好開車（劃掉，好好介紹個人問題與經驗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
      })
  }

結束語

學習的時間比較短，作的項目還有超多不完善的，也不少沒有學習到的！可是要我認爲要敢於分享 ，才能更好進步(๑´ㅂ`๑)，但願能幫助一些人，也但願有人能多多指點我。

若是說萬事開頭難，如今我邁出了第一步，寫了第一個小程序，第一篇分享文章，就但願本身對技術能一直充滿熱情，多學習多鑽研(握拳！

最後厚臉皮的說喜歡這篇文章的能夠點個贊嗎！瘋狂比心！還有這裏是 個人源碼地址