Windows 8 APP開發小心得(2) - Windows

繼續前一篇的教學(?



4. APP專案的結構

這邊是以XAML/C#和HTML5/Java Script作為開發語言介紹
XAML/Visual Basic或者是XAML/C++(CX)的話，
把XAML/C#裡面的「.cs」換成「.vb」/「.cpp」大致上就相同。

首先是XAML/C#的部分

從預設在右邊的方案總管視窗中就可以看到有以下這些：

「Properties」：裡面只有一個AssemblyInfo.cs，其實可以不用管
「參考」：就跟開發桌面程式一樣，偶爾也是需要使用他人的程式庫，
以Win8 APP而言除預設外，最常被拿來參考的應該是名為Callisto的程式庫
(因為很多東西XAML/C#不知為何沒支援，非得靠外部程式庫，
但據說8.1總算加了部分功能回來)
「Assets」：使用的媒體資料請集中放這邊
(雖然另外弄個資料夾也不是不行，但因為預設的磚圖檔會放這邊，
沒有什麼必要的話其實把你用的圖檔、影片、音樂全塞這裡也無妨)
「Common」：如果你開的是空白範本，那麼裡面只會有StandardStyle.xaml
這個檔案是標準的樣式庫，基本上絕對不能刪，
刪掉的話整個程式就得砍掉重練
當然如果是範本的話，裡面也會有更多程式檔，
也是絕對不能刪，刪了就得砍掉重練的類型

「App.xaml」/「App.xaml.cs」：
整個APP最重要的部分，因為這個是所有APP預設的進入點，
雖然App.xaml並不負責呈現畫面，但是這裡面可以定義很多共用的物件
比方說，如果你想要整個APP都不要是預設的黑色而是藍色等顏色的話，
可以在App.xaml裡面找到<ResourceDictionary>這個標籤後，
在下面寫下這段程式碼：

<SolidColorBrush x:Key="AppBackgroundBrush" Color="Blue"/>

之後存檔就可以在所有APP的頁面把這個拿來用，
下次再介紹這個是幹嘛的，目前先提醒的就是「x:Key」是這個資源的標籤
(或者說是名字，總之就是用來識別的)，
要用的時候呼叫這個標籤就會自動幫你填上去這個內容。

另外，App.xaml.cs這個則是負責把App.xaml寫的東西變成程式的解讀檔，
所以也不能砍掉，砍了就完蛋

「MainPage.xaml」/「MainPage.xaml.cs」：
和上面的相同，這兩個檔是唇齒相依
(或者說只要是「*.xaml」和「*.xaml.cs」就是一樣的原則，不能砍其中一個)
這個就是App進入後第一個呈現的畫面，所以要編輯畫面請編輯這個

首先提醒一下，在Win8 APP裡面，每個頁面會被視作一個同名的「類別」
例如說這個檔案叫做MainPage.xaml，那麼程式面上它的名字就叫MainPage
因此可以活用這點來讓彼此交換變數等資訊。

如果想要換個首頁的話，就要在App.xaml.cs裡面去找這段：

if (!rootFrame.Navigate(typeof(MainPage), args.Arguments))

把裡面的MainPage換成你的新首頁檔名(例如BlankPage之類的)就OK
(因為預設的空白範本其首頁是不支援ViewState切換的)
不過請注意大小寫，C#是非常注意大小寫的，寫過的人應該知道，
所以就算在Win8 APP裡面，編譯器也不會放水讓打錯的大小寫變數通過編譯喔

「(專案名稱)_TemporaryKey.pfx」：這個是不可刪檔案之一，是憑證檔
當你寫好要編譯測試的時候會需要這個。

「package.appxmanifest」：超級必要的檔案，砍了也是準備砍掉重練吧
裡面寫的是關於APP的權限、資訊等宣告事項，
雖然說用Visual Studio開的話，
會出現像是設定視窗一樣的頁面，但這檔案其實是XML檔。
顯示名稱、預設語系、描述、磚的圖案設計、功能和宣告等
全部都必須在這裡設定，沒設定好包準被退件

新增的xaml和xaml.cs要點跟上面的MainPage.xaml/MainPage.xaml.cs相同
所以就不重述了。


HTML5/Java Script部分

相較於XAML程式檔不少，HTML5/Java Script就少多了
(不知道是不是我的錯覺，寫APP這檔事越來越像是寫網頁，
而且智慧型手機/平板的系統幾乎都綁瀏覽器，
(更甚者就像Firefox OS直接說他們是綁瀏覽器來開以HTML5寫的App)
讓我開始懷疑我們寫好的APP會不會其實都是透過瀏覽器在開的，
或者說，其實我們根本不是在選智慧型手機作業系統而是在選智慧型手機瀏覽器？)

「參考」、「(專案名稱)_TemporaryKey.pfx」、「package.appxmanifest」
這三者和上面的相同，故不重述。

「css」：就是放網頁的CSS樣式檔，基本上裡面放的CSS要跟你的網頁同名

「images」：和C#的「Assets」相同，磚圖檔放這邊

「default.html」：程式的進入點，雖然說和C#的App.xaml不同，
這邊編輯的畫面可以直接顯示出來，
但是範本程式碼多半都是用Render頁面的方式，
鮮少直接用這個頁面來顯示畫面的。

「default.js」：這個就是Java Script型APP的中樞，
不過這篇JS格式和平常看到的JS有點不同，格式都是這個樣子：

(function () {
"use strict";
var app = WinJS.Application;
var activation = Windows.ApplicationModel.Activation;

......

})();


簡單說就是平常寫網頁的時候都用<script>......</script>來寫，
不過Win8 APP是把整個JS都包在一個function裡面執行，
而且這function裡面還可以再寫function
(我並不清楚原理是什麼，有看到說法是這樣代表匿名代理函式？)

基本上大致就是這樣，因為我平常都用XAML/C#來寫，
所以以後的教學大致上都以XAML/C#為準
HTML5/Java Script的話，市面已經有兩本中文教學書了，
不過相對而言XAML/C#卻是一本都沒有
(只有一本根本是把微軟官方教學資料變成離線檔的書)

......所以當時找資料找的好頭大，而且更煩悶的是MSDN幾乎是複製貼上的世界
(複製貼上就算了，還不見得是正解......)
最後只得自己蠻幹去不斷嘗試才勉強有一點成果Orz

喔對，直接搜尋也是比較好，雖然出現的大部分都是英文
還有我很想吐槽的是，為什麼Google找到的資料會比微軟你自家的bing還要正確啊！


5. 開始前先注意：請記得重建方案

就算是最初的空白頁面，
直接編譯的話也是可以直接看到一個沒東西的空白頁面出現在你眼前
不過如果你用了範本的話，就要小心一件事了。

不知道Visual Studio是不是太笨，新增預設範本的檔案時，
它常常會找不到程式庫，然後當你試著執行的時候，
就會跳錯誤訊息說找不到範本的程式庫所以不給你編譯。
雖然說關掉重開有高機率可以修復，但也有可能關掉Visual Studio重開還是找不到

碰到這種情況的時候，請直接在方案總管中你的方案上按右鍵，
然後選擇「重建方案」，給他跑一下後，就暫時不會碰這狀況了

說是暫時，是因為就算修好了，偶爾還是會發作的。
(我猜這是Visual Studio的Bug？)


6. 有時與其依賴Blend不如直接動手寫程式碼比較快

安裝Visual Studio的時候除了Visual Studio以外，
還會附贈安裝一個Blend作為設計界面的程式

雖然說編輯VisualState的部分用Blend比手寫程式碼還快，
但是編輯一些細項的時候，我反而會覺得Blend很難用，
有時直接打程式碼都還比較快(個人感覺，不過應該也有人可以把Blend用到出神入化)

所以稍微接觸一下XAML和HTML也是很重要的喔！


7. 動態磚的圖檔設計問題

基本上有四個檔案是必要的：

1. 標誌：也就是所謂的小型磚，大小要150X150
2. 小標誌：會用在應用程式列表的標誌(8.1會把這個直接挪作超小型磚嗎？)，
大小要30X30
3. 市集標誌：會用在市集檢索結果的標誌，大小是50X50
(還是說這個比較有機會在8.1變成超小型磚？)
4. 啟動顯示畫面：需要620X300的大小

這些標誌都可以用透明圖檔，
背景的話可以在上面的背景色彩用HTML的色彩標記碼(例如#0000FF之類的)來標記

不過請記住最好用覆蓋的，而且旁邊的那些縮放比例全部不要做，
不然你會發現你怎麼弄都過不了編譯器(一開始我就被這搞得很頭大)

還有，雖然有預設圖檔，但是絕對不要直接拿預設圖檔就丟市集，
微軟也是會毫不留情給你退件的
(或者甚至是，在本機這邊跑驗證程式的時候就不會給你過了)


8. 上架注意事項

雖然說這個是上架的時候才需要注意，不過後面有幾乎是一大串程式碼的預感
恐怕這個會被淹沒，所以我先在這邊提醒好了：

1. 不見得要完全按照設計導引設計介面，但是差太大的話被退機率很高，
遊戲類的話微軟還會睜隻眼閉隻眼，但是資訊類與工具類不這樣搞退件機率很大

2. 磚絕對要換成自己的圖檔，不然別說是微軟會狠狠退掉你的程式，
甚至連電腦一併安裝的驗證程式都會退你的APP

3. 千萬不要把還沒公開的功能寫在上面然後說近期公開，
不然微軟也是會退的，
我寫那個捷運APP的時候就曾經把常用車站的功能放在上面說敬請期待，
結果第一次丟上去就被微軟打槍了
(現在的話我還在思考要不要用釘選次要磚的方式取代直接列表)

4. 截圖的部分請記得至少要一張，
沒有的話請用Win鍵+PrintScreen鍵照一張，
當然每個功能都用一張也沒問題，但是記得要寫說明

5. 如果你的帳戶沒有設定外匯帳戶的話，
微軟不會准許你賣錢的，這點請注意
(因為郵局帳戶沒辦法收外匯，所以我也沒辦法賣APP，
有沒有人知道哪家銀行有外匯帳戶的？)

6. 操作方式越寫的鉅細靡遺越好，因為測試人員要是哪裏沒辦法操作的話，
他會直接判斷你的APP不合格，到時就麻煩了


今天就先這樣，下次來談談看資料繫結怎麼弄(其實這點我也很需要支援......)

--
#1E_Nje00 民國100年，C洽最後的稀有任務──以及羽月華麗的自爆。

--