故事背景
作者：一个小透明，写着差不多的代码，在前端群经常热心帮忙解答问题，平时喜欢逛B站鬼畜区和科技区
过年前的某天午休，我一边吃饭一边逛B站，不小心手抖点进了B站画友板块，无意中发现这个板块居然是用vue写的。所以就习惯性地打开了f12，所有的请求一目了然。因为之前曾学习过黄轶的音乐课程，就想着自己是否也可以做一个类似的移动端项目，这就是社区app的背景。
github仓库地址
项目预览地址
(阿里云1Mbps的小水管，有可能资源加载比较慢，请大家多包涵= =)
一些预览图
ps.为了避免涉及侵权，所有私人作品均打码，请猛击项目预览地址进行预览。
资料准备
踩坑指南
- B站的请求比较奇怪，首页轮播图使用的是post请求，而评论数据使用的是jsonp请求，所以我们这里要准备两个库，根据它的请求选择合适的方式获取数据
- 我们需要伪造Request Headers里面的Host Origin Referer三个字段来瞒过B站的服务器，这里使用axios在发送请求之前改造一下我们的请求头
如果我们想要实现一些交互功能，比如点赞、关注、收藏等功能，我们是需要登录状态的，这里我试验了一下，我们注册一个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': ' ', }, 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是对我最大的鼓励和支持~