何必苦等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,所以模擬器還是舊的。

 

 一、編寫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/

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

如果大家感覺我的博文對大家有幫助,請推薦支持一把,給我寫作的動力。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM