商城系統(tǒng) 注冊(cè)

愛(ài)奇藝視頻小程序系統(tǒng)功能開(kāi)發(fā)

2018-06-21|HiShop
導(dǎo)讀:各大視頻網(wǎng)站也開(kāi)始加入了小程序的暗戰(zhàn),在線視頻小程序的無(wú)需下載,從微信端就可以進(jìn)入觀看視頻。下面以愛(ài)奇藝視頻小程序?yàn)榇蠹医庾x視頻小程序的開(kāi)發(fā)案例。...

各大視頻網(wǎng)站也開(kāi)始加入了小程序的暗戰(zhàn),在線視頻小程序的無(wú)需下載,從微信端就可以進(jìn)入觀看視頻。下面以愛(ài)奇藝視頻小程序?yàn)榇蠹医庾x視頻小程序的開(kāi)發(fā)案例。

愛(ài)奇藝視頻小程序系統(tǒng)功能開(kāi)發(fā)

項(xiàng)目功能

  • 首頁(yè)界面
  • 任意點(diǎn)擊視頻縮略圖即可跳轉(zhuǎn)到相關(guān)頁(yè)面
  • 熱點(diǎn)tab的下拉,上滑加載的基礎(chǔ)功能
  • 搜索匹配電影名

這是總的效果

愛(ài)奇藝視頻小程序系統(tǒng)功能開(kāi)發(fā)

詳細(xì)介紹

1.首頁(yè)的輪播圖

這里使用的是小程序的滑塊視圖容器swiper組件,用來(lái)做輪播圖那叫一個(gè)簡(jiǎn)單方便

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

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

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

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

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

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

2.宣傳圖跟著輪播圖改變

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

所以我們可以在js部分通過(guò)獲取到這個(gè)current值,在對(duì)應(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
        })
    }

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

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

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

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

     <swiper-item data-vid="{{item.video_id}}" data-title="{{item.title}}" bindtap="openDetail"></swiper-item>
    
  3. 視頻詳情頁(yè)面獲取到傳過(guò)來(lái)的id之后就可以發(fā)起請(qǐng)求,因?yàn)閣x.request是個(gè)異步操作,需要一點(diǎn)時(shí)間,此處我對(duì)wx.request進(jìn)行了封裝,返回一個(gè)promise的辦法就可以把異步操作變成了同步的啦ヾ(?°∇°?)??

     //video-detail.js
     requestVideo: function(num = 0) {
     util.request({ //封裝的util.request方法
             url: `https://www.easy-mock.com/mock/5b0c37bed0e51c310ce24ab0/iqiyi/media#!method=get`,  //請(qǐng)求地址
             data: { // 請(qǐng)求參數(shù)
                 id: this.data.video_id,
                 tag: 'dramas',
                 langs: 'en'
             }
         })
         .then(res => { //res是返回的數(shù)據(jù)
             //對(duì)數(shù)據(jù)進(jìn)行處理,之后便可通過(guò)數(shù)據(jù)綁定在頁(yè)面顯示響應(yīng)內(nèi)容
         })
     }
    

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

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

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

                    if (data.hasOwnProperty('id')) { //如果請(qǐng)求參數(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)擊的縮略圖相對(duì)應(yīng)的視頻資源
                            }
                        }
                        resolve(returnRes)
                        return;
                    }
                    returnRes = arr;
                }
                resolve(returnRes)
            },
            fail(err) {
                reject(err)
            }
        })
    })
}
}

4.關(guān)鍵字搜索

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

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

     //util.js
     if (data.hasOwnProperty('key')) { //如果請(qǐng)求參數(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)
    
  3. 搜索頁(yè)面使用util.request得到數(shù)據(jù)之后,搜索結(jié)果列表一項(xiàng)一項(xiàng)就可以顯示出來(lái)。重點(diǎn)是(敲黑板),一般來(lái)說(shuō)點(diǎn)擊哪一項(xiàng),在搜索結(jié)果頁(yè)面那一項(xiàng)就會(huì)排在最上面,那我就想要不然再建一個(gè)由點(diǎn)擊的的那一項(xiàng)作為第一項(xiàng)的查詢(xún)結(jié)果數(shù)組,將它存在本地然后在下一個(gè)頁(yè)面取出并顯示!

     //search.js
     clickResult: function(e) {
     let index = e.currentTarget.dataset.num; //點(diǎn)擊了第幾項(xiàng)
     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)擊的那一項(xiàng)
         }
     }
     StorageResult = temp;
     for (let i in result) {
         StorageResult = [...StorageResult, result[i]] //將點(diǎn)擊的那一項(xiàng)作為數(shù)組首位,其他搜索結(jié)果再依次放入
     }
     wx.setStorage({ //在本地緩存搜索結(jié)果
         key: 'searchResult',
         data: StorageResult,
         success: function(res) {
             wx.navigateTo({
                 url: `search-result/search-result?key=${searchVal}` //跳轉(zhuǎn)到下一個(gè)頁(yè)面
             })
         }
     })
     }
    
  4. 另外,搜索結(jié)果會(huì)順帶把集數(shù)羅列出來(lái),那就需要實(shí)現(xiàn)點(diǎn)哪集就在視頻詳情頁(yè)定位到哪集的功能

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

      //video-detail.js
      onLoad: function(option) {
      this.setData({
          video_id: option.id,
          mediaList: null,
      })
      wx.setNavigationBarTitle({ //設(shè)置導(dǎo)航條名稱(chēng)
          title: option.title
      })
      if (option.hasOwnProperty('num')) { //調(diào)用請(qǐng)求資源方法傳入集數(shù)
          this.requestVideo(option.num);
      } else {
          this.requestVideo();
      }
      }
    
  • 請(qǐng)求所有視頻資源之后并遍歷,把當(dāng)前播放地址設(shè)為選中的那集

      requestVideo: function(num = 0) { //沒(méi)有選擇集數(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一樣就改變?cè)摷倪x中狀態(tài)
          if (i.selected) {
              playerUrl = i.video_url
          }
      }
      this.setData({
              mediaList,
              playerUrl
          })
      }
    

 

電話咨詢(xún) 預(yù)約演示 0元開(kāi)店