豆郵windows客戶端(第三方)開發詳解


 

  “豆郵”,是社區網站“豆瓣”的一個類似私信的功能模塊。在豆瓣官網,“豆郵”曾一度被改為“私信”,但在遭到眾多豆瓣用戶的強烈反對之后又改了回來。然而,在豆瓣的移動客戶端上,仍稱呼為“私信”。

  豆郵的設定我想最初真的是當做郵件的形式來讓用戶之間交流的,可隨着移動端的普及,豆郵被很多用戶當成了即時通訊軟件來使用,根本停不下來。

  “就不能加個微信qq之類的嗎?”

  “不,那樣不文藝。”

  為了將這種不良的風氣,額,發揚光大,我決定寫一款桌面軟件,好讓眾多豆瓣文藝青年,可以邊工作邊聊天,再也不用頻繁看手機了。

--------------以下才是正文-------------  

一、豆瓣API

  1.使用Fiddler分析安卓客戶端所發出的請求。

  簡要步驟:開啟Fiddler的“允許遠程連接”,設置端口號,手機和電腦需要在同一個wifi網絡下,設置手機wifi的代理到電腦,此時,手機的所有http請求都能夠在Fiddler中監聽到。之后開啟https的監聽,設置host過濾,只監聽豆瓣的api地址。

  其中,在Composer標簽頁中可以清楚的顯示請求的Url,header,body等信息,並且能夠通過隨意修改這些數據進行調試,非常方便。

  之后,我們便得到了豆瓣的各種API接口,包括登錄與注銷、獲取用戶信息,聊天列表,聊天內容,關注列表,消息通知等。

  2.OAuth2.0 認證授權

  在使用用戶名和密碼登錄之后,會生成一個access token以及refresh token。access token 將作為用戶登錄的唯一憑證,使用時將其賦值給header請求中的Authorization: Bearer即可。首次登錄后,我們將access token保存到本地,使用戶下次可以直接登陸而不需要重新輸入用戶名和密碼。

  OAuth2.0將access token設計為短效的,在一定時間內會過期。根據需要我們可以使用refresh token對access token進行刷新,形成新的憑據。具體方法是將請求中的grant_type的值更改為refresh_token即可。

二、使用WPF進行界面繪制

  1.使用XAML高仿了微信windows客戶端的界面。

  界面效果如下:

豆郵主界面

  2.使用web前端構建簡單的聊天窗口。

  聊天窗口使用了WPF自帶的WebBrowser控件,默認內核版本是IE7(可以通過修改注冊表的方式換成更高版本的IE),自然不支持H5以及CSS3。討厭IE的同學,可以使用第三方的瀏覽器內核控件。之后自己動手寫一下CSS樣式以及JS交互,簡單測試一下兼容性問題就OK了。

  3.適配高分辨率屏幕

  WPF原生支持高分辨率,幸福滿滿。

  只是WebBrowser控件在高DPI的屏幕下,沒有按照系統默認進行縮放。還好IE支持zoom屬性,我們通過一定的縮放比例來對網頁的body的zoom屬性進行設置。那如何確定這一比例呢?一般來說96DPI對應100%,144DPI對應150%。OK,問題解決。

四、后台邏輯

  1.多線程分離保證界面流暢

  務必將http請求服務放入后台執行,任何時候都不能讓界面去等待。本例中主要使用Task來進行處理。

  2.“即時”聊天體驗

  豆瓣API中有單獨監測消息提醒的接口,可返回未讀消息數量以及提醒版本號,我們只需對該請求進行輪詢,並比較返回的版本號,就可以做到對未讀消息進行提醒或顯示處理。

  3.MVVM數據綁定模式大大提升了編程體驗。

  用過的都說好。

五、待補充的功能

  1.發送和顯示emoji表情。

  2.搜素新用戶。

六、參考與感謝

  1.受以下文章啟發:

  【完全開源】知乎日報UWP版(上篇):界面設計、官方API分析

  UWP開發之控件:用WebView做聊天框

  2.使用以下開源組件:

  Json.NET

七、開源發布

  軟件在功能完善之后,將開放安裝包與源代碼,共同學習交流。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM