一個初學者是如何製作移動端B站畫友社群的

litong534發表於2018-03-02

故事背景

作者：一個小透明，寫著差不多的程式碼，在前端群經常熱心幫忙解答問題，平時喜歡逛B站鬼畜區和科技區

過年前的某天午休，我一邊吃飯一邊逛B站，不小心手抖點進了B站畫友板塊，無意中發現這個板塊居然是用vue寫的。所以就習慣性地開啟了f12，所有的請求一目瞭然。因為之前曾學習過黃軼的音樂課程，就想著自己是否也可以做一個類似的移動端專案，這就是社群app的背景。

github倉庫地址

github.com/litong534/f…

專案預覽地址

rozwel.club/bilibili

(阿里雲1Mbps的小水管，有可能資源載入比較慢，請大家多包涵= =)

一些預覽圖

ps.為了避免涉及侵權，所有私人作品均打碼，請猛擊專案預覽地址進行預覽。

一個初學者是如何製作移動端B站畫友社群的

一個初學者是如何製作移動端B站畫友社群的

一個初學者是如何製作移動端B站畫友社群的

一個初學者是如何製作移動端B站畫友社群的

一個初學者是如何製作移動端B站畫友社群的

資料準備

vue相關知識

vue移動端滾動外掛better-scroll

axios-基於promise的http庫

jsonp外掛

踩坑指南

  • B站的請求比較奇怪，首頁輪播圖使用的是post請求，而評論資料使用的是jsonp請求，所以我們這裡要準備兩個庫，根據它的請求選擇合適的方式獲取資料
  • 我們需要偽造Request Headers裡面的Host Origin Referer三個欄位來瞞過B站的伺服器，這裡使用axios在傳送請求之前改造一下我們的請求頭
    一個初學者是如何製作移動端B站畫友社群的
    這裡的HEADERS被我封裝了一下，因為大部分請求都是需要偽造的

一個初學者是如何製作移動端B站畫友社群的

如果我們想要實現一些互動功能，比如點贊、關注、收藏等功能，我們是需要登入狀態的，這裡我試驗了一下，我們註冊一個B站賬號，從cookie中把我們的資訊貼上到這裡，帶著跟著請求一起傳送過去，在真B站中是可以看到狀態的變更的。我只做了關注/取關功能，其他功能，比如收藏評論等，大家可以大開腦洞嘗試一下~

  • axios預設的提交資料型別是json，但是有些api，比如輪播圖，請求需要的資料型別是application/x-www-form-urlencoded，這時我們就需要使用axios把我們的資料轉換一下
axios({
      url: 'https://api.vc.bilibili.com/oper/v1/banner/getListOnline',
      method: 'post',
      data: {
        'product': 2,
        'platform': 'pc',
        'position_id[0]': 8,
        'csrf_token': '<token>',
      },
      transformRequest: [function (data) {
        let ret = ''
        for (let it in data) {
          ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
        }
        return ret
      }],
      headers: Object.assign(common.HEADERS, {
        'Content-Type': 'application/x-www-form-urlencoded',
      })
    }).then(response => {
      res.json(response.data);
    }).catch(e => console.log(e));
複製程式碼
  • 在網頁端，大部分圖片經過優化，我們接收到的都是webp格式並且進行了裁剪，不過這裡我們移動端要注意：safari瀏覽器在ios端是不支援webp格式的圖片的。
  • 首頁的推薦作品api端實現了分頁查詢，這裡我使用better-scroll的pullUpLoading功能實現了無縫載入，具體實現方式大家可以參看bs的文件和專案程式碼。
  • 專案其實沒有很難的技術點，比較樸實，旨在個人練習以及拋磚引玉，希望大牛輕噴: )
  • 最最重要的一點：最近推送的圖片有些。。。。怎麼說呢。。。。汙圖比較多，我也很絕望啊，我只是用了一下api，本人並不汙 x10086 (-。- ;)

最後。。。本專案中所有的資源均屬於B站以及作者所有，本專案全部程式碼已經開源，您的star是對我最大的鼓勵和支援~

相關文章