從零上手 BiliBili-UWP開源 B 站桌面客戶端的體驗(yàn)與避坑指南【免費(fèi)下載鏈接】BiliBili-UWPBiliBili的UWP客戶端當(dāng)然是第三方的了項(xiàng)目地址: https://gitcode.com/gh_mirrors/bi/BiliBili-UWP一個(gè)深夜還在緩沖的視頻凌晨一點(diǎn)你電腦上開著七八個(gè)標(biāo)簽頁其中一個(gè)正是 B 站視頻拖到 720P 還在轉(zhuǎn)圈彈幕卡成一幀一幀想拖個(gè)進(jìn)度條頁面先白屏三秒。你是不是也經(jīng)歷過這種在 Windows 上看 B 站總覺得不痛快的時(shí)刻后來我找到一款名為BiliBili-UWP的開源桌面客戶端中文名叫嗶哩把 B 站從瀏覽器里搬進(jìn)了原生 Windows 應(yīng)用體驗(yàn)順暢不少。它到底是個(gè)什么樣的應(yīng)用一句話概括BiliBili-UWP 是專門為 Windows 10/11 打造的第三方 B 站客戶端代碼完全開源只為學(xué)習(xí)交流而生。它適合兩類人——想在電腦上更舒服地刷 B 站的普通用戶以及想研究 UWP 應(yīng)用如何設(shè)計(jì)的學(xué)習(xí)者。它最有辨識(shí)度的地方是內(nèi)置了桌面模式和平板模式兩套界面這一點(diǎn)稍后會(huì)展開。但先說兩句實(shí)在話這個(gè)項(xiàng)目因?yàn)槭盏焦俜骄嬉褟奈④浬痰晗录懿⑼Ｖ咕S護(hù)開發(fā)者明確表示不承擔(dān)重度使用。把它當(dāng)作一個(gè)能用的學(xué)習(xí)樣本來體驗(yàn)心態(tài)會(huì)更穩(wěn)。拿到手之后怎么裝起來如果你手頭有 Visual Studio 2019整個(gè)安裝過程其實(shí)很直接克隆倉庫到本地git clone https://gitcode.com/gh_mirrors/bi/BiliBili-UWP用 Visual Studio 2019 打開BiliBili-UWP.sln解決方案文件在BiliBili-UWP項(xiàng)目的Package.appxmanifest里切換到 Package 選項(xiàng)卡重新生成一個(gè)測(cè)試證書選擇 x64 平臺(tái)重新生成并部署不想自己編譯也可以找現(xiàn)成的 Release 壓縮包解壓后右鍵install.ps1按提示執(zhí)行就行。這里藏著一個(gè)最容易卡住的坑Windows 默認(rèn)會(huì)攔截未簽名的應(yīng)用。你需要先到設(shè)置 → 更新和安全 → 開發(fā)者選項(xiàng)里打開開發(fā)人員模式否則部署大概率直接失敗。第一次啟動(dòng)迎面而來的就是這個(gè)經(jīng)典的粉色小電視。對(duì)用戶來說它就是整個(gè)應(yīng)用的第一印象。第一次啟動(dòng)先看什么啟動(dòng)后你會(huì)看到登錄入口。BiliBili-UWP 不替你保存密碼登錄仍走 B 站官方接口賬號(hào)數(shù)據(jù)只在你設(shè)備和 B 站之間流通不經(jīng)過第三方服務(wù)器。登錄后有兩件事值得先做認(rèn)一認(rèn)導(dǎo)航欄桌面模式下分區(qū)入口、搜索框、用戶信息都集中在左側(cè)信息密度比網(wǎng)頁版高不少翻一翻快捷鍵文檔BiliBili-UWP/Others/Shortcut.txt里列了全部快捷鍵和鼠標(biāo)手勢(shì)花兩分鐘掃一遍能省很多事深入體驗(yàn)值得玩味的幾個(gè)細(xì)節(jié)桌面模式左導(dǎo)航、右內(nèi)容的經(jīng)典布局桌面模式采用經(jīng)典的 Master-Detail 思路——左側(cè)導(dǎo)航右側(cè)詳情和你平時(shí)用郵件客戶端、IDE 的習(xí)慣一致基本不用重新學(xué)習(xí)。什么時(shí)候派上用場(chǎng)坐在 1080P 以上的大屏前刷視頻、翻動(dòng)態(tài)、整理收藏時(shí)一屏能裝下更多內(nèi)容效率明顯高于網(wǎng)頁版。平板模式為觸屏而生的橫向卷軸平板模式借鑒了 Windows 8 時(shí)代的卷軸式設(shè)計(jì)主滾動(dòng)方向是橫向的很適合手指滑動(dòng)。選中視頻后背景會(huì)變成虛化的封面圖視覺上挺有辨識(shí)度。什么時(shí)候派上用場(chǎng)在 Surface 這類平板設(shè)備上使用或者不想讓風(fēng)扇狂轉(zhuǎn)時(shí)。它對(duì)硬件要求更低開發(fā)者自己那臺(tái)小 surface go 都能跑得動(dòng)。把常用操作塞進(jìn)鍵盤的播放器播放器的設(shè)計(jì)思路很樸素一切都能用鍵盤完成。按鍵功能Space播放/暫停F11全屏/退出全屏F10小窗/退出小窗F2開啟/關(guān)閉彈幕ShiftS截圖保存到圖片庫的Bili ScreenShot文件夾← / →回退 / 前進(jìn)指定時(shí)長(zhǎng)什么時(shí)候派上用場(chǎng)寫文檔寫累了想掛個(gè)視頻按 F10 切小窗繼續(xù)碼字看到名場(chǎng)面想留檔ShiftS 一鍵截圖不用再開截圖軟件。彈幕和評(píng)論努力保留B 站的味道雖然是第三方應(yīng)用但動(dòng)態(tài)卡片、評(píng)論、彈幕這些細(xì)分控件排版都盡量向官方看齊。開發(fā)者打了個(gè)比方紅燒牛肉面如果換了紫色包裝就算配料不變那也不是那個(gè)味兒了反過來只要包裝足夠熟悉哪怕 logo 不同也會(huì)覺得有那味兒了。什么時(shí)候派上用場(chǎng)刷動(dòng)態(tài)、看評(píng)論區(qū)時(shí)你會(huì)發(fā)現(xiàn)幾乎不需要適應(yīng)成本交互和手機(jī)上差不多。藏在深處的接口讓其他應(yīng)用喚起它應(yīng)用開放了一個(gè) Uri 協(xié)議標(biāo)頭是richasy-bilibili其他應(yīng)用可以借此直接喚起它播放指定視頻例如richasy-bilibili://navigate?actionvideoaid170001什么時(shí)候派上用場(chǎng)如果你會(huì)寫點(diǎn)小腳本或自動(dòng)化工具一行命令就能把打開某個(gè)視頻接進(jìn)自己的工作流。幕后一個(gè)把手機(jī)應(yīng)用搬到桌面的故事打開代碼目錄你會(huì)發(fā)現(xiàn)倉庫被拆成了四個(gè)項(xiàng)目像一支分工明確的小團(tuán)隊(duì)BiliBili-Lib業(yè)務(wù)核心。API 請(qǐng)求、數(shù)據(jù)解析、賬號(hào) / 視頻 / 番劇 / 頻道等核心服務(wù)都在這里相當(dāng)于應(yīng)用的心臟BiliBili-Controls一組通用自定義控件比如自適應(yīng)網(wǎng)格、瀑布流面板BiliBili-Notification后臺(tái)任務(wù)組件負(fù)責(zé)動(dòng)態(tài)通知提醒BiliBili-UWP主程序。所有界面、頁面邏輯和狀態(tài)管理都在這里最巧妙的其實(shí)是副頁設(shè)計(jì)。開發(fā)者面對(duì)一個(gè)很現(xiàn)實(shí)的難題B 站本是手機(jī)應(yīng)用界面習(xí)慣全是按觸屏設(shè)計(jì)的直接搬到桌面會(huì)很別扭可全部重畫工作量又大得離譜。他的解法是——把一批功能獨(dú)立、桌面平板通用的頁面做成共享頁面也就是副頁兩套模式共用同一份實(shí)現(xiàn)。用戶在主界面看到的是桌面化布局點(diǎn)進(jìn)副頁又能找到手機(jī)端熟悉的手感遷移成本被壓到最低。播放器方面核心播放器叫VideoPlayer在BiliBili-UWP/Components/Controls目錄被魔改過的媒體傳輸控件就是控制條那一整套在BiliBili-UWP/Models/UI/Others樣式定義在BiliBili-UWP/Template/Media.xaml。對(duì) UWP 自定義控件感興趣的話這些都是現(xiàn)成的教材。遇到這些問題多半是這幾個(gè)原因如果你部署失敗多半是沒開開發(fā)者模式先到設(shè)置 → 開發(fā)者選項(xiàng)打開開發(fā)人員模式再重試一次如果提示證書不受信任雙擊包內(nèi)證書導(dǎo)入到本地計(jì)算機(jī) → 受信任的根證書目錄然后重新走一遍安裝流程如果播放視頻卡頓先在顯卡設(shè)置里開啟垂直同步試試還不行就到設(shè)置里把默認(rèn)畫質(zhì)調(diào)低如果在 Surface Pro X 這類 ARM 設(shè)備上打不開這是已知問題開發(fā)者也沒定位到原因換 x86 設(shè)備是唯一出路如果你期待 4K 畫質(zhì)沒有大會(huì)員賬號(hào)的話選項(xiàng)里能選 4K但片源并不會(huì)是 4K如果你在找直播和視頻下載功能這個(gè)應(yīng)用明確不做這兩塊別在上面花時(shí)間收尾從體驗(yàn)到學(xué)習(xí)接下來做什么到這里這條體驗(yàn)旅程就走得差不多了。想動(dòng)手試試的話行動(dòng)清單如下克隆倉庫或下載現(xiàn)成的 Release 包打開開發(fā)者模式編譯部署或運(yùn)行 install.ps1花十分鐘把快捷鍵過一遍再登錄賬號(hào)刷一刷遇到問題回到上面的避坑錦囊對(duì)號(hào)入座如果對(duì) UWP 開發(fā)動(dòng)了心思還可以順著三條線繼續(xù)挖看BiliBili-Lib/Service里的核心服務(wù)理解客戶端如何組織網(wǎng)絡(luò)層看BiliBili-Controls里的自定義控件學(xué)習(xí)怎么寫可復(fù)用組件看BiliBili-UWP/Components/Controls/VideoPlayer.xaml體會(huì)復(fù)雜控件的分層思路。它雖然已經(jīng)停止更新但代碼里完整記錄了一個(gè)開發(fā)者把手機(jī)應(yīng)用搬到桌面的思考過程。這份思考本身可能比應(yīng)用更值得帶走。?【免費(fèi)下載鏈接】BiliBili-UWPBiliBili的UWP客戶端當(dāng)然是第三方的了項(xiàng)目地址: https://gitcode.com/gh_mirrors/bi/BiliBili-UWP創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考