零基礎在線製做Windows Phone 8 應用

　　任何用戶（無論你是否會編程），只要你有瀏覽器，均可以使用 Windows Phone App Studio (下文中用App Studio指代) 快速製做出一個屬於你的Windows Phone的應用。

　　在瀏覽器中輸入「http://appstudio.windowsphone.com」，就能夠打開App Studio， 而後用本身的微軟帳戶登陸後便能進行應用的開發。App Studio中提供了不少現成的模板，若是找到一個和本身需求比較相似的，就能夠大大加快咱們開發的效率。

　　爲了幫助你們更好地理解App Studio，本文會演示如何創建一個本身的RSS閱讀器。

 

App Studio 概覽

　　進入App Studio後，選擇「Start New Project」開始一個新項目，而後選擇本身想要的模板後就能夠進入以下的「開發頁面」。

 

　　整個頁面能夠分紅4個功能區，其中第1部分是應用的標題；第二部分是應用開發的4個步驟（內容編輯、樣式編輯、磁貼編輯、發佈信息編輯）；第三部分提供的是一個實時預覽的效果（能夠用鼠標在屏幕上進行拖動操做）；最後一部分是詳細編輯區域，不一樣的「步驟」顯示的內容也不同。

 

　　下面，就開始演示如何創建一個「My Reader」應用。實現的功能是一個相似RSS閱讀器的應用，共訂閱了Charley Blog和博客園兩個RSS源，其中Charley Blog還細分爲「技術」、「生活娛樂」和「雜談」三個子類，點擊每一個子類都能顯示對應的文章。最終效果圖以下：

My Reader 起始界面

 

點擊My Reader中的技術分類後顯示的界面

 

創建一個新的應用

　　進入App Studio以後，選擇「Start new project」開始創建應用。

 

點擊「Start new project」 

 

選擇「Emtpy App」模板

 

點擊「Create」進行建立

 

　　通過簡單幾步，一個使用了「空模板」的應用就算創建成功了，下面開始對應用中的內容進行搭建。

 

編輯應用中的內容

　　若是您玩過Windows Phone，那麼對於下面這張圖確定不陌生。這是咱們常見的一款應用打開後的樣子，左上角是應用的標題，中央會有N個版塊（section），用戶能夠經過手指在屏幕進行拖動，從而選擇本身想要的功能。

 

 

　　若是你已經瞭解了一個應用內容的大概佈局，下面就開始修改「My Reader」的內容。

 

　　修改標題

　　在左上角的文本框內，輸入本身想要的應用標題：My Reader，能夠看到預覽圖中也更新爲「My Reader」。

修改標題

 

　　目前最多隻能插入6大版塊，每一個版塊均可以是「RSS」、「HTML」、「Youtube」、「Flickr」、「Bing」這五大基本類別或「Menu」、「Collection」兩大高級類別中的一種。本文只介紹如何使用「Menu」、「RSS」、「HTML」。

 

　　添加「Charley Blog」菜單版塊

　　點擊「Menu」後彈出「Add Menu section」對話框，在文本框內輸入「菜單版塊」的標題。

「Add Menu section」對話框

 

　　選擇「Confirm（肯定）」以後，菜單版塊就建立好了。

　　可是，如今這個菜單下仍是空空如也~

 

　　添加RSS類別的子菜單

　　按照「My Reader」的需求，該菜單下還要包含「技術」、「生活娛樂」、「雜談」三個子菜單。作到這點很容易，只須要點擊下方灰色的箭頭區域，就能夠展開子菜單的設計。

添加Rss子菜單

 

根據提示輸入想要的名字和RSS地址

 

　　所有子菜單添加完後，以下圖所示：

 

　　修改子菜單的佈局

　　在預覽界面裏，能夠看到三個白點，這即是三個子菜單，只不過長得醜了點，須要進行一點的美化。點擊想要修改的子菜單中的「Edit items」，進入到「Edit section」界面。

Edit section界面

 

在「Layout」區域選擇想要的佈局樣式

 

　　修改子菜單的圖標

　　點擊「Section Title」旁邊的圖標，會彈出選擇圖標的界面。出於方便，我選擇現成的「App Studio Resources」中的圖標。

點擊該圖標

 

選擇圖標的界面

 

選擇「App Studio resources」後，下方出現圖標以供選擇

 

　　修改完成後，會發現圖標已經變成咱們想要的了。

修改完圖標後

　　按照上述辦法對三個子菜單都進行修改後，就會變成以下效果。

 

　　添加RSS版塊

　　Charley Blog版塊已經添加好了。接着添加博客園版塊，添加方式和上面「添加 RSS 類別的子菜單」同樣輸入名字和RSS地址就能夠了。

添加博客園版塊

 

 

　　插入HTML版塊

　　這裏能夠添加 Html5 標記語言，能夠用來放一些不太會變化的內容，好比應用介紹之類的。發佈以後若是進行修改，必須從新發布。

添加Html版塊

 

　　全部版塊添加完後，就會獲得和下圖所示同樣的界面。

 

編輯主題樣式

　　若是以爲黑不溜秋很難看，能夠在「主題樣式」界面中對字體顏色、背景顏色、背景圖案進行修改。比較簡單，就不進行演示了。

 

編輯磁貼

　　App Studio中提供了三種模板進行磁貼設計：Flip template、Cycle template、Iconic template。

 

　　Iconic template

　　最簡單的磁貼，固定在開始屏幕後，根據磁貼的大小顯示對應的圖案。

Iconic template

 

　　Flip template

　　除了Iconic 所具有的功能外，當你把磁貼固定在開始屏幕後，每隔必定時間磁貼就會翻個面（從 front 切換到 back，再從 back 切換回 front）。

Flip template

 

從Front往Back翻轉中

 

從Back往Front翻轉中

 

　　Cycle template

　　除了Iconic所具有的功能外，會從你提供的9張圖片中進行不斷的循環切換。

 

完善發佈信息

　　在這裏能夠修改應用的默認圖標，修改默認的語言。

 

發佈應用

　　點擊右側的「Generate」，會跳出一個選擇框，問你是要生成「Windows Phone 8.0」的應用仍是要生成「Windows Phone 8.0 和 Windows 8.1」的應用。

點擊「Generate」

 

選擇想要的平臺後，點擊「Generate」就會開始生成應用

 

大概幾十秒時間

 

　　生成完後，就會看到以下頁面。

 

安裝應用

　　發佈完成後，系統會自動發一份郵件到你註冊的郵箱，其中包含了安裝應用所須要的證書及剛剛製做的這款應用自己（若是想要在windows phone 8上運行，必須先安裝一個證書，而後才能安裝剛剛製做的這款應用）。

信件正文

 

　　安裝的時候會提示「要安裝企業應用嗎」，點擊肯定就會開始安裝。

 

　　這樣，一款「My Reader」的應用就開發完成了，若是你但願體驗下這款應用，能夠在下面評論中留下您的郵箱，我會發份郵件到您的郵箱，您就能夠直接使用了。