部落格園用戶端(Universal App)開發隨筆 - UAP中的項目和目錄組織

標籤：des   cPage   style   blog   http   io   ar   color   os   

前言

本篇隨筆主要是分享一下做一個Universal App的目錄組織圖，說明什麼樣的結構才能適合一個團隊開發，使開發成員之間的相互影響最小。這些組織好的項目和目錄會成為一個公用的規約，大家都能知道什麼東西應該放在哪裡，或者在什麼地方能找到什麼功能。這對於避免重複寫code或者最大限度地複用code來說是至關重要的。

這種工程結構和目錄劃分雖然沒有什麼理論基礎，但是是經過我們很多項目的經驗總結出來的，如果是個人開發人員，也嚴重建議參考此組織圖，能夠協助你理清思路，做好功能設計和類設計。

項目組織

開發一個Universal App, 如果前篇所說，基本架構在VS裡有了(對不起我這裡不小心裝了個英文版)，先選Universal Apps，再選Blank App，再把App1改成CNBlogs，就可以猛擊OK了。

它預設會幫你建立三個projects：CNBlogs.Windows(Windows 8.1)和CNBlogs.WindowsPhone(Windows Phone 8.1)。還有一個特殊的CNBLogs.Shared，副檔名為.shproj，是被上面兩個project共用的。

如果做一個簡單的UAP，這三個project就足夠了。但是如果涉及到團隊開發的較大的項目，還要有其它一些輔助的Project和其下面的一系列Folders才能夠應付。如所示：

我們建立了以下輔助project：

1）BackgroundTask

2）DataHelper

3）NotificatoinsExtensions

說明如下：

1）BackgroundTask主要完成的任務是後台更新動態磚。這個以後我們說到Windows/Phone的背景工作時，會專門解釋。

2）DataHelper，裡面有兩個folder，一個CloudAPI，裡面針對每一個DataSource(API介面)都有個一個單獨的類來處理，還可以根據各個DataSource的相似性，來抽象更底層的類。另一個是DataModel，就是資料模型類。這個DataHelper我們後續的CloudAPI篇裡會仔細說。

3) NotificatoinsExtensions 這個其實不是我們自己寫的，是直接從MSDN裡的sample裡下載的（按照微軟的建議，但不明白為什麼不做成一個庫，而是以原始碼形式給出）。這個項目裡主要給出了一些協助方法，來簡單地更新磁貼，否則就要直接操作XML資料來更新磁貼，非常容易出錯，而且不容易理解。這個以後講動態磚時才細說。

在這個有個問題：為什麼DataHelper project不放在Shared裡面呢？原因特簡單：因為BackgroundTask也需要訪問DataHelper, 如果放在Shared裡面訪問不到，因為Shared只為Windows/WindowsPhone兩個Project服務。（如果這裡我的理解有什麼錯誤請大蝦們指正）

目錄組織

我們著重說一下Windows, WindowsPhone, Shared三個Project中的檔案夾。

CNBlogs.Windows(Windows 8.1)

1）Assets

裡面裝著那些影像檔，一般有三類：A) Tile類，只為磁貼而做；B) Image類，只為背景圖，裝飾圖之類的而做；C）Icon類，放在AppBar中的表徵圖。如果項目較大，影像檔較多時，可以在這個檔案夾下建立三個子檔案夾，分別為Tile, Image, Icon。

2）Common

這個是系統內建的。如果系統沒有產生這個檔案夾，你在添加一個新的Page時，指定BasicPage，就可以產生它。這個檔案夾裡有個4個檔案，包括了很多協助函數，供處理Navigation時是使用。輕易不動它。

3）Controls

這裡放著你的小寶貝們，就是那些Template Control，或者User Control。如果是Template Control, 這裡面只放一個XXXControl.cs; 如果是User Control, 這裡面放一個XXXControl.xaml, 下面附帶了XXXControl.xaml.cs。關於這兩種Control的區別，我們後續有專門的一篇部落格講解。

5）Pages

這裡面放著你的大寶貝們，就是那些頁面啦。每個頁面都有個單獨的XAML和其下面附帶的.cs檔案來描述其樣式和行為，以及和其他頁面的互動關係。

6）SettingFlyouts

Windows中的設定頁面比較特殊，在右面，是一種規約，滑鼠右鍵或者輕掃右側邊框彈出5個系統按鈕，按下面的“設定”即可進入某個App自己的設定頁面。這些設定頁面其實也是用XAML來表現的。

7）Themes

這裡放的是Template Control的樣式，只有一個Generic.xml，裡面放了所有自訂Template Control的樣式(User Control不在這裡）。不需要把它挪出來放在別的什麼地方，別有潔癖，誰知道移到別的地方會出什麼錯誤。

Folder就這些了，各有各的用處，有的是系統建的，有的是你自己建的，目的只有一個，讓自己和別人可以很快地找到東西。

有一個地方要注意，就是namespace。如果你在Project上右鍵添加一個Page, namespace是CNBlogs； 如果在Pages上添加，namespace是CNBLogs.Pages。都可以，但是要統一，否則要出麻煩。

CNBlogs.WindowsPhone(Windows Phone 8.1)

Windows Phone的Folder們和Windows的基本一樣，只是最下面的Pages和Views的區別，這個只是習慣問題，您隨便。

CNBLogs.Shared

Shared Project有些不一樣了，我們細細說來。

1）Assets

如果Windows/Phone有相同的映像資源（樣子/顏色/尺寸都相同），可以只放一份在這裡。但是目前Windows/Phone的Tile有尺寸上區別，所以Tile部分要分開放。背景圖之類的肯定也不一樣，一大一小。ICON部分可能會一致，因為Windows和Phone下面的AppBar中AppBarButton大小一樣。

2）ControlHelper

這裡面一般放置兩類cs檔案，一類是TemplateSelector，另一類是Converter，就是資料轉換類。這個我們在後面的部落格中專門講（記得提醒我，我已經承諾不少東西了）。這兩類東西，對於Windows/Phone來說是共用的。

3）FunctionHelper

顧名思義，放的是你自己的通用的協助函數類。

4）HTML

可有可無，看項目。如果項目中有用到WebView的，也許需要一些初始的HTML或者css。

5）SampleData

對於大多數應用來說，都需要data支援，有的是用本地data，有的用遠程data。當data沒有到位時（CloudAPI部分還沒有完工），你可以先手工製作一些類比data放這裡，不影響開發進度。

6）Strings

這裡面放的是Resources, 按國家/市場劃分。比如我們只有一個zh-CN子目錄，也許還有個ja-JP子目錄，裡面放著Resources.resw。這個樣子的：

所有介面上用到的字串都扔裡面，比如在zh-CN中有個”Title \t 首頁”,在en-US中必須有個”Title \t Home“來對應，以便在不同國家顯示不同語言。

7）App.xaml和StyleDictionary.xaml

共用的，放這裡沒事兒。尤其是StyleDictionary.xaml，裡面放著所有的顏色，字型，樣式等資訊，你在Windows上的應用使用藍底白字，在Windows Phone上要統一用藍底白字，就靠使用這個檔案裡的資訊了。

小結

在本篇隨筆中，我們強調了CloudAPI的重要性，是因為我們從很多成功的App中總結出雲端資料和服務支援的重要性; 而削弱了MVVM的重要性，是因為我們從實踐中體會到，Model和View都是不可或缺的，但是ViewModel就不是那麼重要了，代碼重複，可讀性差，能替代它的方法很多。至於什麼可自動化的測試性，根本談不上。開發測試一體，有助於節約成本，提高工作效率，增強開發人員的責任心。

 

你可以從這裡下載我們分享的原始碼：

https://code.msdn.microsoft.com/CNBlogs-Client-Universal-9c9692d1

當然更可以直接下載兩個App來看效果，但是由於designer介入較晚，所以UI上面還需要完善，我們會持續更新App。

Windows Phone Store App link:

http://www.windowsphone.com/zh-cn/store/app/部落格園-uap/500f08f0-5be8-4723-aff9-a397beee52fc

Windows Store App link:

http://apps.microsoft.com/windows/zh-cn/app/c76b99a0-9abd-4a4e-86f0-b29bfcc51059

純粹乾淨的App, 裡面絕無廣告，請放心使用。

分享代碼，改變世界！

部落格園用戶端(Universal App)開發隨筆 - UAP中的項目和目錄組織