项目背景
- 我个人的开发环境网络堪忧。
- coding之余我喜欢听点声音。
- 目前市面上的产品无法满足我的需求。
功能拆解
界面UI
展开状态：
收起后页面右下角显示个按钮就行。
项目框架
我先展示下packege.js。
{ "name": "bilibili_play", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" }, "dependencies": { "@liripeng/vue-audio-player": "^1.5.3", "dayjs": "^1.11.10", "vue": "^3.2.47", "vue-router": "^4.2.5" }, "devDependencies": { "@vitejs/plugin-vue": "^4.2.1", "axios": "^1.4.0", "element-plus": "^2.3.7", "eslint": "^8.54.0", "eslint-plugin-vue": "^9.19.2", "qs": "^6.11.2", "vite": "^4.3.5", "vite-plugin-eslint": "^1.8.1", "vite-plugin-monkey": "^3.2.0" }}
想要做B站播放器最快的做法就是用浏览器插件， Tampermonkey就非常适合，如果有网站不太符合我的使用体验，我一般就会用插件改造下。
vite-plugin-monkey 这个框架太适合我了，少去了不少搭建过程。
整体用的是vite+vue3 ，steup 写的还不是很熟练，还是选项式走起。纯粹是为了先完成需求typescript就不要了。
总体框架完成就是细枝末节的完善了，把之前项目的axios拦截器删吧删吧就用上了，UI 就使 element-plus ，纯粹是习惯了。
开发过程
早上喝了杯咖啡，趁着药效还在，感觉一鼓作气完成。
主要的时间都用在找B的接口了。这里主要用到了以下几个接口:
获取关注列表 /relation/followings
获取订阅作品列表 /polymer/web-dynamic/v1/feed/all
根据 UP主ID获取作品列表 /v2/medialist/resource/list
获取作品的cid /web-interface/view
获取作品的音频URL /player/playurl
接下来事情就简单了，完成主界面和主要功能，然后获取各种信息就行。
终于在下午2点前完善了大部分功能，音频播放功能我不想重复造轮子（就是懒），在github上找到了 liripeng 大兄弟做的播放器，倍棒！
最后自己用了下，还不错，就这样。
后续开发
- 目前所有的列表都没做加载更多。
- 无法连续播放（主要是我不需要）。
- 界面丑（和我一样）
