何須苦等VS2015？來看看VS2013下實現移動端的跨平臺開發

原文: 何須苦等VS2015？來看看VS2013下實現移動端的跨平臺開發

　　前一天準備下載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，因此模擬器仍是舊的。

 

 1、編寫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同樣，替換圖標便可。同理，替換對應圖片，能夠修改程序的啓動畫面，如圖：

 

 

 2、引入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~~

 

 

 3、生成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/

 聲明：本博客原創文字只表明本人工做中在某一時間內總結的觀點或結論，與本人所在單位沒有直接利益關係。非商業，未受權，貼子請以現狀保留，轉載時必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接。

若是你們感受個人博文對你們有幫助，請推薦支持一把，給我寫做的動力。