Win10 UWP開發系列：使用VS2015 Update2+ionic開發第一個Cordova App

原文: Win10 UWP開發系列：使用VS2015 Update2+ionic開發第一個Cordova App

安裝VS2015 Update2的過程是很是曲折的。還好通過不懈的努力，終於折騰成功了。

若是開發Cordova項目的話，推薦你們用一下ionic這個框架，效果還不錯。對於Cordova、PhoneGap、ionic、AngularJS這些框架或庫的關係，我我的理解是這樣，PhoneGap是一個商業項目，用來實現HTML5式的跨平臺開發，後來Adobe公司將其中的核心代碼開源，就是Cordova，Cordova只負責實現JavaScript調用原生代碼的功能，是一個殼，而殼裏具體用什麼樣式，在HTML5層還有不少框架，如ionic、jquery mobile均可以。ionic集成了AngularJS，其實是寫了一些AngularJS的directive，用來簡化開發，ionic又提供了一套css樣式，若是開發web app，也能夠只利用他的css樣式。VS2015對這些框架和類庫都提供了良好的支持。

雖然標題是UWP系列，但實際上我是以Android爲第一平臺寫這個demo的，由於仍是想看看Cordova在Android平臺的表現^_^ ionic已經支持Universal，因此本文最後咱們也能夠編譯成uwp應用來運行一下。

1、環境配置

我想作這樣一個最簡單的功能，顯示一個新聞列表，支持下拉刷新和滾動到底部自動加載更多。這是一個App最簡單的功能，在ionic裏能夠很簡單的實現。對於Angular的部分，我也會在開發過程當中簡單介紹一下。

我學新東西的時候，不太喜歡先看不少概念的東西，而是先作個東西運行起來後，再去研究裏面的概念。因此先建個項目運行一下看看吧。

Ionic主頁地址：http://ionicframework.com/

官方教程是以node.js的命令行來創建項目，還好有VS2015，能夠直接下載ionic的項目模板來開始第一個項目。

ionic模板下載地址：https://visualstudiogallery.msdn.microsoft.com/4e44ba8b-a4c8-4106-b70e-00d63241a54a

Ionic智能感知支持下載地址：https://visualstudiogallery.msdn.microsoft.com/d6279fba-bcff-4857-906d-29faa8a99448/

 

也能夠直接在VS2015的擴展裏搜索ionic：

安裝前兩個便可，第一個是ionic的智能感知插件ionic Pack，第二個是ionic項目模板，支持三種樣式的項目，空白型、漢堡菜單型、Tab型。

2、新建項目

安裝好模板插件以後，新建一個Cordova項目IonicDemo，選Tabs Template：

接下來VS2015會下載不少包：

必定要保持網絡鏈接，否則極可能下載失敗。

嗯我有正常的網絡鏈接，仍是失敗了……

3、項目結構

建好的項目是這樣的：

看一下項目結構，其實咱們須要開發的主要部分都在www目錄裏：

看，和一個簡單的web項目很像吧，css、img、js都有，這就是一個純HTML5的網站。Js目錄裏是Angular的代碼，templates目錄裏放的是頁面。

點開依賴項，發現有未安裝的部分：

不過沒關係，這個未安裝也不影響運行。

4、第一次編譯

如今插上你的安卓手機，運行第一個Cordova程序吧。在菜單上選擇調試設備，推薦用真機調試，我有次用了VS2015的安卓模擬器，速度是很快，但把網絡搞壞了。對於這種簡單的Cordova程序，用Ripple也是能夠的。Ripple是在Chrome裏運行的一個插件，也提供了一些好比GPS、後退鍵等模擬器的功能。

若是是第一次編譯Cordova項目，會下載Gradle，速度比較慢，大概須要半個多小時到更久。最好不要中途終止，否則會發生莫名其妙的錯誤。正常編譯一次後就快了。這是Ripple裏的樣子：

左側是Ripple的一些信息，包括平臺、版本、加速度計、電池狀態等，其中加速度計還能夠模擬手機搖動的效果。

右側是設置、GPS信息、網絡、事件等

其中事件會常常用到：

這裏提供了一些deviceready、backbutton等事件，其中deviceready是Cordova初始化完設備準備完畢後的事件，能夠在裏面作一些處理。Backbutton就是模擬後退鍵了。還能夠提供pause、resume等事件的模擬。

不過對於目前這個簡單的程序來講，基本用不到那麼複雜的功能，能夠點擊Tab欄看看，三個Tab，首頁是一個介紹，第二個是一個聊天列表，第三個是一個開關按鈕。聊天列表點擊的時候還會有頁面切換效果，看着還不錯。

5、Angular的運行方式

接下來就該研究一下了，這些頁面是在哪裏放着呢？又是怎麼組裝起來的呢？

既然www目錄是個網站，固然首先要看看index頁面了。打開index.html頁面，能夠看到，頁面頭部引入了ionic和Angular、Cordova的js文件，其中Cordova上面有一行註釋：

<!-- cordova script (this will be a 404 during development) -->

說明在開發過程當中，這個文件找不到是正常的。

接下來有三行重要的js：

這就是核心的js文件了。Angular和MVC相似，也有model、controller等概念。

接下來是html代碼：

首頁就這麼簡單，這些ion開頭的標籤，就是ionic提供的Angular的directive。Directive是Angular的重要概念，能夠實現了自定義的html擴展。也就是說，ionic其實是編寫了一套Angular的指令來實現這些漂亮的頁面效果。

若是沒接觸過Angular，可能還不太理解。不要緊，接着往下看。

打開www/js/app.js文件，這就是Angular的初始化文件：

看剛纔的Index.html代碼，裏面有

而js裏有一個叫starter的module，這就把html和Angular聯繫起來了。Angular看到ng-app的代碼，就會對這部分進行處理。module 函數有幾個參數，使用了依賴注入，注入了一個controller和一個services。

下面有config函數，這裏使用了Angular的路由，來處理各類頁面的狀態：

也就是說，每一個不一樣的state，對應不一樣的html頁面，使用不一樣的controller。

看tab頁，對應的template是tabs.html。打開：

這裏又是ionic的指令，定義了三個ion-tab，來顯示不一樣的tab頁，對應不一樣的state。

再打開www/js/controller.js文件，裏面就是各個controller的定義了：

這有點相似MVC的概念，每一個頁面都有相應的controller處理。

接下來看Angular的一個重要概念，雙向綁定。咱們剛纔看聊天列表那個頁面，頁面地址是templates/ tab-chats.html，打開：

看ion-item裏面有ng-repeat的代碼，這是Angular的循環，能夠把後面的chat in chats循環顯示處理。那麼chats是哪裏來的呢？打開controller.js:

Controller裏卻是有個chats，但$scope是啥東西？

個人理解，$scope是一個膠水，把controller和view粘起來。Controller裏的東西，都要放在$scope下才能被view訪問到。ChatsCtrl裏定義了一個$scope.chats，而頁面上就能夠用

這樣的代碼，實現綁定。若是你寫過MVC或WPF程序，應該比較容易理解。

那麼chats是哪裏來的呢？ChatsCtrl首先進行了依賴注入，注入了一個Chats，而後函數裏進行了一個賦值操做，Chats.all()

還記得剛纔app.js裏初始化app的時候注入了一個starter.services嗎？如今打開www/js/services.js：

找到了，services是定義在這裏的。這裏使用了Angular的factory，定義了一個名爲Chats的factory，其中的all()方法就是返回一個聊天列表。

通過這樣的分析，咱們就大概瞭解了程序的運行方式，首先Angular會初始化app，注入controller和service，對ionic的指令進行處理，渲染成頁面。

6、添加view及controller

如今能夠考慮咱們的目的了，我想添加一個tab頁，用來顯示一個新聞列表，這個列表也要從網絡接口進行獲取。

首先來添加一個tab頁。打開tabs.html，照貓畫虎加一個ion-tab:

圖標我偷懶就不改了，具體的圖標可參考：http://ionicons.com/ 這裏有ionic自帶的圖標樣式

在templates目錄裏添加一個tab-newsList.html文件。

在controller.js裏，添加一個名爲NewsListCtrl的controller：

在裏面定義一個newsList，即要顯示的新聞列表。

如今修改app.js裏的state，把controller和view關聯起來：

這樣在點擊新聞tab的時候，連接符合tab/newsList，就會找到NewsListCtrl的controller和tab-newsList.html，進行顯示。注意state裏的各類參數，和view代碼的name的對應。

列表的樣子也是照着聊天的頁面寫：

好了，controller有了，view也有了，數據也定義了，但數據從哪來呢？固然要從網絡獲取了。

7、Angular使用promise實現異步的Service

爲了方便演示，我使用了一個新聞網站的api接口：

http://app.thepaper.cn/clt/jsp/v3/nodeContList.jsp?n=25462&WD-UUID=864819028898243&pageidx=1

這個接口是一個GET請求，有三個參數，其中pageidx是頁數。

獲取數據的部分寫在哪呢？咱們參考services裏的Chats，寫在services裏。注意，模板自帶的用了factory，但我這裏用service。其實這兩個東西差很少，我習慣用service。具體的區別能夠參考這個文章：http://www.ng-newsletter.com/25-days-of-angular/day-1 反正我感受除了service能夠自定義一些參數，做用都差很少。

打開services.js，添加如下代碼：

定義一個NewsService，注入$q和$http。由於獲取網絡數據是異步的，Angular裏提供了promis的實現方式，經過調用$q.defer()來建立一個deferred實例，deferred有resolve、reject、notyfy幾個方法，其中resolve是接受結果，reject是拒絕。Promise有一篇文章寫的比較好：http://blog.jobbole.com/51178/如今只知道promise是用來實現異步的就能夠了。$http是Angular內置的http服務，能夠方便的實現get/post等各類網絡請求，用法和jQuery的ajax有點相似。

對了還得看一下接口的返回數據。瀏覽器能夠直接請求那個地址，返回的數據是這樣的：

數據是json格式，若是resultCode爲1，說明返回正常。contList是一個新聞標題的列表。

service裏面這樣寫：

最後，要返回deferred.promise。

8、調用service顯示數據

Service返回的是一個promise，在調用的時候，會使用then方法來接收數據。Then方法有兩個參數，一個是成功後的處理，一個是失敗後的處理。修改controller裏的代碼：

注意不要忘了把NewsService注入進來。

還要改一下頁面的項模板：

如今運行一下看看：

咦？Tab標題怎麼亂碼了呢。這確定是編碼問題了。

在tabs.html文件上點右鍵，選擇打開方式，選擇帶編碼功能的html編輯器：

而後選擇utf-8：

能夠看到，果真亂碼了：

從新輸入中文標題，保存。如今就是utf-8編碼了。有可能VS2015在保存的時候選擇了GB2312。但這種狀況沒找到規律，有時候文件中也有中文就沒錯。若是遇到編碼問題的話就手動改一下吧。

關於ion-list 的顯示樣式，可參考官方文檔，有更多說明：http://ionicframework.com/docs/components/#list

及http://ionicframework.com/docs/api/directive/ionList/

9、下拉刷新和滾動加載更多

列表展現出來了，如今加上下拉刷新和滾動到底部加載更多吧。

Ionic貼心的封裝了這兩個方法。下拉刷新是ionRefresher: http://ionicframework.com/docs/api/directive/ionRefresher/

加載更可能是ion-infinite-scroll: http://ionicframework.com/docs/api/directive/ionInfiniteScroll/

先來看下拉刷新。在controller裏添加如下代碼：

實際上下拉刷新就是從新獲取一下第一頁數據，把數據從新賦值便可。

而後修改view，修改tab-newsList.html文件，在ion-content裏添加如下代碼：

對，就一個ion-refresher就搞定了。

加載更多也是相似，在controller裏添加一個獲取更多的方法：

修改view：

注意，下拉刷新是加在ion-content指令的最前面，而加在更可能是放在最後，都要被ion-content指令包裹起來。

是否是很簡單？想一想uwp裏的下拉刷新……

10、使用VS Code編輯代碼

順便說一下，我在使用ionic pack插件的時候，頻繁遇到了引發VS2015崩潰的問題，目前還沒找到好的解決辦法。其實能夠用VS Code來編碼，安裝後按F1，輸入"擴展"，對你沒看錯，要輸入中文！哈哈VS Code中文化的太完全了。之前都是輸入ext install，如今必須輸入中文命令。而後找ionic和Angular的擴展安裝，就能夠支持智能提示了。

VS Code寫代碼也是很爽的，ionic註釋都是中文的哈哈：

十一，跨平臺

其實用Cordova主要仍是爲了跨平臺，ionic也支持uwp啊，要否則我就很差意思寫成Win10 UWP開發系列了。在調試目標那裏選一下，能夠看到支持n個平臺：

選Universal，鏈接個Win10手機，同樣能編譯運行哦^_^ 是這個樣子的：

能夠看到，tab的位置在下面，跟Android平臺是不同的。Ionic根據各平臺的設計語言進行了定製。但也能夠經過配置項來更改。

iOS由於沒有設備，沒有條件測試了。

若是有沒法編譯或沒法安裝的狀況，能夠試試清理解決方案，再從新編譯便可。我遇到過幾回，都是清理後就能夠安裝調試了。

結語

這個demo到這裏就結束了。查看新聞詳情的頁面跟查看聊天詳情的步驟同樣，就不寫了。這個例子主要是想說明，VS2015對Cordova的支持已經很完善了。這只是一個很簡單的入門例子，更深刻的內容我也在逐步學習。但願有興趣的同窗一塊兒討論。還有很重要的一點，對於跨平臺App開發我一直有這個觀點，跨平臺不是萬能的，要看具體的使用場景。好比簡單的新聞瀏覽app，能夠用Cordova方式，若是涉及到較多調用硬件的場景，仍是原生代碼效率更高。如今也能夠試試Xamarin，VS2015 Update2已經內置了Xamarin的支持，期待之後Xamarin有更好的表現。