轉載自乎聲 前 一天準備下載VS2015預覽版，到VisualStudio官網一看，發現微軟發佈了VisualStudio2013的插件——Visual Studio Tools for Apache Cordova，實現跨平臺的開發。官網下載地址：http://www.microsoft.com/ ...
轉載自乎聲
前 一天準備下載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是在客戶端上面運行的，慢那麼一點又有什麼關係，又不是在伺服器上面，存在大訪問量，要處理大數據。當然做游戲開發，有專業的游戲引擎，還用不到這個。
