乐于分享
好东西不私藏

最近摸鱼做了一个关于B站的移动端APP

最近摸鱼做了一个关于B站的移动端APP

移植了一个移动端音乐播放

为什么要做这个项目?

Biu 是一个开源的 Electron 桌面应用(biu-pc),项目地址:https://github.com/wood3n/biu,把 B 站的音频能力抽出来,提供了完整的 B 站音频播放体验,缺点是只有PC端,没有移动端,作为资深老用户,我认为没有人会喜欢用目标更大的PC摸鱼,基于摸鱼便携性和隐蔽性原则以及对钱包尊重和五四蒙古上单精神的致敬,我做了一个移动端的移植; 

biu~

移动端版本借鉴了 biu-pc 的核心设计思路和交互逻辑,在此基础上用 React Native + Expo 重新实现,针对移动端场景做了一些适配和优化。支持 Android 和 iOS 双平台(但我没有mac没办法调试和打包),经过持续迭代(主要是克劳德老师的努力),已经是一个功能(差不多)完整的音乐播放器了。


核心功能一览

音乐发现与播放

Biu 的首页是一个推荐流,通过 Banner 轮播和列表展示推荐内容。点击即可播放(但是推荐流经常遇到接口报错),支持后台播放和锁屏控制。

播放器本身支持:

  • 多种播放模式:顺序、循环、随机、单曲循环
  • 倍速播放:0.5x 到 2x
  • 进度拖拽
  • 迷你播放条 + 全屏播放器

搜索

支持音频、视频、用户三种类型的搜索,搜索历史本地持久化,随时回溯。

歌单管理

这是最近新增的重点功能:

  • 创建多个本地歌单
  • 从搜索结果、推荐列表直接添加到歌单
  • 歌单内曲目排序、删除
  • 一键替换或追加到当前播放队列

收藏夹同步

登录 B 站账号后,可以直接浏览和播放你的收藏夹内容。

下载管理

支持音频下载到本地,离线也能听。下载记录和本地文件统一管理。(还没做下载入口~)

用户系统

  • 支持扫码、短信、密码三种登录方式
  • GeeTest 行为验证码集成
  • 登录后可查看关注列表、动态、历史记录

技术栈

这个项目的技术选型偏向现代化和高性能:

层级
技术方案
框架
React Native 0.81 + Expo SDK 54
路由
expo-router(文件系统路由)
状态管理
Zustand + Immer
本地存储
react-native-mmkv
网络请求
Axios + WBI 签名鉴权
音频播放
react-native-track-player
样式方案
NativeWind(Tailwind CSS)
列表渲染
@shopify/flash-list
动画
react-native-reanimated
类型校验
TypeScript 5.9 + Zod
测试
Vitest + Testing Library
构建
EAS Build

架构设计

文件系统路由

采用 expo-router 的文件系统路由方案:

app/├── (tabs)/           # 底部 Tab 导航│   ├── index.tsx     # 推荐│   ├── search.tsx    # 搜索│   ├── playlist.tsx  # 歌单│   ├── favorite.tsx  # 收藏│   ├── download.tsx  # 下载│   └── settings.tsx  # 设置├── player.tsx        # 全屏播放器(Modal)├── auth/login.tsx    # 登录├── collection/[id].tsx  # 收藏夹详情├── playlist/[id].tsx    # 歌单详情├── user/[id].tsx        # 用户主页└── ...

状态管理

用 Zustand 管理全局状态,配合 MMKV 做持久化。核心 Store 包括:

  • play-list — 播放队列、当前曲目、播放控制(最复杂的一个,近 900 行)
  • play-progress — 播放进度追踪
  • settings — 主题、音质、偏好设置
  • playlist-manager — 歌单 CRUD
  • user / token — 用户认证状态
  • download — 下载任务管理

网络层

请求层封装了 B 站的 WBI 签名机制,自动处理 Cookie 提取和 Token 刷新。每个 API 对应一个独立的 service 文件。

主题系统

支持亮色 / 暗色 / 跟随系统三种模式,主色调为 #1ed760。通过 NativeWind 的 dark mode 支持实现无缝切换。


一些技术细节

后台播放

使用 react-native-track-player 实现真正的后台音频播放。注册了 headless service,即使 App 在后台也能响应耳机按键和通知栏控制。

高性能列表

推荐列表和搜索结果使用 @shopify/flash-list 替代 FlatList,在大数据量下保持流畅滚动。

WBI 签名鉴权

B 站的接口需要 WBI 签名验证。项目中实现了完整的签名算法,包括 MD5 哈希和参数排序,确保每个请求都能通过验证。

数据持久化

所有关键状态通过 Zustand 的 persist 中间件 + MMKV 存储引擎实现持久化。MMKV 是微信团队开源的高性能 KV 存储方案,读写速度远超 AsyncStorage。


项目现状

目前 Biu 已经(基本)完成了核心功能的开发,包括:

  • 完整的音频播放链路
  • 搜索和推荐
  • 收藏夹浏览
  • 歌单管理(新功能)
  • 用户登录和个人中心
  • 暗色模式

Android APK 已经可以直接安装使用。这里好像不能提供下载链接,开源私信我要吧,或者等我上传git。


写在最后

Biu 是一个纯粹的开源项目,禁止商业化,禁止盈利,目标也很简单:让听 B 站音频这件事变得更舒服,以及不浪费B站伟大的上传资源(以及反抗资源longduan)。

技术上,它是一个比较完整的 React Native 实践案例,涵盖了音频播放、复杂状态管理、网络鉴权、文件下载、主题切换等常见场景。 跟克劳德老师一起整理整理代码,准备放出来开源~ 如果你有任何建议或想法,欢迎交流。

最后感谢克劳德老师的帮助: