Ionic開發實戰

折磨的兩個月！Ionic從零單排，到項目發佈！遇到了很多問題但都一一解決了，此篇文章留作記錄。 
當初想着因爲項目不大人力足夠的並且因爲團隊沒有移動開發經驗的情況下，是不是能夠是用hybrid app來代替原生來完成這個項目，經過一些技術調研之後選擇了Ionic。當時是對Ionic一無所知，憑藉一些盲目的自信，想着方正有開發文檔能有什麼問題呢。現在想想都覺得當時有點衝動萬一中間出現什麼坑或者無法解決的問題都找不到可以諮詢的人。不過好歹結果是好的，基本實現了當初需求設計，並且效果還不錯。

因爲Ionic是基於AngularJS框架開發的，所以在使用Ionic之前需要對angularjs有一定的瞭解。 
可以看我另一篇文章：

http://blog.csdn.net/i348018533/article/details/50779248

步驟：

1.Ionic環境安裝

Ionic開發是依賴於Nodejs環境的，所以在開發之前我們需要安裝好Nodejs。下載安裝：http://nodejs.org/ 
安裝完成之後打開PowerShell輸入命令node -v和npm -v驗證是否安裝成功，如果返回版本號則說明成功。 
在PowerShell命令行中執行：

npm install -g cordova ionic 

• 1

• 1

這是使用npm包管理器安裝cordova和ionic，-g的意思是全局安裝，全局安裝後在PowerShell中任何目錄下都可以使用cordova和ionic的命令。

PS. 安裝過程需要打開VPN翻牆，貌似是資源被牆了，無語。

2.創建Ionic項目

Ionic官網提供了三個項目模板blank、tabs和sideMenu ，參閱：http://ionicframework.com/getting-started/ 
我們使用blank空模板創建一個我們的應用，並且完成一個簡單的tabs導航的小應用，打開PowerShell cd到開發目錄，執行：

ionic start myIonic blank

• 1

• 1

其中myIonic爲我們的項目名稱 
執行過程它會從github下載項目源碼，請等待。。。 
執行完畢後你到開發目錄下查看會發現多了一個名爲myIonic的文件夾，這個文件夾就是Ionic項目的所在目錄了。 
目錄下有以下文件：

hooks           //google之後這個目錄應該是在編譯cordova時自定義的腳本命令，方便整合到我們的編譯系統和版本控制系統中
plugins         //cordova插件的目錄，插件的安裝下一節詳述
scss            //scss文件，發佈時編譯這個目錄下的文件輸出到www的css目錄中
www             //我們的開發目錄，頁面、樣式、腳本和圖片都放在這個目錄下
--css
--img
--js
--lib
--index.html
bower.json      //bower配置文件
config.xml      //Ionic的配置文件 ⱃ可以配置app的id，名稱、描述起始頁和一起其他配置
gulpfile.js     //gulp構建工具的執行文件，在這個文件中創建任務實現編譯scss，css、js優化等
ionic.project   //Ionic的項目文件可以配置Ionic命令中livereload的監控文件
package.json    //npm配置文件

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14

在開發初期的調試我們一般會使用瀏覽器作爲我們的調試工具，Ionic提供了一個serve命令爲我們的應用創建web站點可以非常方便的調試應用， cd到開發目錄下，執行命令：

ionic serve

• 1

• 1

執行完畢後Ionic會自動幫我們打開我們的默認瀏覽器並跳轉到我們的應用頁面，瀏覽器打開頁面時Ionic已經給我們開啓了livereload模式，開啓之後我們編輯www下的文件後保存時Ionic會通過websocket通知瀏覽器刷新頁面，我們就不用每次修改完畢手動刷新頁面了，又極大的提高了我們的工作效率。

PS. 開啓livereload後Ionic會默認監聽www下面的文件，如果需要自定義的話請編輯ionic.project的watchPatterns來設置需要監聽的範圍

{
  "name": "myIonic",
  "app_id": "",
  "watchPatterns": [
        "www/js/*",
        "www/js/*/*",
        "www/*.html",
        "www/templates/*.html",
        "www/css/*.css"
   ]
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

www/index.html作爲我們的程序入口文件，首先編輯這個文件，在body標籤中加入

<ion-nav-bar class="bar-positive">
  <ion-nav-back-button>
  </ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>

• 1
• 2
• 3
• 4
• 5

• 1
• 2
• 3
• 4
• 5

這段標籤對於對Ionic不熟悉的人來說可能有點陌生，Ionic針對移動端自定義了一套樣式庫，並且使用Angular的指令封裝了各個模塊，ion-nav-bar是導航頁面頭部、ion-nav-view是導航內容頁面。inde.html入口頁面我們已經寫完了，接下來我們新建兩個我們自己的頁面。我們在www目錄下新建一個templates文件夾，存放我們的頁面並新建頁面：tabs.html 作爲我們tab應用的主頁面：

tabs.html

<ion-tabs class="tabs-icon-top tabs-positive">

  <ion-tab title="Home" icon="ion-home" href="#/tab/home">
    <ion-nav-view name="home-tab"></ion-nav-view>
  </ion-tab>
  <ion-tab title="About" icon="ion-ios-information" href="#/tab/about">
    <ion-nav-view name="about-tab"></ion-nav-view>
  </ion-tab>

</ion-tabs>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

ion-tab爲tab應用的底部菜單項 title是菜單按鈕顯示的文字，icon是菜單按鈕圖標，href是點擊菜單的跳轉地址，子元素ion-nav-view是點擊菜單後子頁面顯示的位置，ion-nav-view屬性name爲該tab的名稱，後面添加子頁面會詳細描述。

然後在app.js中加入該頁面的路由

$stateProvider
      .state('tabs', {
          url: "/tab",
          templateUrl: "templates/tabs.html",
      })
$urlRouterProvider.otherwise("/tab");

• 1
• 2
• 3
• 4
• 5
• 6

• 1
• 2
• 3
• 4
• 5
• 6

保存之後頁面會自動刷新顯示的應該是介個樣子： 
 
哈，我們tab應用的大概樣子已經出來了，但是現在點擊下面的菜單並沒有什麼反應，接下來我們就要開始添加我們的子頁面了，在templates文件夾中新建：home.html、facts.html、about.html 
home.html 首頁

<ion-view view-title="Home">
    <ion-content class="padding">
      <p>
        <a class="button icon icon-right ion-chevron-right" href="#/tab/facts">Scientific Facts</a>
      </p>
    </ion-content>
</ion-view>

• 1
• 2
• 3
• 4
• 5
• 6
• 7

• 1
• 2
• 3
• 4
• 5
• 6
• 7

facts.html

<ion-view view-title="Facts">
    <ion-content class="padding">
      <p>
        <a class="button icon icon-right ion-chevron-right" href="#/tab/home">Home</a>
      </p>
    </ion-content>
</ion-view>

• 1
• 2
• 3
• 4
• 5
• 6
• 7

• 1
• 2
• 3
• 4
• 5
• 6
• 7

about.html

<ion-view view-title="About">
    <ion-content class="padding">
      <p>
        About Us
      </p>
    </ion-content>
</ion-view>

• 1
• 2
• 3
• 4
• 5
• 6
• 7

• 1
• 2
• 3
• 4
• 5
• 6
• 7

ion-view是我們子頁面的內容，屬性view-title可以設置頁面頭部的標題名稱，添加好文件後我們需要在app.js中加入各個頁面的路由，並且需要對之前的tabs路由做一個調整。

$stateProvider
      .state('tabs', {
          url: "/tab",
          abstract: true,
          templateUrl: "templates/tabs.html",
      })
      .state('tabs.home', {
          url: "/home",
          views: {
            'home-tab': {
              templateUrl: "templates/home.html"
            }
          }
      })
      .state('tabs.facts', {
          url: "/facts",
          views: {
            'home-tab': {
              templateUrl: "templates/facts.html"
            }
          }
      })
      .state('tabs.about', {
          url: "/about",
          views: {
            'about-tab': {
              templateUrl: "templates/about.html"
            }
          }
      })


   $urlRouterProvider.otherwise("/tab/home");

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33

大家發現tabs路由增加了一個abstract字段，該字段在angular中的解釋是抽象頁面，不能獨立作爲頁面展示只能作爲其他頁面父頁面，當加載子頁面之前加載父頁面。 
其他子頁面的路由和tabs路由的配置有所不同名稱命名是父路由.子路由的形式，並且增加了一個views字典，字段的key值對應着我們前面所說的tabs.html中ion-nav-view的name屬性，表示該路由跳轉的頁面屬於某個tab的子頁面，同時修改我們的otherwise默認頁爲/tab/home。 
保存之後瀏覽器自動刷新，我們來看一下效果。 

好了，我們來點點看吧，頁面切換Ionic已經幫我們實現了類似原生app的切換動畫效果，是不是有一點原生app的感覺了？下面章節我們會實現在移動端的部署。

3.部署到手機和cordova插件的使用

一個簡單的Web應用我們已經開發完成了，接下來我們就要做一些部署到移動端之前的準備了。 
Ionic支持兩個平臺iOS、Android，默認的Ionic項目並沒有添加這兩個平臺，我們需要手動添加，cd到開發目錄下執行命令：

ionic platform add android 
ionic platform add ios

• 1
• 2

• 1
• 2

一般項目都需要兩個平臺同時部署，所以我們就添加兩個，執行完畢之後執行命令查看你已經添加的平臺列表：

ionic platform list

• 1

• 1

結果：

Installed platforms: android 4.0.0, ios 3.8.0
Available platforms: amazon-fireos, blackberry10, browser, firefoxos, windows, windows8, wp8

• 1
• 2

• 1
• 2

接下來的部署我們分開講述：

Android 
Android部署分真機和虛擬機，其實方法類似，在部署之前需要安裝JDK、Android SDK到開發環境中，配置好JDK的JAVA_HOME和Android SDK的ANDROID_HOME到環境變量中去，並把Android SDK安裝目錄添加到Path中。 
配置好之後打開PowerShell輸入命令返回正確：

adb version

• 1

• 1

接下來就簡單了，把手機連接到電腦，並開啓usb調試模式，執行命令：

ionic run android 

• 1

• 1

Ionic開始編譯項目生成apk並遠程安裝到手機上後自動打開應用，是不是很簡單？

IOS 
ios部署需要一臺mac電腦，在mac電腦上面根據本篇ionic的安裝過程安裝環境之後，添加ios平臺到項目，因爲apple開發的證書限制我們在沒有申請購買apple賬號的情況下，使用虛擬機來部署我們的應用，在部署之前需要使用npm安裝一個ios-sim插件用來調用模擬器的，執行命令：

sudo npm install -g ios-sim

• 1

• 1

安裝好之後，cd 到開發目錄下執行：

sudo ionic build ios

• 1

• 1

開始編譯項目，編譯完成之後用Xcode打開開發目錄下platform->ios->myIonic.xcodeproj的項目文件，Xcode中選擇要運行的虛擬機版本並執行快捷鍵cmd+R運行虛擬機，虛擬機打開後會自動運行你應用。

PS. 爲什麼不用run ios 命令直接啓動虛擬機呢，因爲我的環境下執行run會報錯，虛擬機會打開但是無法運行程序，找了半天解決解決方案沒有結果，索性直接用Xcode了，效果是一樣樣的

到了這一步我們的app已經部署完畢了，接下來我們要爲我們的app添加一個拍照功能，需要引用到cordova插件，而Ionic把一些常用到的插件用angularjs服務做了一層封裝：http://ngcordova.com/ 我們只需要在項目中安裝ngCordova插件就可以想使用angularjs的服務一樣在我們的項目中調用了，我們先安裝ngCordova（安裝需要bower包管理器，並打開VPN。。。）：

bower install ngCordova

• 1

• 1

安裝完畢之後再www/index.html中引用

<script type="text/javascript" src="lib/ngCordova/dist/ng-cordova.js"></script>
<script type="text/javascript" src="cordova.js"></script>

• 1
• 2

• 1
• 2

PS. ng-cordova.js需要在cordova.js引用之前

並在app.js中添加依賴注入關係，另外我發現一個問題如果安裝的ngCordova的0.1.18-alpha版本，在引用時會報錯，我撤回0.1.17-alpha版本就沒有問題了，不知道是什麼原因。

angular.module('starter', ['ionic', 'ngCordova'])

• 1

• 1

接下來cd到開發目錄，我們使用ionic命令來安裝插件：

cordova plugin add cordova-plugin-camera

• 1

• 1

安裝完畢之後會在項目目錄下的plugins文件夾中多出一個cordova-plugin-camera，這就是我們插件目錄。 
下面我要在home頁面中增加一點按鈕調用攝像頭，我們先在www/js中新增一個controller.js文件編寫以下代碼，並在index.html中引用：

(function () {
    'use strict'
    angular
    .module('starter')
    .controller("homeCtrl", homeCtrl, ['$cordovaCamera'])

    function homeCtrl ($scope, $cordovaCamera) {
        $scope.openCamera = function () {
            var options = {
              quality: 50,
              destinationType: Camera.DestinationType.DATA_URL,
              sourceType: Camera.PictureSourceType.CAMERA,
              allowEdit: true,
              encodingType: Camera.EncodingType.JPEG,
              targetWidth: 100,
              targetHeight: 100,
              popoverOptions: CameraPopoverOptions,
              saveToPhotoAlbum: false
            };

            $cordovaCamera.getPicture(options).then(function(imageData) {
              var image = document.getElementById('myImage');
              image.src = "data:image/jpeg;base64," + imageData;
            }, function(err) {
              // error
            });
        }
    }

})();

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30

我們新建了一個homeCtrl並添加$cordovaCamera的引用，在controller中定義一個openCamera方法來調用攝像頭，在home.html中加入以下代碼：

<a class="button icon icon-right ion-chevron-right" href="#/tab/facts">Scientific Facts</a>
<a class="button icon icon-right ion-chevron-right" ng-click="openCamera()">Camera</a>

• 1
• 2

• 1
• 2

 
增加了一個按鈕去調用我們定義的方法openCamera，最後一步在app.js中綁定home路由和controller，在app.js中修改代碼：

.state('tabs.home', {
   url: "/home",
    views: {
      'home-tab': {
        templateUrl: "templates/home.html",
        controller:"homeCtrl"
      }
    }
})

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

到此我們的app增加的打開攝像頭功能已經開發完了，我們來測試下，運行ionic的run方法來看看效果吧。 

4.調試

我們在前面已經說過，在開發前期我們一般會在web中調試，而Ionic爲我們提供了非常方面的web調試環境，只需要執行ionic serve就可以實現lievereload，而在部署到移動端後也可以開啓livereload的，我們只需要修改下我們run命令參數：

ionic run android --livereload -c -s

• 1

• 1

這是android的調試模式，無論在虛擬機上還是在手機上都可以實現livereload，ios則只需要把android修改爲ios即可，不用每次開發完成編譯再部署！-c是開啓客戶端日誌輸出，-s是開啓服務器端日誌輸出。–livereload參數的的意義在於修改生成包中的起始頁面地址，修改爲遠程服務器地址這樣就可以做到修改即通知客戶端刷新頁面了。

5.ios打包、android打包

能使用Ionic來開發app的很可能對Ios和android的app打包發佈流程不是很熟悉，我這裏簡單說明下： 
Android 
Android的打包比較簡單執行命令：

ionic build android -release 

• 1

• 1

找到www/platform目錄下生成的apk包，此時的apk還不能被安裝到手機上，還需要一步簽名操作，大家可以參考： 
http://www.cnblogs.com/qianxudetianxia/archive/2011/04/09/2010468.html

IOS 
ipa文件的打包需要現在apple develop網站上註冊一個賬號，在網站申請生產環境的證書導入到你的開發機中和開發機綁定纔可以使用xcode導出，詳情參閱： 
http://blog.csdn.net/songrotek/article/details/8448331 
http://www.mexiqq.com/2014/07/25/xcode6+ios8%E6%9C%80%E6%96%B0%E7%9C%9F%E6%9C%BA%E8%B0%83%E8%AF%95%E6%95%99%E7%A8%8B/

android使用crosswalk

android內置瀏覽器大家都知道性能是硬傷，尤其是低端機，所有ionic支持使用crosswalk瀏覽器代替系統內置瀏覽器內核，使用crosswalk後性能提升效果比較明顯，但是apk的包體積會增大大約20M，是不用取決於項目使用場景。 
使用crosswalk非常簡單：

ionic browser add crosswalk

• 1

• 1

執行完成後在插件列表裏會增加一個cordova-plugin-crosswalk-webview插件。 
安裝完成後在打包時會自動下載對應的crosswalk包，如果下載失敗嘗試使用vpn，下載完成集成過程中我遇到了一些報錯，報錯的原因大致就是我的android sdk沒有安裝完全，這個大家在使用時需要注意下。

結束語

Ionic作爲一個hybrid應用的開發框架總體來說還是很不錯的，因爲它的開發效率很高，並且可以跨平臺的發佈這兩點可以讓很多人心動了。另外Ionic在實際應用中的表現情況是這樣的，在IOS平臺中運行效率和原生的效果非常好，但是在Android中的就不是太理想了尤其是Android的低端機，不過Ionic的團隊對於這方面的性能優化還在不斷的努力，希望Ionic未來更牛逼。

另外從這次的項目中體會到了尤其是一些新興技術在國內的資料太少，遇到問題不得不翻牆去找國外資料，但是礙於英文水平往往過程是非常痛苦的，所以學好英語是非常重要的！！！

最後介紹下這個應用是一款中介行業的房源管理軟件，集成了gps、推送（最好用極光推送他們有對phonegap插件的支持）、攝像頭拍照、時間控件、文件上傳等原生API