VS2013下實現移動端的跨平臺開發
http://www.th7.cn/Program/Android/201412/336394.shtml
前一天準備下載VS2015預覽版，到VisualStudio官網一看，發現微軟發布了VisualStudio2013的插件——Visual Studio Tools for Apache Cordova，實現跨平臺的開發。官網下載地址：http://www.microsoft.com/en-us/download/details.aspx?id=42675，下面是截圖：
點擊下載擴展插件，雙擊開始安裝，第一次打開出現如下錯誤：
這個是缺少了Windows Management Framework 3.0,下載地址：http://www.microsoft.com/en-us/download/details.aspx?id=42675，下載後安裝，重啟安裝程序即可。
安裝界面如圖，大家根據自己的電腦環境安裝，還要安裝Android SDK、Java環境、iTunes，這些建議都單獨安裝，網速不給力，還不知道安裝到什麽時候，其他的全選，點擊next，完成安裝。不過，貌似微軟官方的ANdroid SDK包含了新的安卓模擬器，大家誰網速快，有時間，任性的，可以看看。我這裏用的是之前現在的Android SDK，所以模擬器還是舊的。
一、編寫Hello，world
打開VS2013，新建項目，選擇TypeScrip項目,如圖：
如果前面你都安裝成功的話，應該會看到以下界面：
有的會出現如下界面：
但是這個錯誤並不影響編譯，仍然可以編譯成功，直接關閉即可。
大家可以先看一下現在的項目結構，如圖：
看上去很像一個web項目，裏面可以看到Android、ios、windows、wp8等幾種應用。
由於我的電腦配置是AMD CPU + WIN7 64位系統，所以無法安裝蘋果虛擬機和WP8的模擬器(必須win8系統及以上)，這裏只能演示Android模擬器的運行效果。大家有條件的可以試試。
既然要寫Hello，world，那麽打開index.html，我們看到如下代碼：
修改Hello，your ... is ready!為Hello，world即可。下面來看看如何運行：
我們可以看到調試選項很多，我們就用默認的第一個，後面說Android Emulator.點擊運行，會看到打開谷歌瀏覽器，如圖：
到這裏，我們的hello，world就完成了。下面來看看在Android模擬器上面是什麽效果，我們選擇Android Emulator，然後點擊運行，註意這裏5037端口被占用會出現錯誤，所以錯誤的請先看看是不是端口被占用了，模擬器啟動不了。可以參考 Android Studio 1.0.2項目實戰——從一個APP的開發過程認識Android Studio 這篇博客模擬器啟動不了的處理辦法。
經過長久的等待，Android模擬器終於啟動了。來看看效果如何吧，如圖：
來看看應用的圖標是什麽，如圖：
是一個很難看的圖片，由於項目面向的是三大移動平臺，所以默認圖標不會是Android，我們來看看如何修改默認圖標。
如圖，替換掉對應目錄的圖片即可，註意圖片尺寸要一樣。我這裏也沒什麽好的圖標，就用默認Android的了。ios和wp8一樣，替換圖標即可。同理，替換對應圖片，可以修改程序的啟動畫面，如圖：
二、引入BootStrap,構建APP
既然使用html + css + js進行開發移動應用，那麽一些第三方的css和js庫就是可以用的，下面來寫一個綜合的實例來看一下。如圖：
哈哈，看到了吧，BootStrap風格的按鈕。下面我們來看看添加了哪些代碼：
看到了吧，就像寫html頁面一樣，添加js方法，綁定即可。當然我們還可以看scripts下面的index.ts,還可以在裏面添加js代碼，實現點擊事件的綁定,如圖：
看這個js代碼，是不是有種模塊化的感覺。並且在VS2013中，addEventListener方法，有很詳細的提示，如圖：
看到了吧，type:"click",就是單機事件，一共122個事件，我們可以選擇需要的進行綁定即可。
我又添加了一個html頁面，通過超鏈接來實現頁面跳轉，從而達到Android中類似Activity的切換。
項目部署到Android模擬器上後，會在debug目錄下面生成apk，我們可以安裝到自己的手機進行測試，我已經在自己的手機上面測試過，和在模擬器上面的效果相同。
關於更多的功能如何實現，我想大概和下面這些ts有關，開來還要學習一下TypeScript~~
三、生成ios和wp8
我們剛剛看了Android的開發流程，下面我們看看我們的項目如何發布為其他平臺的APP，在項目上面點擊右鍵，打開項目屬性窗口：
點擊配置管理器按鈕，打開配置管理器，我們選擇ios，點擊確定，如圖：
接下來，我們看到調試選項變成了如下列表：
為了看到明顯的效果，我們選擇Ripple-iPad3,運行，如圖：
是個iPad的畫面吧，突然發現這裏發現按鈕還可以點擊，不過彈出的消息框都在網頁裏面。大家有iPhone的可以真機測試一下。
總結：
用Html + Js + Css來開發移動端APP，可以將現有的前端框架用到移動端的APP中，如AngularJS、BackboneJS和JQuery，當然還有BootStrap，從而UI的開發和設計變的十分簡單和靈活。在VS2015中，微軟除了 Apache Cordova，還提供了Xamarin的跨平臺方案，大家可以試一試。
關於項目的測試，如果大家用的Intel的CPU和win8系統，可以安裝蘋果虛擬機，在蘋果虛擬機上安裝ios的模擬器進行測試。win8系統可以安裝WP8模擬器，當然支持Android，這樣就實現了多平臺的開發和測試環境。
可能有人會說這樣開發的APP性能不好，但是APP是在客戶端上面運行的，慢那麽一點又有什麽關系，又不是在服務器上面，存在大訪問量，要處理大數據。當然做遊戲開發，有專業的遊戲引擎，還用不到這個。
如果大家感覺這篇文章寫的不錯，請點個贊，給我協作的動力。 歡迎大家可以加入到下面的QQ群進行討論和學習。
在這裏提前祝大家平安夜快樂！
作者：雲霏霏
QQ交流群：243633526
博客地址：http://www.cnblogs.com/yunfeifei/
聲明：本博客原創文字只代表本人工作中在某一時間內總結的觀點或結論，與本人所在單位沒有直接利益關系。非商業，未授權，貼子請以現狀保留，轉載時必須保留此段聲明，且在文章頁面明顯位置給出原文連接。
如果大家感覺我的博文對大家有幫助，請推薦支持一把，給我寫作的動力。
VS2013下實現移動端的跨平臺開發