BiliBili-UWP客户端全解析：把B站“红烧牛肉面“端上Windows桌面

BiliBili-UWP客户端全解析把B站红烧牛肉面端上Windows桌面【免费下载链接】BiliBili-UWPBiliBili的UWP客户端当然是第三方的了项目地址: https://gitcode.com/gh_mirrors/bi/BiliBili-UWPBiliBili-UWP项目代号哔哩是一款基于原生UWP技术构建的B站第三方桌面客户端作者Richasy用一份认真的较真把手机里的B站拆开、重组再按Windows的交互习惯重新端上桌。这篇文章不打算按三步上手的套路走我想从作者的创作故事讲起带你完成部署、玩透播放器细节最后掀开发动机盖看看源码——读完你会发现它既是好用的B站客户端更是一份高质量的UWP学习范本。从一碗换了包装的牛肉面说起打开项目的README第一句就很有意思作者做这个应用一是出于对B站的喜爱二是想挑战自己——把一款移动应用解构并移植到桌面上。这个解构不是照搬。作者在文档里打了个绝妙的比方第三方应用最怕的就是不是那个味儿红烧牛肉面要是换了紫色包装就算配料不变也总觉得别扭反之只要保留熟悉的包装即便logo不是康师傅也会让人有那味儿了。于是你能看到一套很有主见的设计取舍整体布局我行我素细分控件向官方看齐。图标、动态卡片、评论区这些控件的排版几乎和移动端一致目的是保留B站的味道让老用户零成本迁移。这个思路贯穿了整个应用也解释了为什么它看起来和市面上其他B站客户端都不一样。最短路径把代码跑起来假设你现在就拿到了源码从零部署需要什么环境| 项目 | 要求 | | - | - | | 开发工具 | Visual Studio 2019 | | 最低系统 | Windows 10 1809 | | 目标版本 | Windows 10 2004 | | 部署方式 | 本地测试部署 |先做这三步再走最后一步部署git clone https://gitcode.com/gh_mirrors/bi/BiliBili-UWP用 Visual Studio 2019 打开解决方案文件BiliBili-UWP.sln在package.appxmanifest的 Package 选项卡下重新生成一个测试证书重新生成项目并部署如果不想折腾编译直接找对应系统的 Release 压缩包解压后右键install.ps1按提示安装即可。万一遇到需要手动安装证书的提示把包内证书双击导入到本地计算机 → 受信任的根证书目录再走一遍安装流程就行。一个小提醒虽然是原生UWP但应用在 ARM 设备比如 Surface Pro X上可能无法运行作者自己也没找到原因——如果你手头有这类设备反而成了验证这个问题的第一批人。同一颗心两种皮肤装好之后第一次启动你就会撞上这个应用最特别的设计桌面模式与平板模式两套完全不同的UI。桌面模式适合1080P以上显示器采用经典的Master-Detail思路——左侧导航、右侧详情并把分区集成在导航栏右上角、把用户信息放进导航栏信息密度很高同屏渲染资源多对配置的要求也相应高一些。平板模式则完全是另一副面孔灵感来自XBOX新界面的游戏详情页和WIN8的卷轴式设计滚动基本以横向为主操作完全为触摸优化。作者透露了一个可爱的细节——因为自己用的是小surface go机能有限所以特意保留了大面积的留白。而当你选中一个视频应用背景会变成虚化的封面视觉上相当骚气。两套页面之间还藏着一个巧思副页Sub。由于API限制比如根据设备返回固定的视频条目并非所有模块都能完成桌面化改造于是副页就成了沟通移动端与桌面的桥梁被放进所有模式共享的页面里。你能在副页中找到移动端操作的感觉迁移成本几乎为零。仓库里没有保留界面截图但上面的文字足以让你想象出左侧是一列带用户信息的导航右侧是自适应网格排布的卡片墙——具体长什么样建议你自己跑起来亲眼看一看值得。播放器里的那些手滑细节说完外壳聊核心。应用的播放器叫VideoPlayer放在BiliBili-UWP/Components/Controls/VideoPlayer.xaml弹幕渲染用的是NSDanmaku解码引擎是SYEngine连系统自带的MediaTransportControls都被魔改过样式定义在Template/Media.xaml。播放器的好用程度往往藏在快捷键和手势里。我直接把官方Shortcut.txt里的精华整理给你| 按键 | 功能 | | - | - | | ← / → | 播放器回退/前进指定时长 | | ↑ / ↓ | 调高/调低音量 | | F2 | 开启/关闭弹幕 | | F10 | 小窗/退出小窗 | | F11 | 全屏/退出全屏 | | Esc | 退出当前状态全屏、影院、小窗等 | | Space | 播放/暂停 | | Shift S | 截图保存到图片库/Bili ScreenShot|手势操作同样顺手双击播放器切换播放/暂停手指左右滑动调进度、上下滑动调音量鼠标侧键X点一下就能返回上一页——优先返回主页除非副页位于主页之上这个逻辑细节很见功力。它甚至给其他应用留了一个接入入口URI标头richasy-bilibili。想跳转某个视频拼一个richasy-bilibili://navigate?actionvideoaid170001即可支持 aid/bvid/cid也支持 bangumi 的 epid 参数。另外提醒一句应用会显示4K清晰度选项但如果你不是大会员片源依然不会是4K——这算是一个诚实的免责声明。掀开发动机盖四个项目各司其职如果你是个想学UWP的开发者这部分才是重头戏。整个解决方案拆成四个项目分工异常清晰BiliBili-Controls特殊控件库包括自适应的AdaptiveGridView、气泡Bubble、瀑布流StaggeredPanel和虚拟化面板VirtualizingPanel每一个都是可复用的精品BiliBili-Lib公共类库核心服务全在Service文件夹——AccountService、VideoService、AnimeService、ChannelService、TopicService统一由BiliBiliClient调度BiliBili-Notification运行时后台任务组件NewDynamicNotification会静默检查新动态并弹Toast提醒BiliBili-UWP主程序UI与业务逻辑都在这主程序的架构遵循典型的MVVMAppViewModel是应用内的运行时状态管理器BiliViewModel是与B站服务挂钩的处理模块按账号/频道/主页面拆成了几个分部文件两者一个管状态、一个管数据控件和ViewModel之间通过绑定和事件连接。主题方面深色浅色分别定义在BiliBili-UWP/Theme/Dark.xaml和Light.xaml支持跟随系统主题切换控件样式模板统一收在Template/目录。所有文件、图片、接口定义都在主项目里就近管理而不是塞进Lib类库——作者自嘲主要还是为了调用方便这种坦白反而让结构更好理解。停更之后它还剩什么聊到这儿必须交代一句这个项目已经收到官方警告下架作者也明确宣布停止维护、不再主动修bug。但这恰恰不削弱它的价值——它依然是中文互联网里难得一见的移动端→桌面端交互移植完整案例作者本人也承认这是他写过结构最复杂的软件都是摸着石头过河。对普通用户它是一段Windows上B站观影体验的黄金年代对开发者它是四个工程协作、两套响应式UI、一套播放器魔改的活教材。看懂它你就能看懂桌面端应用设计里解构与重组的全部含义。相关资源快捷键完整文档BiliBili-UWP/Others/Shortcut.txtAPI接口定义BiliBili-Lib/Models/Others/Api.cs播放器核心实现BiliBili-UWP/Components/Controls/VideoPlayer.xaml主题样式BiliBili-UWP/Theme/Dark.xaml 与 Light.xaml控件库BiliBili-Controls/如果你也被这种较真打动不妨把项目跑起来亲自去那碗熟悉的牛肉面里尝一口——你会发现它比想象中更有味道。【免费下载链接】BiliBili-UWPBiliBili的UWP客户端当然是第三方的了项目地址: https://gitcode.com/gh_mirrors/bi/BiliBili-UWP创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考