嗶哩嗶哩uwp 第三方云之幻版是一款針對bilibili（嗶哩嗶哩）所推出的電腦端登錄平臺(tái)。它最大的特點(diǎn)就是免登錄就可以觀看1080+和4K分辨率的視頻，軟件界面也十分簡潔美觀，給你帶來全新的視覺體驗(yàn)，歡迎大家來本站九號下載站免費(fèi)下載體驗(yàn)！

項(xiàng)目聲明

我做這個(gè)應(yīng)用一方面是出于對B站的喜愛，另一方面是對自己的一個(gè)挑戰(zhàn)。我想嘗試將一款移動(dòng)應(yīng)用解構(gòu)并移植到桌面上，這能讓我對移動(dòng)交互與桌面交互有更深的理解。

但該項(xiàng)目由于一些不可抗力，已經(jīng)停止開發(fā)。不再主動(dòng)嘗試修復(fù)bug（除非我自己遇到），也不再開發(fā)新的功能，目前已經(jīng)在 Microsoft Store 中下架。

本應(yīng)用出于學(xué)習(xí)的目的進(jìn)行開發(fā)，不進(jìn)行任何商業(yè)相關(guān)的行為。同時(shí)盡管應(yīng)用能顯示4K清晰度選項(xiàng)，但如果你不是大會(huì)員，則片源也不會(huì)是 4K。

盡管是原生 UWP ，但應(yīng)用在 ARM 設(shè)備，比如 Surface Pro X 上可能無法運(yùn)行，我也不知道具體原因，可能要等有相關(guān)設(shè)備了才能測試。

應(yīng)用不提供觀看直播及視頻下載的功能，原因固然是多方面的，但主要原因還是我沒這需求。

如何使用及安裝

克隆項(xiàng)目到本地

使用 Visual Studio 2019 打開項(xiàng)目

在 package.appxmanifest 中的 Package 選項(xiàng)卡下，重新生成一個(gè)測試證書

重新生成項(xiàng)目并部署

如果你要安裝，請?jiān)谂赃匯elease中下載對應(yīng)你系統(tǒng)的壓縮包，解壓后右鍵install.ps1，根據(jù)提示進(jìn)行安裝。

如果出現(xiàn)需要手動(dòng)安裝證書的情況，請雙擊包內(nèi)的證書，將其導(dǎo)入到本地計(jì)算機(jī)->受信任的根證書目錄中，然后再走一遍應(yīng)用安裝流程即可。

設(shè)計(jì)思路

BiliBili是以移動(dòng)應(yīng)用為主的，在嘗試將BiliBili移植到桌面端或平板端的時(shí)候，我會(huì)用自己淺薄的知識(shí)去嘗試進(jìn)行解構(gòu)并重組，使之符合桌面的審美及操作邏輯。

嗶哩的頁面分為桌面頁面、平板頁面和共享頁面。顧名思義，這是根據(jù)不同的模式創(chuàng)建的UI頁面。在嗶哩的UI設(shè)計(jì)中，副頁（Sub）是一個(gè)非常重要的模塊，由于其獨(dú)立性，在桌面和平板模式中都可以使用，所以共享頁面的主體就是副頁，這能為我節(jié)約很多時(shí)間。

同時(shí)由于API的限制（比如根據(jù)設(shè)備返回固定的視頻條目），不是所有的模塊都能完成轉(zhuǎn)化，所以副頁就成了溝通移動(dòng)應(yīng)用與桌面應(yīng)用的橋梁。用戶能在副頁中找到移動(dòng)界面操作的感覺，不會(huì)有很高的遷移成本。這算是我想出來的比較優(yōu)雅的解決方案了。

在整體的應(yīng)用界面設(shè)計(jì)上，桌面模式是一種相對經(jīng)典的Master-Detail設(shè)計(jì)思路，即左側(cè)導(dǎo)航，右側(cè)顯示詳情。當(dāng)然，應(yīng)用根據(jù)實(shí)際情況進(jìn)行了一些改動(dòng)，豐富了左側(cè)的導(dǎo)航界面，比如將分區(qū)集成在導(dǎo)航欄右上角，在導(dǎo)航欄中顯示用戶信息等。

平板模式的設(shè)計(jì)思路來源于XBOX新界面的游戲詳情，以及以前的WIN8卷軸式設(shè)計(jì)。在不播放視頻的時(shí)候會(huì)有很大的留白（出于實(shí)際設(shè)備機(jī)能的考慮，比如我的小surface go，無力承擔(dān)大量圖片的渲染），在滾動(dòng)方向上基本都是以橫向滾動(dòng)為主。為了豐富視覺表現(xiàn)，在選擇視頻后，應(yīng)用的背景會(huì)變成虛化的視頻封面，以提供一種相對比較騷氣的界面。

雖然在整體界面設(shè)計(jì)上我行我素，但對于細(xì)分控件則盡量向官方應(yīng)用看齊。比如圖標(biāo)、動(dòng)態(tài)卡片、評論等，這些控件的排版和移動(dòng)界面上相差不大。這同樣是為了保留一種B站的味道。

我的想法是，盡管是第三方應(yīng)用，但總要讓人能找到熟悉的感覺。紅燒牛肉面如果換了紫色的包裝，就算配料不變，那也“不是那個(gè)味兒”了；反之，只要保留了那熟悉的包裝，即便logo不是康師傅，也會(huì)讓人感覺“有那味兒了”。

代碼說明

除了Warframe Alerting Prime，嗶哩算是我寫過的最大的軟件了，單論結(jié)構(gòu)復(fù)雜性，嗶哩還猶有過之。

都是摸著石頭過河，我的代碼結(jié)構(gòu)可能顯得有些凌亂，注釋也并不多，但總體結(jié)構(gòu)如下：

BiliBili-Controls：這里存放的是一些比較特殊的控件，要么是協(xié)作者開發(fā)的，要么是我從其他地方移植過來的，當(dāng)時(shí)還考慮到后續(xù)的擴(kuò)展性，還單獨(dú)創(chuàng)建了一個(gè)類庫（現(xiàn)在嘛……杞人憂天了）

BiliBili-Lib：這里放著一些公共類、枚舉定義以及嗶哩嗶哩的核心服務(wù)（在Service文件夾中）

BiliBili-Notification：這是一個(gè)運(yùn)行時(shí)組件，用于創(chuàng)建后臺(tái)任務(wù)，進(jìn)行動(dòng)態(tài)的通知提醒。原本還打算做消息通知的，出了那檔子事兒就沒再做了

BiliBili-UWP：應(yīng)用主程序。主程序通過AppViewModel作為應(yīng)用內(nèi)的運(yùn)行時(shí)狀態(tài)管理器，BiliViewModel作為與BiliBili服務(wù)掛鉤的處理模塊來連接控件、改變狀態(tài)以及管理數(shù)據(jù)。與UI有關(guān)的數(shù)據(jù)類、接口以及枚舉定義等，我都放在了主項(xiàng)目中，而不是Lib類庫里，主要還是為了調(diào)用方便以及分開來方便管理。應(yīng)用創(chuàng)建了大量的自定義控件以及控件樣式模板，這些被分別放在了Components和Template文件夾中，主題定義在Theme文件夾內(nèi)。由于嗶哩是一款中文應(yīng)用，上面的視頻基本都是中文的，所以不提供多語言配置

應(yīng)用的核心播放器被命名為VideoPlayer，放在Components -> Controls文件夾中，魔改的MediaTransportControls在Models -> UI -> Others文件夾中，MTC的樣式定義在Template -> Media.xaml資源字典內(nèi)。

其它的基本沒啥好說的了，項(xiàng)目文件比較多，結(jié)構(gòu)也稍微復(fù)雜一些，全寫到說明文件里不太現(xiàn)實(shí)。好在我寫代碼的時(shí)候喜歡用有意義的名字命名（盡管名字有時(shí)候會(huì)比較長），通過閱讀代碼，你應(yīng)該也可以找到你想要的。